confirmDelete(boxId)}\n />\n ) : null\n ) : null}\n \n Project music \n \n \n
\n \n {\n props.toggles(\"1\");\n }}\n >\n Music\n \n \n \n {\n props.toggles(\"2\");\n }}\n >\n Uploads\n \n \n \n
\n \n \n Music List \n \n
\n
\n
\n
\n
No music
\n
\n
\n {mediaList.map((block, index) => {\n let fileUrl = block.path\n .replace(/\\\\/g, \"/\")\n .substring(\"public\".length);\n let mediaurl = fileUrl.replace(\"sets/\", \"\");\n let updatedImage = mediaurl;\n let mediaName = block.originalname.replace(\".mp3\", \"\");\n return (\n
\n
\n
\n\n
\n playAudio(\"audio\" + index)}\n className=\"mediaPlayback\"\n type=\"button\"\n >\n \n \n \n \n\n {mediaName}
\n {/* 4:51
*/}\n
\n \n );\n })}\n
\n \n \n \n \n \n
\n
\n
setformImage(e)}\n />\n
\n
\n Add music
\n \n
\n
My Uploads \n {usermediaListEmpty ? (\n
\n You have no previous uploads\n
\n ) : (\n
\n {usermediaList.map((block, index) => {\n let fileUrl = block.path\n .replace(/\\\\/g, \"/\")\n .substring(\"public\".length);\n let mediaurl = fileUrl.replace(\"sets/\", \"\");\n let updatedImage = mediaurl;\n let mediaName = block.originalname.replace(\n \".mp3\",\n \"\"\n );\n return (\n
\n
\n
\n
playAudio(\"audio-\" + index)}\n className=\"mediaPlayback\"\n type=\"button\"\n >\n \n \n \n \n \n {mediaName}
\n {/* 4:51
*/}\n
\n \n );\n })}\n
\n )}\n
\n \n
\n \n \n
\n \n \n
\n
\n \n Save\n \n
\n
\n \n Cancel\n \n
\n
\n
\n \n );\n};\nexport default MediaUpload;\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport HOC from \"./HOC\";\r\nimport { apiPath } from \"./../../../Utility/Utility\";\r\nconst PlayerSceneLast = (props) => {\r\n const [sceneIndex, setSceneIndex] = React.useState(props.index);\r\n const [sceneActive, setSceneActive] = React.useState(false);\r\n const [activeClass, setActiveClass] = React.useState(false);\r\n const [timer, setTimer] = React.useState(props.timer);\r\n const [sceneTime, setSceneTime] = React.useState(props.data.time);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, settextArray] = React.useState([]);\r\n var textArrays = [];\r\n\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n }\r\n React.useEffect(() => {\r\n if (props.data.media) {\r\n setMediaArray(props.data.media);\r\n }\r\n //console.log(props.data.textArray);\r\n if (props.data.textArray != undefined){\r\n\r\n \r\n settextArray(props.data.textArray);\r\n }\r\n textArrays = props.data.textArray;\r\n \r\n var timeout, activeClassTimer;\r\n clearTimeout(timeout);\r\n clearTimeout(activeClassTimer);\r\n if (props.index == 0) {\r\n setSceneActive(true);\r\n activeClassTimer = setTimeout(function () {\r\n setActiveClass(true);\r\n }, 100);\r\n timeout = setTimeout(function () {\r\n setActiveClass(false);\r\n clearTimeout(timeout);\r\n }, parseFloat(props.time) * 1000);\r\n } else {\r\n timeout = setTimeout(function () {\r\n setSceneActive(true);\r\n activeClassTimer = setTimeout(function () {\r\n setActiveClass(true);\r\n }, 100);\r\n setTimeout(function () {\r\n if (props.show) {\r\n setActiveClass(true);\r\n } else {\r\n setActiveClass(false);\r\n }\r\n\r\n clearTimeout(timeout);\r\n }, parseFloat(props.time) * 1000 + 105);\r\n }, parseFloat(props.timer) * 1000);\r\n }\r\n }, [textArrays]);\r\n\r\n function getcontent(e, index) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n };\r\n props.getContent(newArr);\r\n }\r\n return (\r\n \r\n {sceneActive ? (\r\n \r\n \r\n
\r\n
\r\n {mediaArray.length > 0 ? (\r\n
\r\n ) : null}\r\n
\r\n
\r\n {textArray.length > 0 && textArray != undefined && textArray.length != undefined\r\n ? textArray.map((data, index) => {\r\n return (\r\n
\r\n setshowbg(false, \"\", \"\", false, \"\", index)\r\n }\r\n >\r\n getcontent(e, index)}\r\n >\r\n \r\n );\r\n })\r\n : null}\r\n\r\n {mediaArray.length > 0 ? (\r\n
\r\n ) : null}\r\n
\r\n
\r\n );\r\n};\r\nexport default PlayerSceneLast;\r\n","import React from \"react\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport { Link } from \"react-router-dom\";\r\nimport trash from \"./../../../Assets/images/templates/trash.svg\";\r\nimport update from \"./../../../Assets/images/templates/update.png\";\r\nimport HOC from \"./../Player/HOC\";\r\nimport axios from \"axios\";\r\nimport $ from \"jquery\";\r\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter } from \"reactstrap\";\r\nimport Loader from \"./../../../Utility/Loader/Loader\";\r\nimport Box from \"./Box\";\r\nimport MediaUpload from \"./MediaUpload\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport { Redirect } from \"react-router-dom\";\r\nimport Cookies from \"universal-cookie\";\r\nimport {\r\n apiPath,\r\n apideleteBlock,\r\n apiUpdateBlock,\r\n apiGetLastScene,\r\n} from \"./../../../Utility/Utility\";\r\n\r\nimport PlayerSceneLast from \"./../Player/SceneLast\";\r\nconst BottomSection = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n\r\n const [activeTab, setActiveTab] = React.useState(\"1\");\r\n\r\n const toggles = (tab) => {\r\n if (activeTab !== tab) setActiveTab(tab);\r\n };\r\n const [showStop, setShowStop] = React.useState(false);\r\n const [lastScenetime, setLastScenetime] = React.useState(\"\");\r\n const [lastSceneData, setLastSceneData] = React.useState([]);\r\n const [lastSceneDatas, setLastSceneDatas] = React.useState(\"\");\r\n const [processing, setProcessing] = React.useState(false);\r\n const [dragId, setDragId] = React.useState();\r\n const [blockCount, setblockCount] = React.useState(\"1\");\r\n const [blockIndex, setBlockIndex] = React.useState(\"\");\r\n const [blockToDelete, setblockToDelete] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userPlan, setUserPlan] = React.useState(\"\");\r\n\r\n const { buttonLabel, className } = props;\r\n\r\n const [modal, setModal] = React.useState(false);\r\n const [modal2, setModal2] = React.useState(false);\r\n const [modal3, setModal3] = React.useState(false);\r\n const toggle = () => setModal(!modal);\r\n const toggle2 = () => setModal2(!modal2);\r\n const toggle3 = () => setModal3(!modal3);\r\n const [playerTime, setPlayerTime] = React.useState();\r\n const [sceneData, setSceneData] = React.useState(props.bottomData.blocks);\r\n\r\n function addScene() {\r\n props.showAddScene(\"true\", props.scene);\r\n }\r\n function hideScene() {\r\n props.showAddScene(false, \"\");\r\n }\r\n var rows = [];\r\n for (var i = 0; i < playerTime; i++) {\r\n rows.push(i);\r\n }\r\n\r\n var i, elmnt, widthElement;\r\n var elem = document.getElementById(\"progress\");\r\n var bar = document.getElementById(\"progressBar\");\r\n\r\n var width = 0;\r\n var id;\r\n function move() {\r\n elmnt = document.getElementById(\"scene-section\");\r\n widthElement = elmnt.offsetWidth;\r\n if (i == 0) {\r\n i = 1;\r\n window.myVar = setInterval(frame, 500);\r\n elem.classList.add(\"isPlaying\");\r\n bar.classList.add(\"isPlayings\");\r\n }\r\n }\r\n function frame() {\r\n if (width >= playerTime * 80) {\r\n elem.classList.remove(\"isPlaying\");\r\n bar.classList.remove(\"isPlayings\");\r\n width = 0;\r\n elem.style.width = width + \"px\";\r\n bar.style.width = width + \"px\";\r\n clearInterval(window.myVar);\r\n i = 0;\r\n setShowStop(false);\r\n props.playVideo(false);\r\n if (props.bottomData.musicFile) {\r\n let audiox = document.getElementById(\"playerAudio\");\r\n pauseAudio(audiox);\r\n }\r\n } else {\r\n if (width >= widthElement) {\r\n elmnt.scrollLeft += widthElement;\r\n widthElement = 2 * widthElement;\r\n }\r\n width = width + 40;\r\n elem.style.width = width + \"px\";\r\n bar.style.width = width + \"px\";\r\n }\r\n }\r\n\r\n function checkScroll() {\r\n const element = document.getElementById(sceneId);\r\n if (element != null) {\r\n let pos = element.offsetLeft;\r\n\r\n elmnt = document.getElementById(\"scene-section\");\r\n elmnt.scrollLeft += pos - 150;\r\n }\r\n }\r\n function playScene() {\r\n props.playVideo(true);\r\n i = 0;\r\n setShowStop(true);\r\n if (props.bottomData.musicFile) {\r\n let audiox = document.getElementById(\"playerAudio\");\r\n playAudio(audiox);\r\n }\r\n move();\r\n }\r\n function stopScene() {\r\n props.playVideo(false);\r\n clearInterval(window.myVar);\r\n elem.classList.remove(\"isPlaying\");\r\n bar.classList.remove(\"isPlayings\");\r\n width = 0;\r\n elem.style.width = width + \"px\";\r\n bar.style.width = width + \"px\";\r\n setShowStop(false);\r\n if (props.bottomData.musicFile) {\r\n let audiox = document.getElementById(\"playerAudio\");\r\n pauseAudio(audiox);\r\n }\r\n }\r\n const handleStop = (e, data) => {\r\n console.log(\"Event: \", e);\r\n console.log(\"Data: \", data);\r\n };\r\n React.useEffect(() => {\r\n var time = 0;\r\n sceneData.map((scene) => {\r\n time = parseFloat(time) + parseFloat(scene.sceneData.time);\r\n });\r\n\r\n if (props.lastsceneExclude == undefined) {\r\n axios\r\n .get(`${apiGetLastScene}` + \"?id=\" + templateId, {})\r\n .then(function (response) {\r\n console.log(response)\r\n console.log('props.lastsceneExclude')\r\n setPlayerTime(parseFloat(time) + response.data.scene.sceneData.time);\r\n setLastScenetime(response.data.scene.sceneData.time);\r\n setLastSceneData(response.data.scene);\r\n setLastSceneDatas(response.data.scene.sceneData);\r\n });\r\n }\r\n\r\n setPlayerTime(time);\r\n function handleResize() {\r\n let intViewportHeight = window.innerHeight;\r\n let headerHeight = $(\".header\").height();\r\n let templateHeader = $(\".template-new-wrapper-top\").height();\r\n $(\".outervh\").css(\r\n \"height\",\r\n intViewportHeight - headerHeight - templateHeader - 250\r\n );\r\n }\r\n window.addEventListener(\"resize\", handleResize);\r\n // console.log(props.bottomData.musicFile)\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n // console.log(decoded)\r\n setUserPlan(decoded.userPlan);\r\n }\r\n setTimeout(function () {\r\n checkScroll();\r\n }, 1000);\r\n }, []);\r\n\r\n function confirmDelete(id) {\r\n setModal(!modal);\r\n setblockToDelete(id);\r\n }\r\n function deleteBlock() {\r\n setModal(!modal);\r\n setProcessing(true);\r\n let blockId = blockToDelete;\r\n axios\r\n .delete(`${apideleteBlock}`, {\r\n params: {\r\n blockId: blockId,\r\n },\r\n })\r\n .then(function (response) {\r\n //console.log(response.data.message)\r\n if (response.data.message) {\r\n setProcessing(false);\r\n } else {\r\n setProcessing(false);\r\n }\r\n window.location.reload();\r\n });\r\n }\r\n\r\n const handleDrag = (ev) => {\r\n setDragId(ev.currentTarget.id);\r\n };\r\n\r\n const handleDrop = async (ev) => {\r\n const dragBox = sceneData.find((box) => box._id === dragId);\r\n const dropBox = sceneData.find((box) => box._id === ev.currentTarget.id);\r\n const dragBoxOrder = dragBox.order;\r\n const dropBoxOrder = dropBox.order;\r\n\r\n const newBoxState = sceneData.map((box, index) => {\r\n if (box._id === dragId) {\r\n box.order = dropBoxOrder;\r\n }\r\n if (box._id === ev.currentTarget.id) {\r\n box.order = dragBoxOrder;\r\n }\r\n return box;\r\n });\r\n setSceneData(newBoxState);\r\n\r\n await newBoxState.map((box, index) => {\r\n axios\r\n .put(`${apiUpdateBlock}/${box._id}`, {\r\n id: box._id,\r\n order: box.order,\r\n })\r\n .then(function (response) {\r\n props.reFetchData();\r\n });\r\n });\r\n };\r\n const showMedia = () => {\r\n setModal2(!modal2);\r\n };\r\n const saveMedia = () => {\r\n props.reFetchData();\r\n };\r\n function playAudio(audioToplay) {\r\n audioToplay.play();\r\n }\r\n function pauseAudio(audioTopause) {\r\n if (props.bottomData.musicFile) {\r\n audioTopause.currentTime = 0;\r\n audioTopause.pause();\r\n }\r\n }\r\n return (\r\n \r\n \r\n
\r\n {/*
Length: {playerTime}s
*/}\r\n
\r\n {showStop ? (\r\n
\r\n ) : (\r\n
\r\n
\r\n
= 2 ? toggle3 : addScene\r\n }\r\n >\r\n \r\n Plus \r\n \r\n
\r\n )}\r\n
\r\n 0.{playerTime}\r\n {/* {showStop ? \"Stop\" : \"Play\"} */}\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n {rows.map((data, index) => {\r\n return (\r\n
\r\n {index}\r\n
\r\n );\r\n })}\r\n
\r\n
\r\n {/*
\r\n
\r\n {rows.map((data, index) => {\r\n return
{index}
;\r\n })}\r\n
\r\n
*/}\r\n
\r\n \r\n \r\n {sceneData\r\n .sort((a, b) => a.order - b.order)\r\n .map((scene, index) => {\r\n return (\r\n \r\n );\r\n })}\r\n\r\n {\r\n lastSceneData.sceneThumbnail ? (\r\n \r\n\r\n \r\n
\r\n {lastSceneData._id != sceneId ? (\r\n
confirmDelete(lastSceneData._id, \"lastscene\")}\r\n />\r\n )\r\n : null\r\n}\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n Delete Block \r\n \r\n Are you sure you want to delete this block?
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n confirm\r\n \r\n
\r\n
\r\n \r\n Cancel\r\n \r\n
\r\n
\r\n
\r\n \r\n\r\n \r\n Upgrade To Premium Plan \r\n \r\n \r\n You are currenly using our free plan.\r\n 2 Premium plans that fulfill your needs.\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n ) : null}\r\n \r\n );\r\n};\r\nexport default BottomSection;\r\n","/* eslint-disable eqeqeq */\nimport React from \"react\";\nimport axios from \"axios\";\nimport jwt_decode from \"jwt-decode\";\nimport Cookies from \"universal-cookie\";\nimport { useRouteMatch } from \"react-router-dom\";\nimport Loader from \"../../../Utility/Loader/Loader\";\nimport {\n apiUploadMedia,\n apigetMusicUploads,\n apiupdateAdminTemplate,\n apiPath,\n} from \"../../../Utility/Utility\";\nimport {\n TabContent,\n TabPane,\n Nav,\n NavItem,\n NavLink,\n Card,\n Row,\n Col,\n CardTitle,\n CardText,\n} from \"reactstrap\";\nimport classnames from \"classnames\";\nimport backarrow from \"./../../../Assets/images/templates/back-arrow.svg\";\nconst AddMusic = (props) => {\n const { buttonLabel, className } = props;\n const [userToken, setUserToken] = React.useState(\"\");\n const cookies = new Cookies();\n const [userId, setUserId] = React.useState(\"\");\n const [audioPlayId, setAudioPlayId] = React.useState(\"\");\n const [processing, setProcessing] = React.useState(false);\n const [successMessage, setSuccessMessage] = React.useState(false);\n const [active, setActive] = React.useState(false);\n const [mediaList, setMediaList] = React.useState([]);\n const [mediaListEmpty, setMediaListEmpty] = React.useState(true);\n const [usermediaList, setUserMediaList] = React.useState([]);\n const [usermediaListEmpty, setUserMediaListEmpty] = React.useState(true);\n const [selectedMedia, setSelectedMedia] = React.useState(\"\");\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\n const [activeTab, setActiveTab] = React.useState(\"1\");\n\n const toggles = (tab) => {\n if (activeTab !== tab) setActiveTab(tab);\n };\n const [x, setX] = React.useState(\"\");\n const [y, setY] = React.useState(0);\n const [audioId, setAudioId] = React.useState(\"\");\n const {\n params: { templateId },\n } = match;\n const {\n params: { sceneId },\n } = match;\n function getUploads() {\n axios.get(`${apigetMusicUploads}`, {}).then(function (response) {\n if (response.data.data) {\n console.log(response.data.data);\n setMediaList(response.data.data);\n setMediaListEmpty(false);\n } else {\n setMediaListEmpty(true);\n }\n });\n axios\n .get(`${apigetMusicUploads}` + \"?userId=\" + userId, {})\n .then(function (response) {\n if (response.data.data) {\n console.log(response.data.data);\n setUserMediaList(response.data.data);\n setUserMediaListEmpty(false);\n } else {\n setUserMediaListEmpty(true);\n }\n });\n }\n React.useEffect(() => {\n const tokens = localStorage.getItem('token');\n // if (cookies.get(\"token\")) {\n if (tokens != null) {\n setUserToken(cookies.get(\"token\"));\n const token = cookies.get(\"token\");\n const decoded = jwt_decode(tokens);\n // console.log(decoded.id)\n setUserId(decoded.id);\n }\n getUploads();\n }, [userId]);\n function setformImage(e) {\n var parts = e.target.files[0].type.split(\"/\");\n var result = parts[0];\n if (e.target.files[0] != \"\") {\n const data = new FormData();\n data.append(\"file\", e.target.files[0]);\n data.append(\"userId\", userId);\n data.append(\"adminMedia\", false);\n setProcessing(true);\n axios\n .post(`${apiUploadMedia}`, data)\n .then((response) => {\n setProcessing(false);\n let fileUrl = response.data.message\n .replace(/\\\\/g, \"/\")\n .substring(\"public\".length);\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\n let updatedImage = imageUrl;\n getUploads();\n })\n .catch((error) => {});\n }\n }\n const playAudio = (audio) => {\n if (audioId != \"\") {\n if (audioId == audio) {\n if (y == 1) {\n pauseAudio(x);\n setY(0);\n setAudioPlayId(\"\");\n } else {\n playAudio(x);\n setY(1);\n setAudioPlayId(audio);\n }\n } else {\n pauseAudio(x);\n setAudioId(audio);\n let audiox = document.getElementById(audio);\n setX(audiox);\n playAudio(audiox);\n setAudioPlayId(audio);\n setY(1);\n }\n } else {\n setAudioId(audio);\n setAudioPlayId(audio);\n let audiox = document.getElementById(audio);\n setAudioId(audio);\n setX(audiox);\n playAudio(audiox);\n setY(1);\n }\n\n function playAudio(audioToplay) {\n audioToplay.play();\n }\n };\n function pauseAudio(audioTopause) {\n audioTopause.pause();\n }\n function savemedia() {\n setSuccessMessage(false);\n setProcessing(true)\n if (selectedMedia) {\n axios\n .put(`${apiupdateAdminTemplate}${templateId}`, {\n id: templateId,\n musicFile: selectedMedia,\n })\n .then(function (response) {\n props.reFetchData();\n setSuccessMessage(\"true\");\n setProcessing(false)\n if (audioPlayId) {\n pauseAudio(x);\n setAudioPlayId(\"\");\n setY(0);\n }\n });\n }\n }\n function setMusicFile(e) {\n setSelectedMedia(e.target.value);\n }\n\n return (\n \n \n
\n
\n \n \n {\n toggles(\"1\");\n }}\n >\n Music \n \n \n \n {\n toggles(\"2\");\n }}\n >\n Uploads\n \n \n \n
\n
\n
\n
\n \n \n Music List \n \n
\n
\n
\n
\n
No music
\n
\n
\n {mediaList.map((block, index) => {\n let fileUrl = block.path\n .replace(/\\\\/g, \"/\")\n .substring(\"public\".length);\n let mediaurl = fileUrl.replace(\"sets/\", \"\");\n let updatedImage = mediaurl;\n let mediaName = block.originalname.replace(\n \".mp3\",\n \"\"\n );\n return (\n
\n
\n
\n\n
\n playAudio(\"audio\" + index)}\n className=\"mediaPlayback\"\n type=\"button\"\n >\n \n \n \n \n\n {mediaName}
\n {/* 4:51
*/}\n
\n \n );\n })}\n
\n \n \n \n \n \n
\n
\n
setformImage(e)}\n />\n
\n
\n \n Add music\n
\n \n
\n
My Uploads \n {usermediaListEmpty ? (\n
\n You have no previous uploads\n
\n ) : (\n
\n {usermediaList.map((block, index) => {\n let fileUrl = block.path\n .replace(/\\\\/g, \"/\")\n .substring(\"public\".length);\n let mediaurl = fileUrl.replace(\"sets/\", \"\");\n let updatedImage = mediaurl;\n let mediaName = block.originalname.replace(\n \".mp3\",\n \"\"\n );\n return (\n
\n
\n
\n
\n playAudio(\"audio-\" + index)\n }\n className=\"mediaPlayback\"\n type=\"button\"\n >\n \n \n \n \n \n {mediaName}
\n {/* 4:51
*/}\n
\n \n );\n })}\n
\n )}\n
\n \n
\n \n \n
\n {successMessage ? (\n
\n Success! Music added successfully.\n
\n ) : null}\n
\n Save\n \n
\n
\n
\n
\n );\n};\nexport default AddMusic;\n","import React from \"react\";\r\n\r\nimport { Link } from \"react-router-dom\";\r\nexport default [\r\n\r\n {\r\n selector: '[data-tut=\"reactour__1\"]',\r\n content: `This is our canvas where you add you images and text.`\r\n },\r\n {\r\n selector: '[data-tut=\"reactour__2\"]',\r\n content: `Here you can upload image by drag and drop`\r\n },\r\n {\r\n selector: '[data-tut=\"reactour__3\"]',\r\n content: `Click on the text and you will see options to edit text`\r\n },\r\n {\r\n selector: '[data-tut=\"reactour__4\"]',\r\n content: `Here is the panel of options to edit text where you can set font family, color and other options`\r\n },\r\n {\r\n selector: '[data-tut=\"reactour__5\"]',\r\n content: `Click on image and see various options`\r\n },\r\n {\r\n selector: '[data-tut=\"reactour__6\"]',\r\n content: `Click on add to add more scenes to the template`\r\n },\r\n {\r\n selector: '[data-tut=\"reactour__7\"]',\r\n content: `Click on music to add background music to the template`\r\n },\r\n \r\n {\r\n selector: '[data-tut=\"reactour__8\"]',\r\n content: ` Click on Global Options and you will see option for set text options through out scenes`\r\n },\r\n {\r\n selector: '[data-tut=\"reactour__10\"]',\r\n content: `Click here to add more scenes to the template`\r\n },\r\n \r\n \r\n {\r\n selector: '[data-tut=\"reactour__11\"]',\r\n content: `Here you can add title for template`\r\n },\r\n {\r\n selector: '[data-tut=\"reactour__12\"]',\r\n content: `You can undo changes`\r\n },\r\n {\r\n selector: '[data-tut=\"reactour__13\"]',\r\n content: `You can redo changes`\r\n },\r\n {\r\n selector: '[data-tut=\"reactour__9\"]',\r\n content: `Click on edit to see canvas again`\r\n },\r\n {\r\n selector: '[data-tut=\"reactour__14\"]',\r\n content: `After completion click on Export to export your video`\r\n },\r\n // {\r\n // selector: '[data-tut=\"reactour__copy\"]',\r\n // content: `Keep in mind that you could try and test everithing during the Tour. \r\n // For example, try selecting the highlighted text…`\r\n // },\r\n// {\r\n// selector: '[data-tut=\"reactour__style\"]',\r\n// content: () => (\r\n// \r\n//
\r\n// {/* The tourist guide */}\r\n// could be dressed in any way, using custom components, styles and so\r\n// on…\r\n//
\r\n//
\r\n// \r\n// Text effect\r\n// {\" \"}\r\n// by{\" \"}\r\n//
\r\n//
\r\n// If you wanna go anywhere, skipping places, it is absolutely possible.\r\n// setCurrentStep(1)}\r\n// >\r\n// Please go back to{\" \"}\r\n// \r\n// 🚌\r\n// \r\n// \r\n//
\r\n// )\r\n// },\r\n// {\r\n// selector: '[data-tut=\"reactour__position\"]',\r\n// content: () => (\r\n// \r\n// {/* The tourist guide could */}\r\n// be positioned where you want.\r\n// \r\n// left side\r\n// {\" \"}\r\n// if there's available space, otherwise will{\" \"}\r\n// auto position .\r\n//
\r\n// ),\r\n// position: \"left\"\r\n// },\r\n// {\r\n// selector: '[data-tut=\"reactour__scroll\"]',\r\n// content:\r\n// \"Probably you noted that the Tour scrolled directly to the desired place, and you could control the time also…\"\r\n// },\r\n// {\r\n// selector: '[data-tut=\"reactour__scroll--hidden\"]',\r\n// content: \"Also when places are pretty hidden…\"\r\n// },\r\n// {\r\n// selector: '[data-tut=\"reactour__action\"]',\r\n// content:\r\n// \"When arrived on each place you could fire an action, like… (look at the console)\",\r\n// action: () =>\r\n// console.log(`\r\n// ------------🏠🏚---------\r\n// 🚌 Arrived to explore these beautiful buildings! 🚌\r\n// ------------🏠🏚---------\r\n// 🚧 This action could also fire a method in your Component 🚧\r\n// `)\r\n// },\r\n// {\r\n// selector: '[data-tut=\"reactour__state\"]',\r\n// content:\r\n// \"And the Tour could be observing changes to update the view, try clicking the button…\",\r\n// highlightedSelectors: ['[data-tut=\"reactour__highlighted\"]'],\r\n// mutationObservables: ['[data-tut=\"reactour__highlighted\"]']\r\n// }\r\n];\r\n","/* eslint-disable no-unreachable */\r\n/* eslint-disable no-lone-blocks */\r\n/* eslint-disable array-callback-return */\r\nimport React from \"react\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport PlayerSceneOne from \"./Scene1\";\r\nimport PlayerSceneTwo from \"./Scene2\";\r\nimport PlayerSceneThree from \"./Scene3\";\r\nimport PlayerSceneFour from \"./Scene4\";\r\nimport PlayerSceneFive from \"./Scene5\";\r\nimport PlayerSceneSix from \"./Scene6\";\r\nimport PlayerSceneSeven from \"./Scene7\";\r\nimport PlayerSceneEight from \"./Scene8\";\r\nimport PlayerSceneNine from \"./Scene9\";\r\nimport PlayerSceneTen from \"./Scene10\";\r\nimport PlayerSceneEleven from \"./Scene11\";\r\nimport PlayerSceneTwelve from \"./Scene12\";\r\nimport PlayerSceneThirteen from \"./Scene13\";\r\nimport PlayerSceneFourteen from \"./Scene14\";\r\nimport PlayerSceneFifteen from \"./Scene15\";\r\nimport PlayerSceneSixteen from \"./Scene16\";\r\nimport PlayerSceneSeventeen from \"./Scene17\";\r\nimport PlayerSceneEighteen from \"./Scene18\";\r\nimport PlayerSceneNineteen from \"./Scene19\";\r\nimport PlayerSceneTwenty from \"./Scene20\";\r\nimport PlayerSceneTwentyOne from \"./Scene21\";\r\nimport PlayerSceneTwentyTwo from \"./Scene22\";\r\n\r\nimport PlayerSceneThirtySeven from \"./Scene37\";\r\nimport PlayerSceneThirtyEight from \"./Scene38\";\r\nimport PlayerSceneThirtyNine from \"./Scene39\";\r\nimport PlayerSceneFourty from \"./Scene40\";\r\nimport PlayerSceneFourtyOne from \"./Scene41\";\r\nimport PlayerSceneTwentyThree from \"./Scene23\";\r\nimport PlayerSceneTwentyFive from \"./Scene25\";\r\nimport PlayerSceneTwentyFour from \"./Scene24\";\r\nimport PlayerSceneTwentySix from \"./Scene26\";\r\nimport PlayerSceneTwentySeven from \"./Scene27\";\r\nimport PlayerSceneTwentyEight from \"./Scene28\";\r\nimport PlayerSceneTwentyNine from \"./Scene29\";\r\nimport PlayerSceneThirty from \"./Scene30\";\r\nimport PlayerSceneThirtyOne from \"./Scene31\";\r\nimport PlayerSceneThirtyTwo from \"./Scene32\";\r\nimport PlayerSceneFourtySeven from \"./Scene47\";\r\nimport PlayerSceneFourtyEight from \"./Scene48\";\r\nimport PlayerSceneFourtyNine from \"./Scene49\";\r\nimport PlayerSceneFifty from \"./Scene50\";\r\nimport PlayerSceneThirtyThree from \"./Scene33\";\r\nimport PlayerSceneThirtySix from \"./Scene36\";\r\nimport PlayerSceneThirtyFour from \"./Scene34\";\r\nimport PlayerSceneThirtyFive from \"./Scene35\";\r\nimport PlayerSceneFourtyTwo from \"./Scene42\";\r\nimport PlayerSceneFourtyThree from \"./Scene43\";\r\nimport PlayerSceneFourtyFour from \"./Scene44\";\r\nimport PlayerSceneFourtyFive from \"./Scene45\";\r\nimport PlayerSceneFourtySix from \"./Scene46\";\r\nimport PlayerSceneLast from \"./SceneLast\";\r\nimport axios from \"axios\";\r\nimport HOC from \"./HOC\";\r\nimport $ from \"jquery\";\r\nimport { apiGetLastScene } from \"./../../../Utility/Utility\";\r\n\r\n\r\nconst Player = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const [blocks, setBlocks] = React.useState(props.blocks);\r\n React.useEffect(() => {\r\n // var myInterval, myVar;\r\n // $(\".player-new section:first-of-type\").addClass(\"active\");\r\n // clearTimeout(myVar);\r\n // var myFunc = function () {\r\n // var cur = $(\".player-new section.active\");\r\n // if (cur.index() == $(\".player-new section\").length - 1) {\r\n // cur.removeClass(\"active\");\r\n // $(\".player-new section:first-of-type\").addClass(\"active\");\r\n // clearInterval(myInterval);\r\n // } else {\r\n // cur.removeClass(\"active\").next().addClass(\"active\");\r\n // }\r\n // };\r\n // //Start Interval\r\n // myVar = setTimeout(function () {\r\n // myInterval = setInterval(myFunc, 4000);\r\n // }, 500);\r\n {\r\n // blocks.map((data, index) => {\r\n // });\r\n }\r\n \r\n axios\r\n .get(`${apiGetLastScene}` + \"?id=\" + templateId, {})\r\n .then(function (response) {\r\n setBlocks((oldArray) => [...oldArray, response.data.scene]);\r\n });\r\n }, []);\r\n var timer = 0;\r\n return (\r\n \r\n {blocks.map((data, index) => {\r\n return (\r\n \r\n {data.sceneId == 1 ? (\r\n \r\n {\" \"}\r\n {(timer = parseFloat(timer) + parseFloat(data.sceneData.time))}\r\n
\r\n \r\n );\r\n })}\r\n \r\n );\r\n};\r\nexport default Player;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"./../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"./../../TopSection/TopSection\";\r\nimport TextEditor from \"./../../TextEditor/TextEditor\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport ChangeBg from \"./../../ChangeBg\";\r\nimport Scene1 from \"./Scene1\";\r\nimport AddMedia from \"./../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"./../../BottomSection/BottomSection\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nimport { disableBodyScroll, enableBodyScroll } from \"body-scroll-lock\";\r\nimport steps from \"./../../Guide/steps\"\r\nimport Tour from \"reactour\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\n\r\nconst TemplateNew1 = (props) => {\r\n const disableBody = target => disableBodyScroll(target);\r\n const enableBody = target => enableBodyScroll(target);\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/1/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [isTourOpen, setIsTourOpen] = React.useState(false);\r\n const [isShowingMore, setIsShowingMore] = React.useState(false);\r\n\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [processing, setProcessing] = React.useState(true);\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(5.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n time: time,\r\n };\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n\r\n function getTextlineHeight(lineHeight) {\r\n setTextlineHeight(lineHeight);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n\r\n function getTextSize(size) {\r\n setTextSize(size);\r\n\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function showMusic(media) {\r\n console.log(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n // setAddScene(false)\r\n setAddMusic(media);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n // getData()\r\n }\r\n setAddMedia(media);\r\n\r\n getData();\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index, newArrs) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // setBgType(mediaType);\r\n // setBgScene(mediaFile);\r\n // let newArr = [...mediaArray]; // copying the old datas array\r\n // newArr[index] = {\r\n // type: mediaType,\r\n // url: mediaFile,\r\n // };\r\n // console.log(newArr)\r\n // // setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArrs,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n getData();\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n setProcessing(false);\r\n if (response.data.data.length > 0) {\r\n // console.log(response.data.data);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n\r\n if (response.data.data[0].blocks.length > 0) {\r\n setTemplateTitle(response.data.data[0].title);\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setBlocks(response.data.data[0].blocks);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 1) {\r\n // if (undoData.length == 0) {\r\n setUpatedData(block.sceneData);\r\n //}\r\n //console.log(\"herer\");\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n\r\n // console.log(block)\r\n }\r\n });\r\n }\r\n }\r\n else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n // getData();\r\n }, [userId]);\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n console.log(data);\r\n setMediaArray(data.media);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n // if (data != \"undefined\" && undoCount == true) {\r\n // setUndoData((prevState) => [...prevState, upatedData]);\r\n // }\r\n // getData();\\\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n const toggleShowMore = () => {\r\n setIsShowingMore(!isShowingMore)\r\n };\r\n\r\n const closeTour = () => {\r\n setIsTourOpen(false)\r\n };\r\n const showTour = () => {\r\n setIsTourOpen(true)\r\n };\r\n const accentColor = \"#5cb7b7\";\r\n return (\r\n \r\n\r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : mediaArray && data ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
Guide
\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateNew1;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport left from \"./../../../../Assets/images/templates/left.png\";\r\nimport right from \"./../../../../Assets/images/templates/right.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\n\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneTwo = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [content, setContent] = React.useState([]);\r\n const [counter, setCounter] = React.useState(content.length);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef(); const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, container) {\r\n props.showBg(option, type, scene, titleColor, container);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n dots: true,\r\n speed: 1500,\r\n autoplaySpeed: 3500,\r\n slidesToShow: 1,\r\n infinite: false,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n swipe: false,\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n dots: true,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n dots: true,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n dots: true,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n const settings2 = {\r\n dots: true,\r\n speed: 1500,\r\n autoplaySpeed: 3500,\r\n slidesToShow: 2,\r\n infinite: false,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n\r\n };\r\n const addSection = () => {\r\n setCounter(counter + 1);\r\n let newArr = [...content]; // copying the old datas array\r\n newArr[counter] = {\r\n title: \"Enter Title\",\r\n text: \"Enter Value\",\r\n };\r\n\r\n props.getContent(newArr);\r\n setContent(newArr);\r\n };\r\n const deleteSection = (e) => {\r\n setCounter(counter - 1);\r\n content.splice(e, 1);\r\n props.getContent(content);\r\n };\r\n\r\n const updateFieldChanged = (index) => (e) => {\r\n let newArr = [...content]; // copying the old datas array\r\n const maxlimit = 14;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n title: newArr[index].title,\r\n text: charc,\r\n };\r\n setContent(newArr);\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n title: newArr[index].title,\r\n text: e.target.value,\r\n };\r\n setContent(newArr);\r\n props.getContent(newArr);\r\n }\r\n };\r\n const updateTile = (index) => (e) => {\r\n // let newArr = [...content]; // copying the old datas array\r\n // newArr[index] = {\r\n // title: e.target.value,\r\n // text: newArr[index].text,\r\n // };\r\n // props.getContent(newArr);\r\n // setContent(newArr); // ??\r\n\r\n let newArr = [...content]; // copying the old datas array\r\n const maxlimit = 14;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n title: charc,\r\n text: newArr[index].text,\r\n };\r\n setContent(newArr);\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n title: e.target.value,\r\n text: newArr[index].text,\r\n };\r\n props.getContent(newArr);\r\n setContent(newArr);\r\n }\r\n };\r\n React.useEffect(() => {\r\n setContent(props.content);\r\n\r\n setMediaArray(props.mediaArray);\r\n setCounter(props.content.length);\r\n if (props.data) {\r\n setContent(props.content);\r\n setCounter(props.content.length);\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n }, [props.content, props.fontFamily, props.data]);\r\n\r\n const slidePre = (index) => {\r\n console.log(index)\r\n console.log('index');\r\n slider1.current.slickGoTo(index);\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n\r\n
\r\n
\r\n {typeof content != undefined && content.length\r\n ? content.map((data, index) => {\r\n return (\r\n
\r\n
\r\n {counter < 5 ? (\r\n
\r\n ) : null}\r\n {counter > 1 ? (\r\n
deleteSection(index)}\r\n />\r\n ) : null}\r\n \r\n
setsctiveFontFamily(true)}>\r\n \r\n
setsctiveFontFamily(false)}\r\n >\r\n \r\n
\r\n );\r\n })\r\n : null}\r\n
\r\n
(slider1.current = slider)}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragEnd={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n backgroundImage: \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n
\r\n
(slider2.current = slider)}\r\n slidesToShow={2}\r\n swipeToSlide={true}\r\n {...settings2}\r\n focusOnSelect={true}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
slidePre(index)}>\r\n
\r\n {index == 0 ?\r\n
\r\n
\r\n
\r\n :
\r\n
\r\n
\r\n }\r\n
\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\nexport default SceneTwo;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"./../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"./../../TopSection/TopSection\";\r\nimport TextEditor from \"./../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"./../../ChangeBg\";\r\nimport SceneTwo from \"./Scene2\";\r\nimport AddMedia from \"./../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"./../../BottomSection/BottomSection\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apiUpdateBlock,\r\n apigetAdminTemplate,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene2 = (props) => {\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/2/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [content, setContent] = React.useState([]);\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-left\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [texAreatextColor, setTexAreatextColor] = React.useState(\"\");\r\n const [titletextColor, setTitletextColor] = React.useState(\"\");\r\n const [titletextSize, setTitletextSize] = React.useState(\"\");\r\n\r\n const [fontfamilySet, setFontfamilySet] = React.useState(\"\");\r\n const [fontweightSet, setFontweightSet] = React.useState(\"\");\r\n\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [titleactive, setTitleactive] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [titleFontFamily, setTitleFontFamily] = React.useState(\"\");\r\n const [titleFontWeight, setTitleFontWeight] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [setInitials, setSetInitials] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(6.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: scenetime,\r\n };\r\n console.log(data);\r\n updateData(data);\r\n }\r\n function setActiveFontFamily(fontfamily) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setTitleactive(fontfamily);\r\n if (fontfamily) {\r\n setTexAreatextColor(titletextColor);\r\n setFontfamilySet(titleFontFamily);\r\n } else {\r\n setFontfamilySet(fontFamily);\r\n setTexAreatextColor(textColor);\r\n }\r\n }\r\n function getFontfamily(fontfamily) {\r\n setFontfamilySet(fontfamily);\r\n if (titleactive) {\r\n setTitleFontFamily(fontfamily);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: fontfamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n console.log(data);\r\n updateData(data);\r\n } else {\r\n setFontFamily(fontfamily);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n console.log(data);\r\n updateData(data);\r\n }\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontweightSet(fontweight);\r\n if (titleactive) {\r\n setTitleFontWeight(fontweight);\r\n\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: fontweight,\r\n time: time,\r\n };\r\n updateData(data);\r\n } else {\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n if (titleactive) {\r\n setTitletextColor(color);\r\n setTexAreatextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: color,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n } else {\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n setTextColor(color);\r\n setTexAreatextColor(color);\r\n }\r\n }\r\n\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data, true);\r\n }\r\n\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n if (titleactive) {\r\n setTitletextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: size,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n } else {\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time:time,\r\n };\r\n\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n }\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setTitleactive(titleColor);\r\n setShowGlobal(false);\r\n setContainer(container);\r\n if (titleColor) {\r\n setTexAreatextColor(titletextColor);\r\n setFontfamilySet(titleFontFamily);\r\n } else {\r\n setFontfamilySet(titleFontFamily);\r\n setTexAreatextColor(fontFamily);\r\n }\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n }\r\n\r\n function showAddScene(mediaactive, scene) {\r\n // console.log(mediaactive);\r\n setShowGlobal(false);\r\n setAddScene(mediaactive);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n titleColor: titletextColor,\r\n textSize: textSize,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: newArr,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n titleColor: titletextColor,\r\n textSize: textSize,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: newArr,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 2) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTitletextColor(block.sceneData.titleColor);\r\n setTitletextSize(block.sceneData.titletextSize);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setFontWeight(block.sceneData.fontWeight);\r\n if (!setInitials) {\r\n setSetInitials(true);\r\n setFontfamilySet(block.sceneData.titleFontFamily);\r\n }\r\n // else{\r\n // setFontfamilySet(block.sceneData.fontFamily);\r\n // }\r\n setFontFamily(block.sceneData.fontFamily);\r\n setTitleFontWeight(block.sceneData.titleFontWeight);\r\n setTitleFontFamily(block.sceneData.titleFontFamily);\r\n // setFontfamilySet(block.sceneData.fontFamily);\r\n setFontweightSet(block.sceneData.fontWeight);\r\n setContent(block.sceneData.content);\r\n setTime(block.sceneData.time)\r\n setData(block.sceneData);\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" && content != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : showGlobal ? null : addMusic ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene2;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport left from \"./../../../../Assets/images/templates/left.png\";\r\nimport right from \"./../../../../Assets/images/templates/right.png\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\n\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneThree = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();\r\n const [processing, setProcessing] = React.useState(false);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container,textshows) {\r\n\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: false,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n swipe: false,\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n const settings2 = {\r\n dots: true,\r\n speed: 1500,\r\n autoplaySpeed: 3500,\r\n slidesToShow: 2,\r\n infinite: false,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n //setContent(props.data.content)\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n setContent(props.content);\r\n }, [props.content, props.fontFamily, props.data]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 78;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n\r\n
setshowbg(false, \"\", \"\", false, '10', true)}\r\n layout={layout}\r\n onLayoutChange={onLayoutChange}\r\n dragProps={{ disabled: true }}\r\n scale={1}\r\n >\r\n {layout.map((single) => {\r\n return (\r\n \r\n );\r\n })}\r\n \r\n {/* {textShow ? {78 - content.length}
: null} */}\r\n {textShow && content.length >= 58 ? = 78 ? \"char-counter left red\" : \"char-counter left\"}> {78 - content.length}
: null}\r\n \r\n
(slider1.current = slider)}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n backgroundImage: \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n
\r\n
(slider2.current = slider)}\r\n slidesToShow={2}\r\n swipeToSlide={true}\r\n focusOnSelect={true}\r\n {...settings2}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n {index == 0 ?\r\n
\r\n
\r\n
\r\n :
\r\n
\r\n
\r\n }\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\nexport default SceneThree;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"./../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"./../../TopSection/TopSection\";\r\nimport TextEditor from \"./../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"./../../ChangeBg\";\r\nimport SceneThree from \"./Scene3\";\r\nimport AddMedia from \"./../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"./../../BottomSection/BottomSection\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene3 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/3/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(5.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time:time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 3) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene3;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneFour from \"./Scene4\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nconst TemplateScene4 = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/4/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: time,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 4) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[1].fontSize\r\n );\r\n setFontFamily(\r\n block.sceneData.textArray[1].fontFamily\r\n );\r\n setFontWeight(\r\n block.sceneData.textArray[1].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[1].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene4;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\n\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneFive = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef(); const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container, textshows) {\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n setContent(props.data.content);\r\n }\r\n setContent(props.content);\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n }, [props.content]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 82;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n\r\n
setshowbg(false, \"\", \"\", false, '10', true)}\r\n layout={layout}\r\n onLayoutChange={onLayoutChange}\r\n dragProps={{ disabled: true }}\r\n scale={1}\r\n >\r\n {layout.map((single) => {\r\n return (\r\n setshowbg(false, \"\", \"\", false, '10', true)}\r\n onChange={getcontent}\r\n value={content}\r\n >\r\n );\r\n })}\r\n \r\n \r\n
\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\":\r\n \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n {textShow && content.length >= 62 ? = 82 ? \"char-counter red\" : \"char-counter\"}> {82 - content.length}
: null}\r\n \r\n );\r\n};\r\nexport default SceneFive;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneFive from \"./Scen5\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene5 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/5/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [time, setTime] = React.useState(5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n setShowGlobal(false);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowGlobal(false);\r\n setShowEditbutton(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 5) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n getData();\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n getData();\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene5;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\n\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneSix = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container, textshows) {\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n setContent(props.data.content);\r\n }\r\n setContent(props.content);\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n }, [props.content]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 137;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n {layout.map((single) => {\r\n return (\r\n setshowbg(false, \"\", \"\", false, '10', true)}\r\n key={single.key}\r\n style={{\r\n \"font-size\": props.settextSize + \"px\",\r\n color: props.setColor,\r\n \"line-height\": props.setTextLineHeight,\r\n fontFamily: props.data.fontFamily,\r\n fontWeight: props.data.fontWeight,\r\n }}\r\n className={\r\n \"child-container form-control editable-div size-auto \" +\r\n props.setAlignment +\r\n \" \" +\r\n props.setTextTransform\r\n }\r\n onChange={getcontent}\r\n value={content}\r\n >\r\n {content}\r\n \r\n );\r\n })}\r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return (\r\n
\r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n {textShow && content.length >= 117 ? = 137 ? \"char-counter red\" : \"char-counter\"}> {137 - content.length}
: null}\r\n \r\n );\r\n};\r\nexport default SceneSix;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneSix from \"./Scen6\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene6 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/6/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [time, setTime] = React.useState(5.5);\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n console.log(\"here\");\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n setShowGlobal(false);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowGlobal(false);\r\n setShowEditbutton(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 6) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n getData();\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n getData();\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene6;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\n\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneSeven = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container) {\r\n console.log(scene);\r\n props.showBg(option, type, scene, false, container);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n setContent(props.data.content);\r\n }\r\n setContent(props.content);\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n }, [props.content]);\r\n\r\n function getcontent(e) {\r\n console.log(\"here\");\r\n setContent(e.target.value);\r\n props.getContent(e.target.value);\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n
\r\n
\r\n {mediaArray.length > 0\r\n ? mediaArray.map((data, index) => {\r\n return index < 2 ? (\r\n
\r\n \r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n className=\"bg box-1\"\r\n // style={{\r\n // \"background-image\":\r\n // \"url(\" + apiPath + data.url + \") \",\r\n // }}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n >\r\n \r\n
\r\n ) : null;\r\n })\r\n : null}\r\n
\r\n
\r\n
\r\n {mediaArray.length > 0\r\n ? mediaArray.map((data, index) => {\r\n return index > 1 ? (\r\n
\r\n
\r\n setshowbg(\r\n true,\r\n data.url,\r\n data.type,\r\n false,\r\n index + 2\r\n )\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n // style={{\r\n // \"background-image\":\r\n // \"url(\" + apiPath + data.url + \") \",\r\n // }}\r\n >\r\n \r\n
\r\n ) : null;\r\n })\r\n : null}\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\nexport default SceneSeven;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneSeven from \"./Scen7\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene7 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/7/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [time, setTime] = React.useState(5.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n console.log(\"here\");\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n setShowGlobal(false);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowGlobal(false);\r\n setShowEditbutton(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 7) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n getData();\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n getData();\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene7;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport left from \"./../../../../Assets/images/templates/left.png\";\r\nimport right from \"./../../../../Assets/images/templates/right.png\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\n\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneEight = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef(); const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container, textshows) {\r\n console.log(textshows)\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: false,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n swipe: false,\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n const settings2 = {\r\n dots: true,\r\n speed: 1500,\r\n autoplaySpeed: 3500,\r\n slidesToShow: 2,\r\n infinite: false,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n //if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n setContent(props.content);\r\n // }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n }, [props.content, props.fontFamily, props.data]);\r\n\r\n function getcontent(e) {\r\n // setContent(e.target.value)\r\n // props.getContent(e.target.value)\r\n const maxlimit = 148;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n\r\n
setshowbg(false, \"\", \"\", false, true)}\r\n layout={layout}\r\n onLayoutChange={onLayoutChange}\r\n dragProps={{ disabled: false }}\r\n scale={1}\r\n >\r\n {layout.map((single) => {\r\n return (\r\n setshowbg(false, \"\", \"\", false, '10', true)}\r\n className={\r\n \"child-container form-control border size-auto \" +\r\n props.setAlignment +\r\n \" \" +\r\n props.setTextTransform\r\n }\r\n onChange={getcontent}\r\n value={content}\r\n >\r\n );\r\n })}\r\n \r\n {textShow && content.length >= 128 ? = 148 ? \"char-counter red\" : \"char-counter \"}> {148 - content.length}
: null}\r\n \r\n \r\n
(slider1.current = slider)}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n backgroundImage: \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n
\r\n
(slider2.current = slider)}\r\n slidesToShow={2}\r\n swipeToSlide={true}\r\n {...settings2}\r\n focusOnSelect={true}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n {index == 0 ?\r\n
\r\n
\r\n
\r\n :
\r\n
\r\n
\r\n }\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\nexport default SceneEight;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"./../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"./../../TopSection/TopSection\";\r\nimport TextEditor from \"./../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"./../../ChangeBg\";\r\nimport SceneEight from \"./Scene8\";\r\nimport AddMedia from \"./../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"./../../BottomSection/BottomSection\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene8 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/8/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [time, setTime] = React.useState(6);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setFontFamily(fontfamily);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setFontWeight(fontweight);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setTextAligmnet(alignment);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setContent(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n // console.log(texttransform);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setTextlineHeight(lineHeight);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n setShowGlobal(false);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 8) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene8;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneNine = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container) {\r\n console.log(scene);\r\n props.showBg(option, type, scene, false, container);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n setContent(props.data.content);\r\n }\r\n setContent(props.content);\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n }, [props.content]);\r\n\r\n function getcontent(e) {\r\n setContent(e.target.value);\r\n props.getContent(e.target.value);\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n
(slider1.current = slider)}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n backgroundImage: \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {/*
(slider2.current = slider)}\r\n slidesToShow={2}\r\n swipeToSlide={true}\r\n focusOnSelect={true}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\nexport default SceneNine;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneNine from \"./Scen9\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene9 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/9/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [time, setTime] = React.useState(5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n setShowGlobal(false);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowGlobal(false);\r\n setShowEditbutton(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 9) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n getData();\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n getData();\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene9;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneTen from \"./Scene10\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nconst TemplateScene10 = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/10/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 6,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 6,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 6,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 6,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 6,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 6,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: 6,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: 6,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: 6,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: 6,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 10) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[0].fontSize\r\n );\r\n setFontFamily(\r\n block.sceneData.textArray[0].fontFamily\r\n );\r\n setFontWeight(\r\n block.sceneData.textArray[0].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[0].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene10;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneEleven = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container,textshows) {\r\n \r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: false,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n swipe:false,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n const settings2 = {\r\n dots: true,\r\n speed: 1500,\r\n autoplaySpeed: 3500,\r\n slidesToShow: 2,\r\n infinite: false,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n \r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n }\r\n setContent(props.content);\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n }, [props.content]);\r\n\r\n function getcontent(e) {\r\n // setContent(e.target.value)\r\n // props.getContent(e.target.value)\r\n const maxlimit = 145;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n \r\n
setshowbg(false, \"\", \"\", false)}\r\n layout={layout}\r\n onLayoutChange={onLayoutChange}\r\n dragProps={{ disabled: false }}\r\n scale={1}\r\n >\r\n {layout.map((single) => {\r\n return (\r\n setshowbg(false, \"\", \"\", false, '10', true)}\r\n className={\r\n \"child-container form-control border size-auto \" +\r\n props.setAlignment +\r\n \" \" +\r\n props.setTextTransform\r\n }\r\n onChange={getcontent}\r\n value={content}\r\n >\r\n );\r\n })}\r\n \r\n \r\n
(slider1.current = slider)}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n backgroundImage: \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n
\r\n
(slider2.current = slider)}\r\n slidesToShow={2}\r\n swipeToSlide={true}\r\n focusOnSelect={true}\r\n {...settings2}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n {textShow && content.length >= 125 ? = 145 ? \"char-counter red\" : \"char-counter \"}> {145 - content.length}
: null}\r\n \r\n );\r\n};\r\nexport default SceneEleven;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"./../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"./../../TopSection/TopSection\";\r\nimport TextEditor from \"./../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"./../../ChangeBg\";\r\nimport SceneEleven from \"./Scene11\";\r\nimport AddMedia from \"./../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"./../../BottomSection/BottomSection\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene11 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/11/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [time, setTime] = React.useState(6);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setFontFamily(fontfamily);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setFontWeight(fontweight);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setTextAligmnet(alignment);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setContent(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n // console.log(texttransform);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setTextlineHeight(lineHeight);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n setShowGlobal(false);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 11) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n // console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene11;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\nimport axios from \"axios\";\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { apiPath, apieditVideos } from \"../../../../Utility/Utility\";\r\nimport { VideoEditor } from \"video-editor\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneTweleve = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/12/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [videoEdit, setVideoEdit] = React.useState({});\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const [editActive, setEditActive] = React.useState(false);\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [videoActive, setVideoActive] = React.useState(false);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container) {\r\n console.log(scene);\r\n props.showBg(option, type, scene, false, container);\r\n }\r\n\r\n const showEditor = () => {\r\n setEditActive(!editActive);\r\n };\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.mediaArray[\"0\"].type == \"video\") {\r\n setVideoActive(true);\r\n } else {\r\n setVideoActive(false);\r\n }\r\n if (props.data) {\r\n // console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n setContent(props.data.content);\r\n }\r\n setContent(props.content);\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n }\r\n }, [props.content]);\r\n\r\n function getcontent(e) {\r\n setContent(e.target.value);\r\n props.getContent(e.target.value);\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n // console.log(e);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n // console.log(imgUrl);\r\n if (imgUrl == \"\") {\r\n setVideoActive(true);\r\n imgUrl = e.dataTransfer.getData(\"video\");\r\n console.log(imgUrl);\r\n props.dropMedia(false, imgUrl, \"video\", 0);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"video\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n } else {\r\n //console.log(\"here\");\r\n setVideoActive(false);\r\n // console.log(imgUrl);\r\n props.dropMedia(false, imgUrl, \"img\", 0);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n }\r\n setDragoverId(0);\r\n };\r\n const updateVideo = (evt) => {\r\n console.log(evt);\r\n setVideoEdit(evt);\r\n };\r\n\r\n const saveVideo = () => {\r\n console.log(mediaArray[0].url);\r\n axios\r\n .post(`${apieditVideos}`, {\r\n path: mediaArray[0].url,\r\n userId: userId,\r\n sceneData: videoEdit,\r\n templateId: templateId,\r\n })\r\n .then(function (response) {\r\n // console.log(response.data.message);\r\n props.dropMedia(false, response.data.message, \"video\", 0);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[0] = {\r\n type: \"video\",\r\n url: response.data.message,\r\n };\r\n setMediaArray(newArr);\r\n });\r\n };\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n {mediaArray.map((data, index) => {\r\n //console.log(data);\r\n return (\r\n
\r\n {videoActive ? (\r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n // style={{\r\n // backgroundImage: \"url(\" + apiPath + data.url + \") \",\r\n // }}\r\n >\r\n {editActive ? (\r\n \r\n \r\n
\r\n ) : (\r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1 ? \"bg box-1 opacity\" : \"bg box-1 \"\r\n }\r\n style={{\r\n backgroundImage: \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n > \r\n
\r\n )}\r\n
\r\n );\r\n })}\r\n {videoActive ? (\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n ) : null}\r\n
\r\n );\r\n};\r\nexport default SceneTweleve;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneTweleve from \"./Scen12\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene12 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/12/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [time, setTime] = React.useState(5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n setShowGlobal(false);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowGlobal(false);\r\n setShowEditbutton(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 12) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n getData();\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n getData();\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene12;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport left from \"./../../../../Assets/images/templates/left.png\";\r\nimport right from \"./../../../../Assets/images/templates/right.png\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneThirteen = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [content, setContent] = React.useState([]);\r\n const [counter, setCounter] = React.useState(content.length);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef(); const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n function setshowbg(option, scene, type, titleColor, container) {\r\n props.showBg(option, type, scene, titleColor, container);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n dots: true,\r\n speed: 1500,\r\n autoplaySpeed: 3500,\r\n slidesToShow: 1,\r\n infinite: false,\r\n slidesToScroll: 1,\r\n swipe: false,\r\n autoplay: true,\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n dots: true,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n dots: true,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n dots: true,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n const settings2 = {\r\n dots: true,\r\n speed: 1500,\r\n autoplaySpeed: 3500,\r\n slidesToShow: 2,\r\n infinite: false,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n };\r\n const addSection = () => {\r\n setCounter(counter + 1);\r\n let newArr = [...content]; // copying the old datas array\r\n newArr[counter] = {\r\n title: \"Enter Title\",\r\n text: \"Enter Value\",\r\n };\r\n\r\n props.getContent(newArr);\r\n setContent(newArr);\r\n };\r\n const deleteSection = (e) => {\r\n setCounter(counter - 1);\r\n content.splice(e, 1);\r\n props.getContent(content);\r\n };\r\n\r\n const updateFieldChanged = (index) => (e) => {\r\n let newArr = [...content]; // copying the old datas array\r\n const maxlimit = 14;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n title: newArr[index].title,\r\n text: charc,\r\n };\r\n setContent(newArr);\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n title: newArr[index].title,\r\n text: e.target.value,\r\n };\r\n setContent(newArr);\r\n props.getContent(newArr);\r\n }\r\n };\r\n const updateTile = (index) => (e) => {\r\n // let newArr = [...content]; // copying the old datas array\r\n // newArr[index] = {\r\n // title: e.target.value,\r\n // text: newArr[index].text,\r\n // };\r\n // props.getContent(newArr);\r\n // setContent(newArr); // ??\r\n\r\n let newArr = [...content]; // copying the old datas array\r\n const maxlimit = 14;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n title: charc,\r\n text: newArr[index].text,\r\n };\r\n setContent(newArr);\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n title: e.target.value,\r\n text: newArr[index].text,\r\n };\r\n props.getContent(newArr);\r\n setContent(newArr);\r\n }\r\n };\r\n React.useEffect(() => {\r\n setContent(props.content);\r\n\r\n setMediaArray(props.mediaArray);\r\n setCounter(props.content.length);\r\n if (props.data) {\r\n setContent(props.content);\r\n setCounter(props.content.length);\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n }, [props.content, props.fontFamily, props.data]);\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n\r\n
\r\n
\r\n {typeof content != undefined && content.length\r\n ? content.map((data, index) => {\r\n return (\r\n
\r\n
\r\n {counter < 5 ? (\r\n
\r\n ) : null}\r\n {counter > 1 ? (\r\n
deleteSection(index)}\r\n />\r\n ) : null}\r\n \r\n
setsctiveFontFamily(true)}>\r\n \r\n
setsctiveFontFamily(false)}\r\n >\r\n \r\n
\r\n );\r\n })\r\n : null}\r\n
\r\n
(slider1.current = slider)}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n backgroundImage: \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n
\r\n
(slider2.current = slider)}\r\n slidesToShow={2}\r\n swipeToSlide={true}\r\n focusOnSelect={true}\r\n {...settings2}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n {index == 0 ?\r\n
\r\n
\r\n
\r\n :
\r\n
\r\n
\r\n }\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\nexport default SceneThirteen;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"./../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"./../../TopSection/TopSection\";\r\nimport TextEditor from \"./../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"./../../ChangeBg\";\r\nimport SceneThirteen from \"./Scene13\";\r\nimport AddMedia from \"./../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"./../../BottomSection/BottomSection\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apiUpdateBlock,\r\n apigetAdminTemplate,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene13 = (props) => {\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/13/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [content, setContent] = React.useState([]);\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-left\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [texAreatextColor, setTexAreatextColor] = React.useState(\"\");\r\n const [titletextColor, setTitletextColor] = React.useState(\"\");\r\n const [titletextSize, setTitletextSize] = React.useState(\"\");\r\n\r\n const [fontfamilySet, setFontfamilySet] = React.useState(\"\");\r\n const [fontweightSet, setFontweightSet] = React.useState(\"\");\r\n\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [titleactive, setTitleactive] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [titleFontFamily, setTitleFontFamily] = React.useState(\"\");\r\n const [titleFontWeight, setTitleFontWeight] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [setInitials, setSetInitials] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(6.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: fontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: scenetime,\r\n };\r\n console.log(data);\r\n updateData(data);\r\n }\r\n function setActiveFontFamily(fontfamily) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setTitleactive(fontfamily);\r\n if (fontfamily) {\r\n setTexAreatextColor(titletextColor);\r\n setFontfamilySet(titleFontFamily);\r\n } else {\r\n setFontfamilySet(fontFamily);\r\n setTexAreatextColor(textColor);\r\n }\r\n }\r\n function getFontfamily(fontfamily) {\r\n setFontfamilySet(fontfamily);\r\n if (titleactive) {\r\n setTitleFontFamily(fontfamily);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: fontfamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n console.log(data);\r\n updateData(data);\r\n } else {\r\n setFontFamily(fontfamily);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n console.log(data);\r\n updateData(data);\r\n }\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontweightSet(fontweight);\r\n if (titleactive) {\r\n setTitleFontWeight(fontweight);\r\n\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: fontweight,\r\n time: time,\r\n };\r\n updateData(data);\r\n } else {\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n if (titleactive) {\r\n setTitletextColor(color);\r\n setTexAreatextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: color,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n } else {\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n setTextColor(color);\r\n setTexAreatextColor(color);\r\n }\r\n }\r\n\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data, true);\r\n }\r\n\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n if (titleactive) {\r\n setTitletextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: size,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n } else {\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n }\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setTitleactive(titleColor);\r\n setShowGlobal(false);\r\n setContainer(container);\r\n if (titleColor) {\r\n setTexAreatextColor(titletextColor);\r\n setFontfamilySet(titleFontFamily);\r\n } else {\r\n setFontfamilySet(titleFontFamily);\r\n setTexAreatextColor(fontFamily);\r\n }\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n }\r\n\r\n function showAddScene(mediaactive, scene) {\r\n // console.log(mediaactive);\r\n setShowGlobal(false);\r\n setAddScene(mediaactive);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n titleColor: titletextColor,\r\n textSize: textSize,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: newArr,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n titleColor: titletextColor,\r\n textSize: textSize,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: newArr,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 13) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTitletextColor(block.sceneData.titleColor);\r\n setTitletextSize(block.sceneData.titletextSize);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setFontWeight(block.sceneData.fontWeight);\r\n if (!setInitials) {\r\n setSetInitials(true);\r\n setFontfamilySet(block.sceneData.titleFontFamily);\r\n }\r\n // else{\r\n // setFontfamilySet(block.sceneData.fontFamily);\r\n // }\r\n setFontFamily(block.sceneData.fontFamily);\r\n setTitleFontWeight(block.sceneData.titleFontWeight);\r\n setTitleFontFamily(block.sceneData.titleFontFamily);\r\n // setFontfamilySet(block.sceneData.fontFamily);\r\n setFontweightSet(block.sceneData.fontWeight);\r\n setContent(block.sceneData.content);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n // getData();\r\n reFetchData(true)\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" && content != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : showGlobal ? null : addMusic ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene13;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneFourteen = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef(); const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container, textshows) {\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n setContent(props.data.content);\r\n }\r\n setContent(props.content);\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n }, [props.content]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 52;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n\r\n
\r\n {layout.map((single) => {\r\n return (\r\n setshowbg(false, \"\", \"\", false, '10', true)}\r\n key={single.key}\r\n style={{\r\n \"font-size\": props.settextSize + \"px\",\r\n color: props.setColor,\r\n \"line-height\": props.setTextLineHeight,\r\n fontFamily: props.data.fontFamily,\r\n fontWeight: props.data.fontWeight,\r\n }}\r\n className={\r\n \"child-container form-control editable-div size-auto \" +\r\n props.setAlignment +\r\n \" \" +\r\n props.setTextTransform\r\n }\r\n onChange={getcontent}\r\n value={content}\r\n >\r\n {content}\r\n \r\n );\r\n })}\r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return (\r\n
\r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n {/* {textShow ? 52 / {52 - content.length}
: null} */}\r\n {textShow && content.length >= 32 ? = 52 ? \"char-counter red\" : \"char-counter \"}> {52 - content.length}
: null}\r\n \r\n );\r\n};\r\nexport default SceneFourteen;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneFourteen from \"./Scen14\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene14 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/14/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [time, setTime] = React.useState(5.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n console.log(\"here\");\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n setShowGlobal(false);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowGlobal(false);\r\n setShowEditbutton(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 14) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n getData();\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n getData();\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene14;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\nimport left from \"./../../../../Assets/images/templates/left.png\";\r\nimport right from \"./../../../../Assets/images/templates/right.png\";\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneFifteen = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n const slidePre = (index) => {\r\n console.log(index)\r\n console.log('index');\r\n slider1.current.slickGoTo(index);\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container) {\r\n props.showBg(option, type, scene, false, container);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: false,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n const settings2 = {\r\n dots: true,\r\n speed: 1500,\r\n autoplaySpeed: 3500,\r\n slidesToShow: 2,\r\n infinite: false,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n //setContent(props.data.content)\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n setContent(props.content);\r\n }, [props.content, props.fontFamily, props.data]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 80;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n
(slider1.current = slider)}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n backgroundImage: \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
(slider2.current = slider)}\r\n slidesToShow={4}\r\n swipeToSlide={true}\r\n focusOnSelect={true}\r\n {...settings2}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n slidePre(index)}>\r\n
\r\n {index == 0 ?\r\n
\r\n
\r\n
\r\n :
\r\n
\r\n
\r\n }\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\nexport default SceneFifteen;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneFifteen from \"./Scene15\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene15 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/15/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(6.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: 6,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: 6,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: 6,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: 6,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: 6,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: 6,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: 6,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: 6,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: 6,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: 6,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 15) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: 6,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene15;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneSixteen = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container, textshows) {\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n //setContent(props.data.content)\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n setContent(props.content);\r\n }, [props.content, props.fontFamily, props.data]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 72;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n
\r\n
setshowbg(false, \"\", \"\", false, '10', true)}\r\n layout={layout}\r\n onLayoutChange={onLayoutChange}\r\n dragProps={{ disabled: false }}\r\n scale={1}\r\n >\r\n {layout.map((single) => {\r\n return (\r\n setshowbg(false, \"\", \"\", false, '10', true)}\r\n className={\r\n \"child-container form-control border size-auto \" +\r\n props.setAlignment +\r\n \" \" +\r\n props.setTextTransform\r\n }\r\n onChange={getcontent}\r\n value={content}\r\n >\r\n );\r\n })}\r\n \r\n \r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className=\"bg box-1\"\r\n style={{\r\n \"background-image\":\r\n \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n ) : null;\r\n })}\r\n \r\n
\r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 1 ? (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className=\"bg box-1\"\r\n style={{\r\n \"background-image\":\r\n \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n {/* {textShow ? {72 - content.length}
: null} */}\r\n {textShow && content.length >= 52 ? = 72 ? \"char-counter red\" : \"char-counter \"}> {72 - content.length}
: null}\r\n \r\n );\r\n};\r\nexport default SceneSixteen;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"./../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"./../../TopSection/TopSection\";\r\nimport TextEditor from \"./../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"./../../ChangeBg\";\r\nimport SceneSixteen from \"./Scene16\";\r\nimport AddMedia from \"./../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"./../../BottomSection/BottomSection\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene16 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/16/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 16) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene16;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneSevenTeen = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container, textshows) {\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n //setContent(props.data.content)\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n setContent(props.content);\r\n }, [props.content, props.fontFamily, props.data]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 100;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n
\r\n
setshowbg(false, \"\", \"\", false, '10', true)}\r\n layout={layout}\r\n onLayoutChange={onLayoutChange}\r\n dragProps={{ disabled: false }}\r\n scale={1}\r\n >\r\n {layout.map((single) => {\r\n return (\r\n setshowbg(false, \"\", \"\", false, '10', true)}\r\n className={\r\n \"child-container form-control border size-auto \" +\r\n props.setAlignment +\r\n \" \" +\r\n props.setTextTransform\r\n }\r\n onChange={getcontent}\r\n value={content}\r\n >\r\n );\r\n })}\r\n \r\n \r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\":\r\n \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n ) : null;\r\n })}\r\n \r\n
\r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 1 ? (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\":\r\n \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n {/* {textShow ? {100 - content.length}
: null} */}\r\n {textShow && content.length >= 80 ? = 100 ? \"char-counter red\" : \"char-counter \"}> {100 - content.length}
: null}\r\n \r\n );\r\n};\r\nexport default SceneSevenTeen;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"./../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"./../../TopSection/TopSection\";\r\nimport TextEditor from \"./../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"./../../ChangeBg\";\r\nimport SceneSevenTeen from \"./Scene17\";\r\nimport AddMedia from \"./../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"./../../BottomSection/BottomSection\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene17 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/17/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 17) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n // console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene17;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport left from \"./../../../../Assets/images/templates/left.png\";\r\nimport right from \"./../../../../Assets/images/templates/right.png\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneEighteen = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [content, setContent] = React.useState([]);\r\n const [counter, setCounter] = React.useState(content.length);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n function setshowbg(option, scene, type, titleColor, container) {\r\n props.showBg(option, type, scene, titleColor, container);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n dots: true,\r\n speed: 1500,\r\n autoplaySpeed: 3500,\r\n slidesToShow: 1,\r\n infinite: false,\r\n swipe: false,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n dots: true,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n dots: true,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n dots: true,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n const settings2 = {\r\n dots: true,\r\n speed: 1500,\r\n autoplaySpeed: 3500,\r\n slidesToShow: 2,\r\n infinite: false,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n };\r\n const addSection = () => {\r\n setCounter(counter + 1);\r\n let newArr = [...content]; // copying the old datas array\r\n newArr[counter] = {\r\n title: \"Enter Title\",\r\n text: \"Enter Value\",\r\n };\r\n\r\n props.getContent(newArr);\r\n setContent(newArr);\r\n };\r\n const deleteSection = (e) => {\r\n setCounter(counter - 1);\r\n content.splice(e, 1);\r\n props.getContent(content);\r\n };\r\n\r\n const updateFieldChanged = (index) => (e) => {\r\n let newArr = [...content]; // copying the old datas array\r\n const maxlimit = 14;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n title: newArr[index].title,\r\n text: charc,\r\n };\r\n setContent(newArr);\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n title: newArr[index].title,\r\n text: e.target.value,\r\n };\r\n setContent(newArr);\r\n props.getContent(newArr);\r\n }\r\n };\r\n const updateTile = (index) => (e) => {\r\n // let newArr = [...content]; // copying the old datas array\r\n // newArr[index] = {\r\n // title: e.target.value,\r\n // text: newArr[index].text,\r\n // };\r\n // props.getContent(newArr);\r\n // setContent(newArr); // ??\r\n\r\n let newArr = [...content]; // copying the old datas array\r\n const maxlimit = 14;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n title: charc,\r\n text: newArr[index].text,\r\n };\r\n setContent(newArr);\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n title: e.target.value,\r\n text: newArr[index].text,\r\n };\r\n props.getContent(newArr);\r\n setContent(newArr);\r\n }\r\n };\r\n React.useEffect(() => {\r\n setContent(props.content);\r\n\r\n setMediaArray(props.mediaArray);\r\n setCounter(props.content.length);\r\n if (props.data) {\r\n setContent(props.content);\r\n setCounter(props.content.length);\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n }, [props.content, props.fontFamily, props.data]);\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n {typeof content != undefined && content.length\r\n ? content.map((data, index) => {\r\n return (\r\n
\r\n
\r\n {counter < 5 ? (\r\n
\r\n ) : null}\r\n {counter > 1 ? (\r\n
deleteSection(index)}\r\n />\r\n ) : null}\r\n \r\n
setsctiveFontFamily(true)}>\r\n \r\n
setsctiveFontFamily(false)}\r\n >\r\n \r\n
\r\n );\r\n })\r\n : null}\r\n
\r\n
\r\n
(slider1.current = slider)}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n backgroundImage: \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
(slider2.current = slider)}\r\n slidesToShow={2}\r\n swipeToSlide={true}\r\n focusOnSelect={true}\r\n {...settings2}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n {index == 0 ?\r\n
\r\n
\r\n
\r\n :
\r\n
\r\n
\r\n }\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\nexport default SceneEighteen;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"./../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"./../../TopSection/TopSection\";\r\nimport TextEditor from \"./../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"./../../ChangeBg\";\r\nimport SceneEighteen from \"./Scene18\";\r\nimport AddMedia from \"./../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"./../../BottomSection/BottomSection\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apiUpdateBlock,\r\n apigetAdminTemplate,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene18 = (props) => {\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/18/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [content, setContent] = React.useState([]);\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-left\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [texAreatextColor, setTexAreatextColor] = React.useState(\"\");\r\n const [titletextColor, setTitletextColor] = React.useState(\"\");\r\n const [titletextSize, setTitletextSize] = React.useState(\"\");\r\n\r\n const [fontfamilySet, setFontfamilySet] = React.useState(\"\");\r\n const [fontweightSet, setFontweightSet] = React.useState(\"\");\r\n\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [titleactive, setTitleactive] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [titleFontFamily, setTitleFontFamily] = React.useState(\"\");\r\n const [titleFontWeight, setTitleFontWeight] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [setInitials, setSetInitials] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(6.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: scenetime,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function setActiveFontFamily(fontfamily) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setTitleactive(fontfamily);\r\n if (fontfamily) {\r\n setTexAreatextColor(titletextColor);\r\n setFontfamilySet(titleFontFamily);\r\n } else {\r\n setFontfamilySet(fontFamily);\r\n setTexAreatextColor(textColor);\r\n }\r\n }\r\n function getFontfamily(fontfamily) {\r\n setFontfamilySet(fontfamily);\r\n if (titleactive) {\r\n setTitleFontFamily(fontfamily);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: fontfamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n console.log(data);\r\n updateData(data);\r\n } else {\r\n setFontFamily(fontfamily);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n console.log(data);\r\n updateData(data);\r\n }\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontweightSet(fontweight);\r\n if (titleactive) {\r\n setTitleFontWeight(fontweight);\r\n\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: fontweight,\r\n time: time,\r\n };\r\n updateData(data);\r\n } else {\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n if (titleactive) {\r\n setTitletextColor(color);\r\n setTexAreatextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: color,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n } else {\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n setTextColor(color);\r\n setTexAreatextColor(color);\r\n }\r\n }\r\n\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n if (titleactive) {\r\n setTitletextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: size,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n } else {\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n }\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setTitleactive(titleColor);\r\n setShowGlobal(false);\r\n setContainer(container);\r\n if (titleColor) {\r\n setTexAreatextColor(titletextColor);\r\n setFontfamilySet(titleFontFamily);\r\n } else {\r\n setFontfamilySet(titleFontFamily);\r\n setTexAreatextColor(fontFamily);\r\n }\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n }\r\n\r\n function showAddScene(mediaactive, scene) {\r\n // console.log(mediaactive);\r\n setShowGlobal(false);\r\n setAddScene(mediaactive);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n titleColor: titletextColor,\r\n textSize: textSize,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: newArr,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n titleColor: titletextColor,\r\n textSize: textSize,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: newArr,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 18) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTitletextColor(block.sceneData.titleColor);\r\n setTitletextSize(block.sceneData.titletextSize);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setFontWeight(block.sceneData.fontWeight);\r\n if (!setInitials) {\r\n setSetInitials(true);\r\n setFontfamilySet(block.sceneData.titleFontFamily);\r\n }\r\n // else{\r\n // setFontfamilySet(block.sceneData.fontFamily);\r\n // }\r\n setFontFamily(block.sceneData.fontFamily);\r\n setTitleFontWeight(block.sceneData.titleFontWeight);\r\n setTitleFontFamily(block.sceneData.titleFontFamily);\r\n // setFontfamilySet(block.sceneData.fontFamily);\r\n setFontweightSet(block.sceneData.fontWeight);\r\n setContent(block.sceneData.content);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n // getData();\r\n reFetchData(true)\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" && content != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : showGlobal ? null : addMusic ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene18;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\nimport left from \"./../../../../Assets/images/templates/left.png\";\r\nimport right from \"./../../../../Assets/images/templates/right.png\";\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneNineTeen = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef(); const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container, textshows) {\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n const settings2 = {\r\n dots: true,\r\n speed: 1500,\r\n autoplaySpeed: 3500,\r\n slidesToShow: 2,\r\n infinite: false,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n //setContent(props.data.content)\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n setContent(props.content);\r\n }, [props.content, props.fontFamily, props.data]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 80;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n
\r\n
\r\n {layout.map((single) => {\r\n return (\r\n setshowbg(false, \"\", \"\", false, '10', true)}\r\n className={\r\n \"child-container form-control border size-auto \" +\r\n props.setAlignment +\r\n \" \" +\r\n props.setTextTransform\r\n }\r\n onChange={getcontent}\r\n value={content}\r\n >\r\n );\r\n })}\r\n
\r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\":\r\n \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n
\r\n );\r\n })}\r\n \r\n
\r\n
\r\n
(slider2.current = slider)}\r\n slidesToShow={2}\r\n swipeToSlide={true}\r\n focusOnSelect={true}\r\n {...settings2}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n {index == 0 ?\r\n
\r\n
\r\n
\r\n :
\r\n
\r\n
\r\n }\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n {textShow && content.length >= 60 ? = 80 ? \"char-counter red\" : \"char-counter \"}> {80 - content.length}
: null}\r\n {/* {textShow ? {80 - content.length}
: null} */}\r\n \r\n );\r\n};\r\nexport default SceneNineTeen;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"./../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"./../../TopSection/TopSection\";\r\nimport TextEditor from \"./../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"./../../ChangeBg\";\r\nimport SceneNineTeen from \"./Scene19\";\r\nimport AddMedia from \"./../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"./../../BottomSection/BottomSection\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene19 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/19/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(6.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 19) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene19;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneTwenty = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container, textshows) {\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n //setContent(props.data.content)\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n setContent(props.content);\r\n }, [props.content, props.fontFamily, props.data]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 122;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n
\r\n
setshowbg(false, \"\", \"\", false, '10', true)}\r\n layout={layout}\r\n onLayoutChange={onLayoutChange}\r\n dragProps={{ disabled: false }}\r\n scale={1}\r\n >\r\n {layout.map((single) => {\r\n return (\r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\":\r\n \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n ) : null;\r\n })}\r\n \r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n {textShow && content.length >= 102 ? = 122 ? \"char-counter red\" : \"char-counter \"}> {122 - content.length}
: null}\r\n {/* {textShow ? {122 - content.length}
: null} */}\r\n \r\n );\r\n};\r\nexport default SceneTwenty;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"./../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"./../../TopSection/TopSection\";\r\nimport TextEditor from \"./../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"./../../ChangeBg\";\r\nimport SceneTwenty from \"./Scene20\";\r\nimport AddMedia from \"./../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"./../../BottomSection/BottomSection\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene20 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/20/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(4);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 20) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n if (!norefresh) {\r\n \r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene20;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { apiPath } from \"../../../../Utility/Utility\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneTwentyOne = (props) => {\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef(); const [processing, setProcessing] = React.useState(false);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container, textshows) {\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n //setContent(props.data.content)\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n setContent(props.content);\r\n }, [props.content, props.fontFamily, props.data]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 70;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n
\r\n
\r\n {layout.map((single) => {\r\n return (\r\n setshowbg(false, '', '', false, '', true)}\r\n className={\r\n \"child-container form-control border size-auto \" +\r\n props.setAlignment +\r\n \" \" +\r\n props.setTextTransform\r\n }\r\n onChange={getcontent}\r\n value={content}\r\n >\r\n );\r\n })}\r\n
\r\n
\r\n\r\n
\r\n
= 70 ? \"char-counter red\" : \"char-counter \"}> {70 - content.length}
: null}\r\n\r\n \r\n );\r\n};\r\nexport default SceneTwentyOne;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"./../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"./../../TopSection/TopSection\";\r\nimport TextEditor from \"./../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"./../../ChangeBg\";\r\nimport SceneTwentyOne from \"./Scene21\";\r\nimport AddMedia from \"./../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"./../../BottomSection/BottomSection\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene21 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/21/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(4.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 21) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene21;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport left from \"./../../../../Assets/images/templates/left.png\";\r\nimport right from \"./../../../../Assets/images/templates/right.png\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\n\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneTwentyTwo = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [content, setContent] = React.useState([]);\r\n const [counter, setCounter] = React.useState(content.length);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef(); const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n function setshowbg(option, scene, type, titleColor, container) {\r\n props.showBg(option, type, scene, titleColor, container);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n dots: true,\r\n speed: 1500,\r\n autoplaySpeed: 3500,\r\n slidesToShow: 1,\r\n infinite: false,\r\n slidesToScroll: 1,\r\n swipe: false,\r\n autoplay: true,\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n dots: true,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n dots: true,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n dots: true,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n const settings2 = {\r\n dots: true,\r\n speed: 1500,\r\n autoplaySpeed: 3500,\r\n slidesToShow: 2,\r\n infinite: false,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n\r\n };\r\n const addSection = () => {\r\n setCounter(counter + 1);\r\n let newArr = [...content]; // copying the old datas array\r\n newArr[counter] = {\r\n title: \"Enter Title\",\r\n text: \"Enter Value\",\r\n };\r\n\r\n props.getContent(newArr);\r\n setContent(newArr);\r\n };\r\n const deleteSection = (e) => {\r\n setCounter(counter - 1);\r\n content.splice(e, 1);\r\n props.getContent(content);\r\n };\r\n\r\n const updateFieldChanged = (index) => (e) => {\r\n let newArr = [...content]; // copying the old datas array\r\n const maxlimit = 14;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n title: newArr[index].title,\r\n text: charc,\r\n };\r\n setContent(newArr);\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n title: newArr[index].title,\r\n text: e.target.value,\r\n };\r\n setContent(newArr);\r\n props.getContent(newArr);\r\n }\r\n };\r\n const updateTile = (index) => (e) => {\r\n // let newArr = [...content]; // copying the old datas array\r\n // newArr[index] = {\r\n // title: e.target.value,\r\n // text: newArr[index].text,\r\n // };\r\n // props.getContent(newArr);\r\n // setContent(newArr); // ??\r\n\r\n let newArr = [...content]; // copying the old datas array\r\n const maxlimit = 14;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n title: charc,\r\n text: newArr[index].text,\r\n };\r\n setContent(newArr);\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n title: e.target.value,\r\n text: newArr[index].text,\r\n };\r\n props.getContent(newArr);\r\n setContent(newArr);\r\n }\r\n };\r\n React.useEffect(() => {\r\n setContent(props.content);\r\n\r\n setMediaArray(props.mediaArray);\r\n setCounter(props.content.length);\r\n if (props.data) {\r\n setContent(props.content);\r\n setCounter(props.content.length);\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n }, [props.content, props.fontFamily, props.data]);\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n\r\n
\r\n
\r\n {typeof content != undefined && content.length\r\n ? content.map((data, index) => {\r\n return (\r\n
\r\n
\r\n {counter < 5 ? (\r\n
\r\n ) : null}\r\n {counter > 1 ? (\r\n
deleteSection(index)}\r\n />\r\n ) : null}\r\n \r\n
setsctiveFontFamily(true)}>\r\n \r\n
setsctiveFontFamily(false)}\r\n >\r\n \r\n
\r\n );\r\n })\r\n : null}\r\n
\r\n
\r\n
(slider1.current = slider)}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n backgroundImage: \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
(slider2.current = slider)}\r\n slidesToShow={2}\r\n {...settings2}\r\n swipeToSlide={true}\r\n focusOnSelect={true}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n {index == 0 ?\r\n
\r\n
\r\n
\r\n :
\r\n
\r\n
\r\n }\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\nexport default SceneTwentyTwo;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneTwentyTwo from \"./Scene22\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apiUpdateBlock,\r\n apigetAdminTemplate,\r\n} from \"../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene22 = (props) => {\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/22/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [content, setContent] = React.useState([]);\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-left\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textSize, setTextSize] = React.useState(\"22\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [texAreatextColor, setTexAreatextColor] = React.useState(\"\");\r\n const [titletextColor, setTitletextColor] = React.useState(\"\");\r\n const [titletextSize, setTitletextSize] = React.useState(\"\");\r\n\r\n const [fontfamilySet, setFontfamilySet] = React.useState(\"\");\r\n const [fontweightSet, setFontweightSet] = React.useState(\"\");\r\n\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [titleactive, setTitleactive] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [titleFontFamily, setTitleFontFamily] = React.useState(\"\");\r\n const [titleFontWeight, setTitleFontWeight] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [setInitials, setSetInitials] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(6.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: fontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: scenetime,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function setActiveFontFamily(fontfamily) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setTitleactive(fontfamily);\r\n if (fontfamily) {\r\n setTexAreatextColor(titletextColor);\r\n setFontfamilySet(titleFontFamily);\r\n } else {\r\n setFontfamilySet(fontFamily);\r\n setTexAreatextColor(textColor);\r\n }\r\n }\r\n function getFontfamily(fontfamily) {\r\n setFontfamilySet(fontfamily);\r\n if (titleactive) {\r\n setTitleFontFamily(fontfamily);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: fontfamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n console.log(data);\r\n updateData(data);\r\n } else {\r\n setFontFamily(fontfamily);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n console.log(data);\r\n updateData(data);\r\n }\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontweightSet(fontweight);\r\n if (titleactive) {\r\n setTitleFontWeight(fontweight);\r\n\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: fontweight,\r\n time: time,\r\n };\r\n updateData(data);\r\n } else {\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n if (titleactive) {\r\n setTitletextColor(color);\r\n setTexAreatextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: color,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n } else {\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n setTextColor(color);\r\n setTexAreatextColor(color);\r\n }\r\n }\r\n\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n if (titleactive) {\r\n setTitletextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: size,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n } else {\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n }\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setTitleactive(titleColor);\r\n setShowGlobal(false);\r\n setContainer(container);\r\n if (titleColor) {\r\n setTexAreatextColor(titletextColor);\r\n setFontfamilySet(titleFontFamily);\r\n } else {\r\n setFontfamilySet(titleFontFamily);\r\n setTexAreatextColor(fontFamily);\r\n }\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n }\r\n\r\n function showAddScene(mediaactive, scene) {\r\n // console.log(mediaactive);\r\n setShowGlobal(false);\r\n setAddScene(mediaactive);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n titleColor: titletextColor,\r\n textSize: textSize,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: newArr,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n titleColor: titletextColor,\r\n textSize: textSize,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: newArr,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 22) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTitletextColor(block.sceneData.titleColor);\r\n setTitletextSize(block.sceneData.titletextSize);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setFontWeight(block.sceneData.fontWeight);\r\n if (!setInitials) {\r\n setSetInitials(true);\r\n setFontfamilySet(block.sceneData.titleFontFamily);\r\n }\r\n // else{\r\n // setFontfamilySet(block.sceneData.fontFamily);\r\n // }\r\n setFontFamily(block.sceneData.fontFamily);\r\n setTitleFontWeight(block.sceneData.titleFontWeight);\r\n setTitleFontFamily(block.sceneData.titleFontFamily);\r\n // setFontfamilySet(block.sceneData.fontFamily);\r\n setFontweightSet(block.sceneData.fontWeight);\r\n setContent(block.sceneData.content);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n // getData();\r\n reFetchData(true)\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" && content != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : showGlobal ? null : addMusic ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene22;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { apiPath } from \"../../../../Utility/Utility\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneTwentyThree = (props) => {\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container, textshows) {\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n //setContent(props.data.content)\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n setContent(props.content);\r\n }, [props.content, props.fontFamily, props.data]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 175;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n
\r\n
\r\n {layout.map((single) => {\r\n return (\r\n setshowbg(false, '', '', false, \"\", true)}\r\n className={\r\n \"child-container form-control border size-auto \" +\r\n props.setAlignment +\r\n \" \" +\r\n props.setTextTransform\r\n }\r\n onChange={getcontent}\r\n value={content}\r\n >\r\n );\r\n })}\r\n
\r\n
\r\n
\r\n
= 175 ? \"char-counter red\" : \"char-counter \"}> {175 - content.length}
: null}\r\n \r\n \r\n );\r\n};\r\nexport default SceneTwentyThree;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneTwentyThree from \"./Scene23\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene23 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/23/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(4.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 23) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene23;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\n\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneTwentyFour = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container,textshows) {\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n \r\n props.showBg(option, type, scene, false, container);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n //setContent(props.data.content)\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n setContent(props.content);\r\n }, [props.content, props.fontFamily, props.data]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 68;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n
\r\n
setshowbg(false, \"\", \"\", false)}\r\n layout={layout}\r\n onLayoutChange={onLayoutChange}\r\n dragProps={{ disabled: false }}\r\n scale={1}\r\n >\r\n {layout.map((single) => {\r\n return (\r\n setshowbg(false, \"\", \"\", false, '10', true)}\r\n className={\r\n \"child-container form-control border size-auto here \"+\r\n props.setAlignment\r\n }\r\n onChange={getcontent}\r\n value={content}\r\n >\r\n );\r\n })}\r\n \r\n \r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\":\r\n \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n ) : null;\r\n })}\r\n \r\n
\r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 1 ? (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className=\"bg box-1\"\r\n style={{\r\n \"background-image\":\r\n \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n {textShow && content.length >= 48 ? = 68 ? \"char-counter red\" : \"char-counter \"}> {68 - content.length}
: null}\r\n {/* {textShow ? {68 - content.length}
: null} */}\r\n \r\n );\r\n};\r\nexport default SceneTwentyFour;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"./../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"./../../TopSection/TopSection\";\r\nimport TextEditor from \"./../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"./../../ChangeBg\";\r\nimport SceneTwentyFour from \"./Scene24\";\r\nimport AddMedia from \"./../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"./../../BottomSection/BottomSection\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene24 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/24/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n console.log(alignment)\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 24) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene24;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\n\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneTwentyFive = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container,textshows) {\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n \r\n props.showBg(option, type, scene, false, container);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n setContent(props.data.content);\r\n }\r\n setContent(props.content);\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n }, [props.content]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 138;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n {layout.map((single) => {\r\n return (\r\n setshowbg(false, \"\", \"\", false, \"\", true)}\r\n key={single.key}\r\n style={{\r\n \"font-size\": props.settextSize + \"px\",\r\n color: props.setColor,\r\n \"line-height\": props.setTextLineHeight,\r\n fontFamily: props.data.fontFamily,\r\n fontWeight: props.data.fontWeight,\r\n }}\r\n className={\r\n \"child-container form-control editable-div size-auto \" +\r\n \" \" +\r\n props.setAlignment\r\n }\r\n onChange={getcontent}\r\n value={content}\r\n >\r\n {content}\r\n \r\n );\r\n })}\r\n
\r\n \r\n
\r\n {mediaArray.map((data, index) => {\r\n return (\r\n
\r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n
\r\n
{138 - content.length}
: null} */}\r\n {textShow && content.length >= 118 ? = 138 ? \"char-counter red\" : \"char-counter \"}> {138 - content.length}
: null}\r\n \r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n \r\n\r\n );\r\n};\r\nexport default SceneTwentyFive;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneTwentyFive from \"./Scene25\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene25 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/25/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [time, setTime] = React.useState(5.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n console.log(\"here\");\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n setShowGlobal(false);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowGlobal(false);\r\n setShowEditbutton(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 25) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n getData();\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n getData();\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene25;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneTwentySix = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container,textshows) {\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n \r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n //setContent(props.data.content)\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n setContent(props.content);\r\n }, [props.content, props.fontFamily, props.data]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 70;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setDragoverId(0);\r\n setMediaArray(newArr);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n
\r\n
\r\n {layout.map((single) => {\r\n return (\r\n setshowbg(false, \"\", \"\", false, '10', true)}\r\n className={\r\n \"child-container form-control border size-auto \" +\r\n props.setAlignment +\r\n \" \" +\r\n props.setTextTransform\r\n }\r\n onChange={getcontent}\r\n value={content}\r\n >\r\n );\r\n })}\r\n
\r\n
\r\n
\r\n setshowbg(\r\n true,\r\n mediaArray[0].url,\r\n mediaArray[0].type,\r\n false,\r\n 0\r\n )\r\n }\r\n //src={apiPath + mediaArray[0].url}\r\n />\r\n handleDrag(e, 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 0)}\r\n onClick={() =>\r\n setshowbg(\r\n true,\r\n mediaArray[0].url,\r\n mediaArray[0].type,\r\n false,\r\n 0\r\n )\r\n }\r\n // src={apiPath + mediaArray[0].url}\r\n >\r\n {imgindex == 0 ? (\r\n \r\n
\r\n
setzoomToggle()}>\r\n Scale\r\n
\r\n
\r\n
filterBtnClick( mediaArray[0].url, 0)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage( mediaArray[0].url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n ) : null}\r\n
\r\n
\r\n setshowbg(\r\n true,\r\n mediaArray[0].url,\r\n mediaArray[0].type,\r\n false,\r\n 0\r\n )\r\n }\r\n // src={apiPath + mediaArray[0].url}\r\n />\r\n \r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n {textShow && content.length >= 50 ? = 70 ? \"char-counter red\" : \"char-counter \"}> {70 - content.length}
: null}\r\n \r\n );\r\n};\r\nexport default SceneTwentySix;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"./../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"./../../TopSection/TopSection\";\r\nimport TextEditor from \"./../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"./../../ChangeBg\";\r\nimport SceneTwentySix from \"./Scene26\";\r\nimport AddMedia from \"./../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"./../../BottomSection/BottomSection\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene26 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/26/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(6.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 26) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene26;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport left from \"./../../../../Assets/images/templates/left.png\";\r\nimport right from \"./../../../../Assets/images/templates/right.png\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneTwentySeven = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [content, setContent] = React.useState([]);\r\n const [counter, setCounter] = React.useState(content.length);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, container) {\r\n props.showBg(option, type, scene, titleColor, container);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n dots: true,\r\n speed: 1500,\r\n autoplaySpeed: 3500,\r\n slidesToShow: 1,\r\n infinite: false,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n swipe:false,\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n dots: true,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n dots: true,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n dots: true,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n const settings2 = {\r\n dots: true,\r\n speed: 1500,\r\n autoplaySpeed: 3500,\r\n slidesToShow: 2,\r\n infinite: false,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n \r\n };\r\n const addSection = () => {\r\n setCounter(counter + 1);\r\n let newArr = [...content]; // copying the old datas array\r\n newArr[counter] = {\r\n title: \"Enter Title\",\r\n text: \"Enter Value\",\r\n };\r\n\r\n props.getContent(newArr);\r\n setContent(newArr);\r\n };\r\n const deleteSection = (e) => {\r\n setCounter(counter - 1);\r\n content.splice(e, 1);\r\n props.getContent(content);\r\n };\r\n\r\n const updateFieldChanged = (index) => (e) => {\r\n let newArr = [...content]; // copying the old datas array\r\n const maxlimit = 14;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n title: newArr[index].title,\r\n text: charc,\r\n };\r\n setContent(newArr);\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n title: newArr[index].title,\r\n text: e.target.value,\r\n };\r\n setContent(newArr);\r\n props.getContent(newArr);\r\n }\r\n };\r\n const updateTile = (index) => (e) => {\r\n // let newArr = [...content]; // copying the old datas array\r\n // newArr[index] = {\r\n // title: e.target.value,\r\n // text: newArr[index].text,\r\n // };\r\n // props.getContent(newArr);\r\n // setContent(newArr); // ??\r\n\r\n let newArr = [...content]; // copying the old datas array\r\n const maxlimit = 14;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n title: charc,\r\n text: newArr[index].text,\r\n };\r\n setContent(newArr);\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n title: e.target.value,\r\n text: newArr[index].text,\r\n };\r\n props.getContent(newArr);\r\n setContent(newArr);\r\n }\r\n };\r\n React.useEffect(() => {\r\n setContent(props.content);\r\n\r\n setMediaArray(props.mediaArray);\r\n setCounter(props.content.length);\r\n if (props.data) {\r\n setContent(props.content);\r\n setCounter(props.content.length);\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n }, [props.content, props.fontFamily, props.data]);\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n {typeof content != undefined && content.length\r\n ? content.map((data, index) => {\r\n return (\r\n
\r\n
\r\n {counter < 5 ? (\r\n
\r\n ) : null}\r\n {counter > 1 ? (\r\n
deleteSection(index)}\r\n />\r\n ) : null}\r\n \r\n
setsctiveFontFamily(true)}>\r\n \r\n
setsctiveFontFamily(false)}\r\n >\r\n \r\n
\r\n );\r\n })\r\n : null}\r\n
\r\n
(slider1.current = slider)}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n backgroundImage: \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n
\r\n
(slider2.current = slider)}\r\n slidesToShow={2}\r\n swipeToSlide={true}\r\n focusOnSelect={true}\r\n {...settings2}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n {index == 0 ?\r\n
\r\n
\r\n
\r\n :
\r\n
\r\n
\r\n }\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\nexport default SceneTwentySeven;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"./../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"./../../TopSection/TopSection\";\r\nimport TextEditor from \"./../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"./../../ChangeBg\";\r\nimport SceneTwentySeven from \"./Scene27\";\r\nimport AddMedia from \"./../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"./../../BottomSection/BottomSection\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apiUpdateBlock,\r\n apigetAdminTemplate,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene27 = (props) => {\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/27/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [content, setContent] = React.useState([]);\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-left\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [texAreatextColor, setTexAreatextColor] = React.useState(\"\");\r\n const [titletextColor, setTitletextColor] = React.useState(\"\");\r\n const [titletextSize, setTitletextSize] = React.useState(\"\");\r\n\r\n const [fontfamilySet, setFontfamilySet] = React.useState(\"\");\r\n const [fontweightSet, setFontweightSet] = React.useState(\"\");\r\n\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [titleactive, setTitleactive] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [titleFontFamily, setTitleFontFamily] = React.useState(\"\");\r\n const [titleFontWeight, setTitleFontWeight] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [setInitials, setSetInitials] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(6.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: fontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: scenetime,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function setActiveFontFamily(fontfamily) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setTitleactive(fontfamily);\r\n if (fontfamily) {\r\n setTexAreatextColor(titletextColor);\r\n setFontfamilySet(titleFontFamily);\r\n } else {\r\n setFontfamilySet(fontFamily);\r\n setTexAreatextColor(textColor);\r\n }\r\n }\r\n function getFontfamily(fontfamily) {\r\n setFontfamilySet(fontfamily);\r\n if (titleactive) {\r\n setTitleFontFamily(fontfamily);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: fontfamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n console.log(data);\r\n updateData(data);\r\n } else {\r\n setFontFamily(fontfamily);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n console.log(data);\r\n updateData(data);\r\n }\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontweightSet(fontweight);\r\n if (titleactive) {\r\n setTitleFontWeight(fontweight);\r\n\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: fontweight,\r\n time: time,\r\n };\r\n updateData(data);\r\n } else {\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n if (titleactive) {\r\n setTitletextColor(color);\r\n setTexAreatextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: color,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n } else {\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n setTextColor(color);\r\n setTexAreatextColor(color);\r\n }\r\n }\r\n\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n if (titleactive) {\r\n setTitletextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: size,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n } else {\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n }\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setTitleactive(titleColor);\r\n setShowGlobal(false);\r\n setContainer(container);\r\n if (titleColor) {\r\n setTexAreatextColor(titletextColor);\r\n setFontfamilySet(titleFontFamily);\r\n } else {\r\n setFontfamilySet(titleFontFamily);\r\n setTexAreatextColor(fontFamily);\r\n }\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n }\r\n\r\n function showAddScene(mediaactive, scene) {\r\n // console.log(mediaactive);\r\n setShowGlobal(false);\r\n setAddScene(mediaactive);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n titleColor: titletextColor,\r\n textSize: textSize,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: newArr,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n titleColor: titletextColor,\r\n textSize: textSize,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: newArr,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 27) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTitletextColor(block.sceneData.titleColor);\r\n setTitletextSize(block.sceneData.titletextSize);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setFontWeight(block.sceneData.fontWeight);\r\n if (!setInitials) {\r\n setSetInitials(true);\r\n setFontfamilySet(block.sceneData.titleFontFamily);\r\n }\r\n // else{\r\n // setFontfamilySet(block.sceneData.fontFamily);\r\n // }\r\n setFontFamily(block.sceneData.fontFamily);\r\n setTitleFontWeight(block.sceneData.titleFontWeight);\r\n setTitleFontFamily(block.sceneData.titleFontFamily);\r\n // setFontfamilySet(block.sceneData.fontFamily);\r\n setFontweightSet(block.sceneData.fontWeight);\r\n setContent(block.sceneData.content);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n // getData();\r\n reFetchData(true)\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" && content != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : showGlobal ? null : addMusic ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene27;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneTwentyEight = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container, textshows) {\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n //setContent(props.data.content)\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n setContent(props.content);\r\n }, [props.content, props.fontFamily, props.data]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 110;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n setshowbg(\r\n true,\r\n mediaArray[0].url,\r\n mediaArray[0].type,\r\n false,\r\n 0\r\n )\r\n }\r\n //src={apiPath + mediaArray[0].url}\r\n />\r\n handleDrag(e, 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 0)}\r\n onClick={() =>\r\n setshowbg(\r\n true,\r\n mediaArray[0].url,\r\n mediaArray[0].type,\r\n false,\r\n 0\r\n )\r\n }\r\n // src={apiPath + mediaArray[0].url}\r\n >\r\n {imgindex == 0 ? (\r\n \r\n
\r\n
setzoomToggle()}>\r\n Scale\r\n
\r\n
\r\n
filterBtnClick(mediaArray[0].url, 0)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(mediaArray[0].url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n ) : null}\r\n
\r\n
\r\n setshowbg(\r\n true,\r\n mediaArray[0].url,\r\n mediaArray[0].type,\r\n false,\r\n 0\r\n )\r\n }\r\n // src={apiPath + mediaArray[0].url}\r\n />\r\n \r\n
\r\n {layout.map((single) => {\r\n return (\r\n setshowbg(false, \"\", \"\", false, '10', true)}\r\n className={\r\n \"child-container form-control border size-auto \" +\r\n props.setAlignment +\r\n \" \" +\r\n props.setTextTransform\r\n }\r\n onChange={getcontent}\r\n value={content}\r\n >\r\n );\r\n })}\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n {/* {textShow ? {110 - content.length}
: null} */}\r\n {textShow && content.length >= 90 ? = 110 ? \"char-counter red\" : \"char-counter \"}> {110 - content.length}
: null}\r\n\r\n \r\n );\r\n};\r\nexport default SceneTwentyEight;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneTwentyEight from \"./Scene28\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene28 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/28/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(6.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 28) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene28;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneTwentyNine = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n \r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container) {\r\n console.log(container);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n setContent(props.data.content);\r\n }\r\n setContent(props.content);\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n }, [props.content]);\r\n\r\n function getcontent(e) {\r\n console.log(\"here\");\r\n setContent(e.target.value);\r\n props.getContent(e.target.value);\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n
\r\n {mediaArray.length > 0\r\n ? mediaArray.map((data, index) => {\r\n return index < 2 ? (\r\n
\r\n \r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\":\r\n \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n >\r\n {/* \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n {mediaArray.length > 0\r\n ? mediaArray.map((data, index) => {\r\n return index > 1 ? (\r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index )\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 2)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 2\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\":\r\n \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\nexport default SceneTwentyNine;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneTwentyNine from \"./Scene29\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene29 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/29/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [time, setTime] = React.useState(5.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n console.log(\"here\")\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n setShowGlobal(false);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowGlobal(false);\r\n setShowEditbutton(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 29) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n getData();\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n getData();\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene29;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneThirty = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n \r\n const [textShow, setTextShow] = React.useState(false);\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container, textshows) {\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n //setContent(props.data.content)\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n setContent(props.content);\r\n }, [props.content, props.fontFamily, props.data]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 145;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n console.log(imgUrl);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n setshowbg(\r\n true,\r\n mediaArray[0].url,\r\n mediaArray[0].type,\r\n false,\r\n 0\r\n )\r\n }\r\n onDragEnter={(e) => handleDrag(e, 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 0)}\r\n className={\r\n dragoverId == 1\r\n ? \"imgone img-slide opacity\"\r\n : \"imgone img-slide\"\r\n }\r\n style={{\r\n backgroundImage: \"url(\" + apiPath + mediaArray[0].url + \") \",\r\n }}\r\n />\r\n \r\n setshowbg(\r\n true,\r\n mediaArray[0].url,\r\n mediaArray[0].type,\r\n false,\r\n 0\r\n )\r\n }\r\n onDragEnter={(e) => handleDrag(e, 2)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 0)}\r\n className={\r\n dragoverId == 2\r\n ? \"imgtwo img-slide opacity\"\r\n : \"imgtwo img-slide\"\r\n }\r\n style={{\r\n backgroundImage: \"url(\" + apiPath + mediaArray[0].url + \") \",\r\n }}\r\n >\r\n {imgindex == 0 ? (\r\n \r\n
\r\n
setzoomToggle()}>\r\n Scale\r\n
\r\n
\r\n
filterBtnClick(mediaArray[0].url, 0)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(mediaArray[0].url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n ) : null}\r\n
\r\n\r\n
\r\n setshowbg(\r\n true,\r\n mediaArray[0].url,\r\n mediaArray[0].type,\r\n false,\r\n 0\r\n )\r\n }\r\n onDragEnter={(e) => handleDrag(e, 3)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 0)}\r\n alt=\"imgmain\"\r\n className={\r\n dragoverId == 3\r\n ? \"imgthree img-slide opacity\"\r\n : \"imgthree img-slide \"\r\n }\r\n //src={apiPath + mediaArray[0].url}\r\n style={{\r\n backgroundImage: \"url(\" + apiPath + mediaArray[0].url + \") \",\r\n }}\r\n > \r\n
\r\n {layout.map((single) => {\r\n return (\r\n setshowbg(false, \"\", \"\", false, '10', true)}\r\n className={\r\n \"child-container form-control border size-auto \" +\r\n props.setAlignment +\r\n \" \" +\r\n props.setTextTransform\r\n }\r\n onChange={getcontent}\r\n value={content}\r\n >\r\n );\r\n })}\r\n
\r\n \r\n \r\n \r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n\r\n {textShow && content.length >= 125 ? = 145 ? \"char-counter red\" : \"char-counter \"}> {145 - content.length}
: null}\r\n \r\n );\r\n};\r\nexport default SceneThirty;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneThirty from \"./Scene30\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene30 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/30/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(5.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 30) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene30;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneThirtyone = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container, textshows) {\r\n setImageSrc(apiPath + scene);\r\n console.log(container)\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n //setContent(props.data.content)\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n setContent(props.content);\r\n }, [props.content, props.fontFamily, props.data]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 75;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n
\r\n
setshowbg(false, \"\", \"\", false, '10', true)}\r\n layout={layout}\r\n onLayoutChange={onLayoutChange}\r\n dragProps={{ disabled: false }}\r\n scale={1}\r\n >\r\n {layout.map((single) => {\r\n return (\r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\":\r\n \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n ) : null;\r\n })}\r\n \r\n
\r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 1 ? (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\":\r\n \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n {/* {textShow ? {65 - content.length}
: null} */}\r\n {textShow && content.length >= 55 ? = 75 ? \"char-counter red\" : \"char-counter \"}> {75 - content.length}
: null}\r\n \r\n \r\n );\r\n};\r\nexport default SceneThirtyone;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"./../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"./../../TopSection/TopSection\";\r\nimport TextEditor from \"./../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"./../../ChangeBg\";\r\nimport SceneThirtyone from \"./Scene31\";\r\nimport AddMedia from \"./../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"./../../BottomSection/BottomSection\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene31 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/31/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(4);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 31) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n {fontFamily ? \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene31;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneThirtyTwo = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef(); const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container, textshows) {\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n //setContent(props.data.content)\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n setContent(props.content);\r\n }, [props.content, props.fontFamily, props.data]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 80;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n
\r\n
\r\n {layout.map((single) => {\r\n return (\r\n setshowbg(false, \"\", \"\", false, '10', true)}\r\n className={\r\n \"child-container form-control border size-auto \" +\r\n props.setAlignment +\r\n \" \" +\r\n props.setTextTransform\r\n }\r\n onChange={getcontent}\r\n value={content}\r\n >\r\n );\r\n })}\r\n
\r\n\r\n
\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\":\r\n \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n {textShow && content.length >= 60 ? = 80 ? \"char-counter red\" : \"char-counter \"}> {80 - content.length}
: null}\r\n \r\n );\r\n};\r\nexport default SceneThirtyTwo;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"./../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"./../../TopSection/TopSection\";\r\nimport TextEditor from \"./../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"./../../ChangeBg\";\r\nimport SceneThirtyTwo from \"./Scene32\";\r\nimport AddMedia from \"./../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"./../../BottomSection/BottomSection\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene32 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/32/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(6.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n \r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n // console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 32) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n }\r\n else{\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n // console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene32;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport left from \"./../../../../Assets/images/templates/left.png\";\r\nimport right from \"./../../../../Assets/images/templates/right.png\";\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneThirtyThree = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [content, setContent] = React.useState([]);\r\n const [counter, setCounter] = React.useState(content.length);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();\r\n const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n function setshowbg(option, scene, type, titleColor, container) {\r\n props.showBg(option, type, scene, titleColor, container);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n dots: true,\r\n speed: 1500,\r\n autoplaySpeed: 3500,\r\n slidesToShow: 1,\r\n infinite: false,\r\n swipe: false,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n dots: true,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n dots: true,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n dots: true,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n const settings2 = {\r\n dots: true,\r\n speed: 1500,\r\n autoplaySpeed: 3500,\r\n slidesToShow: 2,\r\n infinite: false,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n\r\n };\r\n const addSection = () => {\r\n setCounter(counter + 1);\r\n let newArr = [...content]; // copying the old datas array\r\n newArr[counter] = {\r\n title: \"Enter Title\",\r\n text: \"Enter Value\",\r\n };\r\n\r\n props.getContent(newArr);\r\n setContent(newArr);\r\n };\r\n const deleteSection = (e) => {\r\n setCounter(counter - 1);\r\n content.splice(e, 1);\r\n props.getContent(content);\r\n };\r\n\r\n const updateFieldChanged = (index) => (e) => {\r\n let newArr = [...content]; // copying the old datas array\r\n const maxlimit = 14;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n title: newArr[index].title,\r\n text: charc,\r\n };\r\n setContent(newArr);\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n title: newArr[index].title,\r\n text: e.target.value,\r\n };\r\n setContent(newArr);\r\n props.getContent(newArr);\r\n }\r\n };\r\n const updateTile = (index) => (e) => {\r\n // let newArr = [...content]; // copying the old datas array\r\n // newArr[index] = {\r\n // title: e.target.value,\r\n // text: newArr[index].text,\r\n // };\r\n // props.getContent(newArr);\r\n // setContent(newArr); // ??\r\n\r\n let newArr = [...content]; // copying the old datas array\r\n const maxlimit = 14;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n title: charc,\r\n text: newArr[index].text,\r\n };\r\n setContent(newArr);\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n title: e.target.value,\r\n text: newArr[index].text,\r\n };\r\n props.getContent(newArr);\r\n setContent(newArr);\r\n }\r\n };\r\n React.useEffect(() => {\r\n setContent(props.content);\r\n\r\n setMediaArray(props.mediaArray);\r\n setCounter(props.content.length);\r\n if (props.data) {\r\n setContent(props.content);\r\n setCounter(props.content.length);\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n }, [props.content, props.fontFamily, props.data]);\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n\r\n
\r\n
\r\n {typeof content != undefined && content.length\r\n ? content.map((data, index) => {\r\n return (\r\n
\r\n
\r\n {counter < 5 ? (\r\n
\r\n ) : null}\r\n {counter > 1 ? (\r\n
deleteSection(index)}\r\n />\r\n ) : null}\r\n \r\n
setsctiveFontFamily(true)}>\r\n \r\n
setsctiveFontFamily(false)}\r\n >\r\n \r\n
\r\n );\r\n })\r\n : null}\r\n
\r\n
\r\n
(slider1.current = slider)}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n backgroundImage: \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
(slider2.current = slider)}\r\n slidesToShow={2}\r\n swipeToSlide={true}\r\n focusOnSelect={true}\r\n {...settings2}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n {index == 0 ?\r\n
\r\n
\r\n
\r\n :
\r\n
\r\n
\r\n }\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\nexport default SceneThirtyThree;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneThirtyThree from \"./Scene33\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apiUpdateBlock,\r\n apigetAdminTemplate,\r\n} from \"../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene33 = (props) => {\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/33/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [content, setContent] = React.useState([]);\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-left\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textSize, setTextSize] = React.useState(\"33\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [texAreatextColor, setTexAreatextColor] = React.useState(\"\");\r\n const [titletextColor, setTitletextColor] = React.useState(\"\");\r\n const [titletextSize, setTitletextSize] = React.useState(\"\");\r\n\r\n const [fontfamilySet, setFontfamilySet] = React.useState(\"\");\r\n const [fontweightSet, setFontweightSet] = React.useState(\"\");\r\n\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [titleactive, setTitleactive] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [titleFontFamily, setTitleFontFamily] = React.useState(\"\");\r\n const [titleFontWeight, setTitleFontWeight] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [setInitials, setSetInitials] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(6.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: fontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: scenetime,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function setActiveFontFamily(fontfamily) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setTitleactive(fontfamily);\r\n if (fontfamily) {\r\n setTexAreatextColor(titletextColor);\r\n setFontfamilySet(titleFontFamily);\r\n } else {\r\n setFontfamilySet(fontFamily);\r\n setTexAreatextColor(textColor);\r\n }\r\n }\r\n function getFontfamily(fontfamily) {\r\n setFontfamilySet(fontfamily);\r\n if (titleactive) {\r\n setTitleFontFamily(fontfamily);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: fontfamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n console.log(data);\r\n updateData(data);\r\n } else {\r\n setFontFamily(fontfamily);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n console.log(data);\r\n updateData(data);\r\n }\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontweightSet(fontweight);\r\n if (titleactive) {\r\n setTitleFontWeight(fontweight);\r\n\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: fontweight,\r\n time: time,\r\n };\r\n updateData(data);\r\n } else {\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n if (titleactive) {\r\n setTitletextColor(color);\r\n setTexAreatextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: color,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n } else {\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n setTextColor(color);\r\n setTexAreatextColor(color);\r\n }\r\n }\r\n\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n if (titleactive) {\r\n setTitletextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: size,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n } else {\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n }\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setTitleactive(titleColor);\r\n setShowGlobal(false);\r\n setContainer(container);\r\n if (titleColor) {\r\n setTexAreatextColor(titletextColor);\r\n setFontfamilySet(titleFontFamily);\r\n } else {\r\n setFontfamilySet(titleFontFamily);\r\n setTexAreatextColor(fontFamily);\r\n }\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n }\r\n\r\n function showAddScene(mediaactive, scene) {\r\n // console.log(mediaactive);\r\n setShowGlobal(false);\r\n setAddScene(mediaactive);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n titleColor: titletextColor,\r\n textSize: textSize,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: newArr,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n titleColor: titletextColor,\r\n textSize: textSize,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: newArr,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 33) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTitletextColor(block.sceneData.titleColor);\r\n setTitletextSize(block.sceneData.titletextSize);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setFontWeight(block.sceneData.fontWeight);\r\n if (!setInitials) {\r\n setSetInitials(true);\r\n setFontfamilySet(block.sceneData.titleFontFamily);\r\n }\r\n // else{\r\n // setFontfamilySet(block.sceneData.fontFamily);\r\n // }\r\n setFontFamily(block.sceneData.fontFamily);\r\n setTitleFontWeight(block.sceneData.titleFontWeight);\r\n setTitleFontFamily(block.sceneData.titleFontFamily);\r\n // setFontfamilySet(block.sceneData.fontFamily);\r\n setFontweightSet(block.sceneData.fontWeight);\r\n setContent(block.sceneData.content);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n // getData();\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" && content != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : showGlobal ? null : addMusic ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene33;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneThirtyFour = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const [textShow, setTextShow] = React.useState(false);\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container,textshows) {\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n //setContent(props.data.content)\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n setContent(props.content);\r\n }, [props.content, props.fontFamily, props.data]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 82;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n
\r\n
\r\n
handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 1)}\r\n onClick={() =>\r\n setshowbg(\r\n true,\r\n mediaArray[1].url,\r\n mediaArray[1].type,\r\n false,\r\n 1\r\n )\r\n }\r\n className=\"bg box-1\"\r\n style={{\r\n \"background-image\":\r\n \"url(\" + apiPath + mediaArray[1].url + \") \",\r\n }}\r\n >\r\n {imgindex == 1 ? (\r\n \r\n
\r\n
setzoomToggle()}>\r\n Scale\r\n
\r\n
\r\n
filterBtnClick(mediaArray[1].url, 1)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(mediaArray[1].url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n ) : null}\r\n
\r\n {layout.map((single) => {\r\n return (\r\n
setshowbg(false, \"\", \"\", false, '10', true)}\r\n className={\r\n \"child-container form-control border size-auto \" +\r\n props.setAlignment +\r\n \" \" +\r\n props.setTextTransform\r\n }\r\n onChange={getcontent}\r\n value={content}\r\n >\r\n );\r\n })}\r\n \r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n
\r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n {textShow && content.length >= 62 ? =82 ? \"char-counter red\" : \"char-counter \"}> {82 - content.length}
: null}\r\n {/* {textShow ? {82 - content.length}
: null} */}\r\n \r\n );\r\n};\r\nexport default SceneThirtyFour;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"./../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"./../../TopSection/TopSection\";\r\nimport TextEditor from \"./../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"./../../ChangeBg\";\r\nimport SceneThirtyFour from \"./Scene34\";\r\nimport AddMedia from \"./../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"./../../BottomSection/BottomSection\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene34 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/34/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(6.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 34) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene34;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneThirtyFive = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const [textShow, setTextShow] = React.useState(false);\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container, textshows) {\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n //setContent(props.data.content)\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n setContent(props.content);\r\n }, [props.content, props.fontFamily, props.data]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 82;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n
\r\n
\r\n
handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 1)}\r\n onClick={() =>\r\n setshowbg(\r\n true,\r\n mediaArray[1].url,\r\n mediaArray[1].type,\r\n false,\r\n 1\r\n )\r\n }\r\n className=\"bg box-1\"\r\n style={{\r\n \"background-image\":\r\n \"url(\" + apiPath + mediaArray[1].url + \") \",\r\n }}\r\n >\r\n {imgindex == 1 ? (\r\n \r\n
\r\n
setzoomToggle()}>\r\n Scale\r\n
\r\n
\r\n
filterBtnClick(mediaArray[1].url, 1)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(mediaArray[1].url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n ) : null}\r\n
\r\n {layout.map((single) => {\r\n return (\r\n
setshowbg(false, \"\", \"\", false, '10', true)}\r\n className={\r\n \"child-container form-control border size-auto \" +\r\n props.setAlignment +\r\n \" \" +\r\n props.setTextTransform\r\n }\r\n onChange={getcontent}\r\n value={content}\r\n >\r\n );\r\n })}\r\n \r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n
\r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n {textShow && content.length >= 62 ? = 82 ? \"char-counter red\" : \"char-counter \"}> {82 - content.length}
: null}\r\n {/* {textShow ? {82 - content.length}
: null} */}\r\n \r\n );\r\n};\r\nexport default SceneThirtyFive;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneThirtyFive from \"./Scene35\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene35 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/35/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(6.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 35) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene35;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneThirtySix = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container, textshows) {\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n //setContent(props.data.content)\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n setContent(props.content);\r\n }, [props.content, props.fontFamily, props.data]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 122;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n
\r\n
setshowbg(false, \"\", \"\", false, '10', true)}\r\n layout={layout}\r\n onLayoutChange={onLayoutChange}\r\n dragProps={{ disabled: false }}\r\n scale={1}\r\n >\r\n {layout.map((single) => {\r\n return (\r\n setshowbg(false, \"\", \"\", false, '10', true)}\r\n onChange={getcontent}\r\n value={content}\r\n >\r\n );\r\n })}\r\n \r\n \r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className=\"bg box-1\"\r\n style={{\r\n \"background-image\":\r\n \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n ) : null;\r\n })}\r\n \r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n {/* {textShow ? {122 - content.length}
: null} */}\r\n {textShow && content.length >= 102 ? = 122 ? \"char-counter red\" : \"char-counter \"}> {122 - content.length}
: null}\r\n \r\n );\r\n};\r\nexport default SceneThirtySix;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneThirtySix from \"./Scene36\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene36 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/36/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(5.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 36) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene36;\r\n","import React from \"react\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst Scene37 = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n\r\n\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n //console.log(props.content)\r\n\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n \r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n \r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n setProcessing(false);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { setProcessing(false);});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n // return {\r\n // top: isResize,\r\n // right: isResize,\r\n // bottom: isResize,\r\n // left: isResize,\r\n // topRight: isResize,\r\n // bottomRight: isResize,\r\n // bottomLeft: isResize,\r\n // topLeft: isResize,\r\n // };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container, textshows) {\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n\r\n React.useEffect(() => {\r\n setContent(props.content);\r\n // setMediaArray(props.mediaArray);\r\n // console.log(props.content);\r\n // console.log(\"props.content\");\r\n // if (props.data) {\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n //setContent(props.data.content);\r\n //}\r\n }, [props.content, props.fontFamily, props.data]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 70;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n props.dropMedia(false, imgUrl, \"img\", index, newArr);\r\n setDragoverId(0);\r\n };\r\n return (\r\n \r\n \r\n \r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index <= 2 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1 ? \"bg box-1 opacity\" : \"bg box-1 \"\r\n }\r\n style={{\r\n backgroundImage: \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n key={index}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}>\r\n Scale\r\n
\r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n ) : null}\r\n
\r\n ) : props.mediaArray ? (\r\n
setshowbg(false, \"\", \"\", false)}\r\n >\r\n {layout.map((single) => {\r\n return (\r\n setshowbg(false, \"\", \"\", false, '10', true)}\r\n onChange={getcontent}\r\n value={content}\r\n >\r\n );\r\n })}\r\n \r\n = 70 ? \"char-counter red\" : \"char-counter \"}> {70 - content.length}
: null}\r\n \r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\nexport default Scene37;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"./../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"./../../TopSection/TopSection\";\r\nimport TextEditor from \"./../../TextEditor/TextEditor\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport ChangeBg from \"./../../ChangeBg\";\r\nimport Scene37 from \"./Scene37\";\r\nimport AddMedia from \"./../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"./../../BottomSection/BottomSection\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\n\r\nconst TemplateNew37 = (props) => {\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/37/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [processing, setProcessing] = React.useState(true);\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n time: time,\r\n };\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n\r\n function getTextlineHeight(lineHeight) {\r\n setTextlineHeight(lineHeight);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setTextSize(size);\r\n\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function showMusic(media) {\r\n console.log(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n // setAddScene(false)\r\n setAddMusic(media);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n // getData()\r\n }\r\n setAddMedia(media);\r\n\r\n getData();\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index, newArrs) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // setBgType(mediaType);\r\n // setBgScene(mediaFile);\r\n // let newArr = [...mediaArray]; // copying the old datas array\r\n // newArr[index] = {\r\n // type: mediaType,\r\n // url: mediaFile,\r\n // };\r\n setMediaArray(newArrs);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArrs,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n getData();\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n setProcessing(false);\r\n if (response.data.data.length > 0) {\r\n // console.log(response.data.data);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n if (response.data.data[0].blocks.length > 0) {\r\n setTemplateTitle(response.data.data[0].title);\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setBlocks(response.data.data[0].blocks);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 37) {\r\n // if (undoData.length == 0) {\r\n setUpatedData(block.sceneData);\r\n //}\r\n //console.log(\"herer\");\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n // getData();\r\n }, [userId]);\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n // if (data != \"undefined\" && undoCount == true) {\r\n // setUndoData((prevState) => [...prevState, upatedData]);\r\n // }\r\n // getData();\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : mediaArray && data ? (\r\n
\r\n ) : null\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateNew37;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { apiPath } from \"../../../../Utility/Utility\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneThirtyEight = (props) => {\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();\r\n const [processing, setProcessing] = React.useState(false);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container, textshows) {\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n //setContent(props.data.content)\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n setContent(props.content);\r\n }, [props.content, props.fontFamily, props.data]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 175;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n
\r\n
\r\n {layout.map((single) => {\r\n return (\r\n setshowbg(false, '', '', false, \"\", true)}\r\n className={\r\n \"child-containers form-control border center size-auto \" +\r\n \r\n \" \" +\r\n props.setAlignment\r\n }\r\n onChange={getcontent}\r\n value={content}\r\n >\r\n );\r\n })}\r\n
\r\n
\r\n
\r\n
{175 - content.length}
: null} */}\r\n {textShow && content.length >= 155 ? = 175 ? \"char-counter red\" : \"char-counter \"}> {175 - content.length}
: null}\r\n \r\n );\r\n};\r\nexport default SceneThirtyEight;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneThirtyEight from \"./Scene38\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene38 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/38/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(6.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 38) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene38;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport left from \"./../../../../Assets/images/templates/left.png\";\r\nimport right from \"./../../../../Assets/images/templates/right.png\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneThirtyNine = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [content, setContent] = React.useState([]);\r\n const [counter, setCounter] = React.useState(content.length);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();\r\n const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const slidePre = (index) => {\r\n console.log(index)\r\n console.log('index');\r\n slider1.current.slickGoTo(index);\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n function setshowbg(option, scene, type, titleColor, container) {\r\n props.showBg(option, type, scene, titleColor, container);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n dots: true,\r\n speed: 1500,\r\n autoplaySpeed: 3500,\r\n slidesToShow: 1,\r\n infinite: false,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n swipe: false,\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n dots: true,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n dots: true,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n dots: true,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n const settings2 = {\r\n dots: true,\r\n speed: 1500,\r\n autoplaySpeed: 3500,\r\n slidesToShow: 2,\r\n infinite: false,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n };\r\n const addSection = () => {\r\n setCounter(counter + 1);\r\n let newArr = [...content]; // copying the old datas array\r\n newArr[counter] = {\r\n title: \"Enter Title\",\r\n text: \"Enter Value\",\r\n };\r\n\r\n props.getContent(newArr);\r\n setContent(newArr);\r\n };\r\n const deleteSection = (e) => {\r\n setCounter(counter - 1);\r\n content.splice(e, 1);\r\n props.getContent(content);\r\n };\r\n\r\n const updateFieldChanged = (index) => (e) => {\r\n let newArr = [...content]; // copying the old datas array\r\n const maxlimit = 14;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n title: newArr[index].title,\r\n text: charc,\r\n };\r\n setContent(newArr);\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n title: newArr[index].title,\r\n text: e.target.value,\r\n };\r\n setContent(newArr);\r\n props.getContent(newArr);\r\n }\r\n };\r\n const updateTile = (index) => (e) => {\r\n // let newArr = [...content]; // copying the old datas array\r\n // newArr[index] = {\r\n // title: e.target.value,\r\n // text: newArr[index].text,\r\n // };\r\n // props.getContent(newArr);\r\n // setContent(newArr); // ??\r\n\r\n let newArr = [...content]; // copying the old datas array\r\n const maxlimit = 14;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n title: charc,\r\n text: newArr[index].text,\r\n };\r\n setContent(newArr);\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n title: e.target.value,\r\n text: newArr[index].text,\r\n };\r\n props.getContent(newArr);\r\n setContent(newArr);\r\n }\r\n };\r\n React.useEffect(() => {\r\n setContent(props.content);\r\n\r\n setMediaArray(props.mediaArray);\r\n setCounter(props.content.length);\r\n if (props.data) {\r\n setContent(props.content);\r\n setCounter(props.content.length);\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n }, [props.content, props.fontFamily, props.data]);\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n {typeof content != undefined && content.length\r\n ? content.map((data, index) => {\r\n return (\r\n
\r\n
\r\n {counter < 5 ? (\r\n
\r\n ) : null}\r\n {counter > 1 ? (\r\n
deleteSection(index)}\r\n />\r\n ) : null}\r\n \r\n
setsctiveFontFamily(true)}>\r\n \r\n
setsctiveFontFamily(false)}\r\n >\r\n \r\n
\r\n );\r\n })\r\n : null}\r\n
\r\n
\r\n
(slider1.current = slider)}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n backgroundImage: \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
(slider2.current = slider)}\r\n slidesToShow={2}\r\n swipeToSlide={true}\r\n focusOnSelect={true}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n slidePre(index)}>\r\n
\r\n {index == 0 ?\r\n
\r\n
\r\n
\r\n :
\r\n
\r\n
\r\n }\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\nexport default SceneThirtyNine;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneThirtyNine from \"./Scene39\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apiUpdateBlock,\r\n apigetAdminTemplate,\r\n} from \"../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene39 = (props) => {\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/39/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [content, setContent] = React.useState([]);\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-left\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textSize, setTextSize] = React.useState(\"39\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [texAreatextColor, setTexAreatextColor] = React.useState(\"\");\r\n const [titletextColor, setTitletextColor] = React.useState(\"\");\r\n const [titletextSize, setTitletextSize] = React.useState(\"\");\r\n\r\n const [fontfamilySet, setFontfamilySet] = React.useState(\"\");\r\n const [fontweightSet, setFontweightSet] = React.useState(\"\");\r\n\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [titleactive, setTitleactive] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [titleFontFamily, setTitleFontFamily] = React.useState(\"\");\r\n const [titleFontWeight, setTitleFontWeight] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [setInitials, setSetInitials] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(4);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: fontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: scenetime,\r\n };\r\n\r\n updateData(data);\r\n }\r\n\r\n function setActiveFontFamily(fontfamily) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setTitleactive(fontfamily);\r\n if (fontfamily) {\r\n setTexAreatextColor(titletextColor);\r\n setFontfamilySet(titleFontFamily);\r\n } else {\r\n setFontfamilySet(fontFamily);\r\n setTexAreatextColor(textColor);\r\n }\r\n }\r\n function getFontfamily(fontfamily) {\r\n setFontfamilySet(fontfamily);\r\n if (titleactive) {\r\n setTitleFontFamily(fontfamily);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: fontfamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n console.log(data);\r\n updateData(data);\r\n } else {\r\n setFontFamily(fontfamily);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n console.log(data);\r\n updateData(data);\r\n }\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontweightSet(fontweight);\r\n if (titleactive) {\r\n setTitleFontWeight(fontweight);\r\n\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: fontweight,\r\n time: time,\r\n };\r\n updateData(data);\r\n } else {\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n if (titleactive) {\r\n setTitletextColor(color);\r\n setTexAreatextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: color,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n } else {\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n setTextColor(color);\r\n setTexAreatextColor(color);\r\n }\r\n }\r\n\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n if (titleactive) {\r\n setTitletextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: size,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n } else {\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n }\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setTitleactive(titleColor);\r\n setShowGlobal(false);\r\n setContainer(container);\r\n if (titleColor) {\r\n setTexAreatextColor(titletextColor);\r\n setFontfamilySet(titleFontFamily);\r\n } else {\r\n setFontfamilySet(titleFontFamily);\r\n setTexAreatextColor(fontFamily);\r\n }\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n }\r\n\r\n function showAddScene(mediaactive, scene) {\r\n // console.log(mediaactive);\r\n setShowGlobal(false);\r\n setAddScene(mediaactive);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n titleColor: titletextColor,\r\n textSize: textSize,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: newArr,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n titleColor: titletextColor,\r\n textSize: textSize,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: newArr,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 39) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTitletextColor(block.sceneData.titleColor);\r\n setTitletextSize(block.sceneData.titletextSize);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setFontWeight(block.sceneData.fontWeight);\r\n if (!setInitials) {\r\n setSetInitials(true);\r\n setFontfamilySet(block.sceneData.titleFontFamily);\r\n }\r\n // else{\r\n // setFontfamilySet(block.sceneData.fontFamily);\r\n // }\r\n setFontFamily(block.sceneData.fontFamily);\r\n setTitleFontWeight(block.sceneData.titleFontWeight);\r\n setTitleFontFamily(block.sceneData.titleFontFamily);\r\n // setFontfamilySet(block.sceneData.fontFamily);\r\n setFontweightSet(block.sceneData.fontWeight);\r\n setContent(block.sceneData.content);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n // getData();\r\n reFetchData(true)\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" && content != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : showGlobal ? null : addMusic ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene39;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneFourty = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container, textshows) {\r\n // console.log(scene);\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n //setContent(props.data.content)\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n setContent(props.content);\r\n }, [props.content, props.fontFamily, props.data]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 96;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n
\r\n
\r\n {layout.map((single) => {\r\n return (\r\n setshowbg(false, \"\", \"\", false, \"\", true)}\r\n className={\r\n \"child-container form-control border size-auto \" +\r\n props.setAlignment\r\n }\r\n onChange={getcontent}\r\n value={content}\r\n >\r\n );\r\n })}\r\n \r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n setshowbg(\r\n true,\r\n mediaArray[0].url,\r\n mediaArray[0].type,\r\n false,\r\n 0\r\n )\r\n }\r\n onDragEnter={(e) => handleDrag(e, 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 0)}\r\n className={\r\n dragoverId == 1 ? \"bg box-1 opacity\" : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\":\r\n \"url(\" + apiPath + mediaArray[0].url + \") \",\r\n }}\r\n >\r\n {imgindex == 0 ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(mediaArray[0].url, 0)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
\r\n showCroppedImage(mediaArray[0].url)\r\n }\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == 0 && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n
\r\n \r\n
= 96 ? \"char-counter bottom left red\" : \"char-counter left bottom \"}> {96 - content.length}
: null}\r\n {/* {textShow ? {96 - content.length}
: null} */}\r\n \r\n \r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\nexport default SceneFourty;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"./../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"./../../TopSection/TopSection\";\r\nimport TextEditor from \"./../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"./../../ChangeBg\";\r\nimport SceneFourty from \"./Scene40\";\r\nimport AddMedia from \"./../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"./../../BottomSection/BottomSection\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene40 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/40/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(4);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 40) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene40;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneFourtyOne = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container, textshows) {\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n //setContent(props.data.content)\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n setContent(props.content);\r\n }, [props.content, props.fontFamily, props.data]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 92;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n props.dropMedia(false, imgUrl, \"img\", index, newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n
\r\n
\r\n {layout.map((single) => {\r\n return (\r\n setshowbg(false, \"\", \"\", false, \"\", true)}\r\n className={\r\n \"child-container form-control border size-auto \" +\r\n props.setAlignment\r\n }\r\n onChange={getcontent}\r\n value={content}\r\n >\r\n );\r\n })}\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n setshowbg(\r\n true,\r\n mediaArray[0].url,\r\n mediaArray[0].type,\r\n false,\r\n 0\r\n )\r\n }\r\n onDragEnter={(e) => handleDrag(e, 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 0)}\r\n className={\r\n dragoverId == 1 ? \"bg box-1 opacity\" : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\":\r\n \"url(\" + apiPath + mediaArray[0].url + \") \",\r\n }}\r\n >\r\n {imgindex == 0 ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick( mediaArray[0].url, 0)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage( mediaArray[0].url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == 0 && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n
\r\n \r\n
= 92 ? \"char-counter bottom red\" : \"char-counter bottom \"}> {92 - content.length}
: null}\r\n {/* {textShow ? {92 - content.length}
: null} */}\r\n \r\n \r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\nexport default SceneFourtyOne;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneFourtyOne from \"./Scene41\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene41 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/41/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(4);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index, newArrs) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArrs,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 41) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene41;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneFourtyTwo = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container, textshows) {\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n //setContent(props.data.content)\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n setContent(props.content);\r\n }, [props.content, props.fontFamily, props.data]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 65;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n {layout.map((single) => {\r\n return (\r\n setshowbg(false, \"\", \"\", false, '10', true)}\r\n className={\r\n \"child-container form-control border size-auto \" +\r\n props.setAlignment +\r\n \" \" +\r\n props.setTextTransform\r\n }\r\n onChange={getcontent}\r\n value={content}\r\n >\r\n );\r\n })}\r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n
\r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n {textShow && content.length >= 45 ? = 65 ? \"char-counter red\" : \"char-counter \"}> {65 - content.length}
: null}\r\n \r\n );\r\n};\r\nexport default SceneFourtyTwo;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"./../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"./../../TopSection/TopSection\";\r\nimport TextEditor from \"./../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"./../../ChangeBg\";\r\nimport SceneFourtyTwo from \"./Scene42\";\r\nimport AddMedia from \"./../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"./../../BottomSection/BottomSection\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene42 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/42/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(6.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 42) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene42;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport left from \"./../../../../Assets/images/templates/left.png\";\r\nimport right from \"./../../../../Assets/images/templates/right.png\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneFourtyThree = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [content, setContent] = React.useState([]);\r\n const [counter, setCounter] = React.useState(content.length);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, container) {\r\n props.showBg(option, type, scene, titleColor, container);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n dots: true,\r\n speed: 1500,\r\n autoplaySpeed: 3500,\r\n slidesToShow: 1,\r\n infinite: false,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n swipe:false,\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n dots: true,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n dots: true,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n dots: true,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n const settings2 = {\r\n dots: true,\r\n speed: 1500,\r\n autoplaySpeed: 3500,\r\n slidesToShow: 2,\r\n infinite: false,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n \r\n };\r\n const addSection = () => {\r\n setCounter(counter + 1);\r\n let newArr = [...content]; // copying the old datas array\r\n newArr[counter] = {\r\n title: \"Enter Title\",\r\n text: \"Enter Value\",\r\n };\r\n\r\n props.getContent(newArr);\r\n setContent(newArr);\r\n };\r\n const deleteSection = (e) => {\r\n setCounter(counter - 1);\r\n content.splice(e, 1);\r\n props.getContent(content);\r\n };\r\n\r\n const updateFieldChanged = (index) => (e) => {\r\n let newArr = [...content]; // copying the old datas array\r\n const maxlimit = 14;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n title: newArr[index].title,\r\n text: charc,\r\n };\r\n setContent(newArr);\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n title: newArr[index].title,\r\n text: e.target.value,\r\n };\r\n setContent(newArr);\r\n props.getContent(newArr);\r\n }\r\n };\r\n const updateTile = (index) => (e) => {\r\n // let newArr = [...content]; // copying the old datas array\r\n // newArr[index] = {\r\n // title: e.target.value,\r\n // text: newArr[index].text,\r\n // };\r\n // props.getContent(newArr);\r\n // setContent(newArr); // ??\r\n\r\n let newArr = [...content]; // copying the old datas array\r\n const maxlimit = 14;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n title: charc,\r\n text: newArr[index].text,\r\n };\r\n setContent(newArr);\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n title: e.target.value,\r\n text: newArr[index].text,\r\n };\r\n props.getContent(newArr);\r\n setContent(newArr);\r\n }\r\n };\r\n React.useEffect(() => {\r\n setContent(props.content);\r\n\r\n setMediaArray(props.mediaArray);\r\n setCounter(props.content.length);\r\n if (props.data) {\r\n setContent(props.content);\r\n setCounter(props.content.length);\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n }, [props.content, props.fontFamily, props.data]);\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n {typeof content != undefined && content.length\r\n ? content.map((data, index) => {\r\n return (\r\n
\r\n
\r\n {counter < 5 ? (\r\n
\r\n ) : null}\r\n {counter > 1 ? (\r\n
deleteSection(index)}\r\n />\r\n ) : null}\r\n \r\n
setsctiveFontFamily(true)}>\r\n \r\n
setsctiveFontFamily(false)}\r\n >\r\n \r\n
\r\n );\r\n })\r\n : null}\r\n
\r\n
\r\n
(slider1.current = slider)}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n backgroundImage: \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
(slider2.current = slider)}\r\n slidesToShow={2}\r\n swipeToSlide={true}\r\n focusOnSelect={true}\r\n {...settings2}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n {index == 0 ?\r\n
\r\n
\r\n
\r\n :
\r\n
\r\n
\r\n }\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\nexport default SceneFourtyThree;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"./../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"./../../TopSection/TopSection\";\r\nimport TextEditor from \"./../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"./../../ChangeBg\";\r\nimport SceneFourtyThree from \"./Scene43\";\r\nimport AddMedia from \"./../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"./../../BottomSection/BottomSection\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apiUpdateBlock,\r\n apigetAdminTemplate,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene43 = (props) => {\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/43/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [content, setContent] = React.useState([]);\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-left\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textSize, setTextSize] = React.useState(\"43\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [texAreatextColor, setTexAreatextColor] = React.useState(\"\");\r\n const [titletextColor, setTitletextColor] = React.useState(\"\");\r\n const [titletextSize, setTitletextSize] = React.useState(\"\");\r\n\r\n const [fontfamilySet, setFontfamilySet] = React.useState(\"\");\r\n const [fontweightSet, setFontweightSet] = React.useState(\"\");\r\n\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [titleactive, setTitleactive] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [titleFontFamily, setTitleFontFamily] = React.useState(\"\");\r\n const [titleFontWeight, setTitleFontWeight] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [setInitials, setSetInitials] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(6.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: fontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: scenetime,\r\n };\r\n\r\n updateData(data);\r\n }\r\n\r\n function setActiveFontFamily(fontfamily) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setTitleactive(fontfamily);\r\n if (fontfamily) {\r\n setTexAreatextColor(titletextColor);\r\n setFontfamilySet(titleFontFamily);\r\n } else {\r\n setFontfamilySet(fontFamily);\r\n setTexAreatextColor(textColor);\r\n }\r\n }\r\n function getFontfamily(fontfamily) {\r\n setFontfamilySet(fontfamily);\r\n if (titleactive) {\r\n setTitleFontFamily(fontfamily);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: fontfamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n console.log(data);\r\n updateData(data);\r\n } else {\r\n setFontFamily(fontfamily);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n console.log(data);\r\n updateData(data);\r\n }\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontweightSet(fontweight);\r\n if (titleactive) {\r\n setTitleFontWeight(fontweight);\r\n\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: fontweight,\r\n time: time,\r\n };\r\n updateData(data);\r\n } else {\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n if (titleactive) {\r\n setTitletextColor(color);\r\n setTexAreatextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: color,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n } else {\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n setTextColor(color);\r\n setTexAreatextColor(color);\r\n }\r\n }\r\n\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n if (titleactive) {\r\n setTitletextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: size,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n } else {\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n }\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setTitleactive(titleColor);\r\n setShowGlobal(false);\r\n setContainer(container);\r\n if (titleColor) {\r\n setTexAreatextColor(titletextColor);\r\n setFontfamilySet(titleFontFamily);\r\n } else {\r\n setFontfamilySet(titleFontFamily);\r\n setTexAreatextColor(fontFamily);\r\n }\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n }\r\n\r\n function showAddScene(mediaactive, scene) {\r\n // console.log(mediaactive);\r\n setShowGlobal(false);\r\n setAddScene(mediaactive);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n titleColor: titletextColor,\r\n textSize: textSize,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: newArr,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n titleColor: titletextColor,\r\n textSize: textSize,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: newArr,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 43) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTitletextColor(block.sceneData.titleColor);\r\n setTitletextSize(block.sceneData.titletextSize);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setFontWeight(block.sceneData.fontWeight);\r\n if (!setInitials) {\r\n setSetInitials(true);\r\n setFontfamilySet(block.sceneData.titleFontFamily);\r\n }\r\n // else{\r\n // setFontfamilySet(block.sceneData.fontFamily);\r\n // }\r\n setFontFamily(block.sceneData.fontFamily);\r\n setTitleFontWeight(block.sceneData.titleFontWeight);\r\n setTitleFontFamily(block.sceneData.titleFontFamily);\r\n // setFontfamilySet(block.sceneData.fontFamily);\r\n setFontweightSet(block.sceneData.fontWeight);\r\n setContent(block.sceneData.content);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n // getData();\r\n reFetchData(true)\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" && content != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : showGlobal ? null : addMusic ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene43;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneFourtyFour = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container, textshows) {\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n //setContent(props.data.content)\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n setContent(props.content);\r\n }, [props.content, props.fontFamily, props.data]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 138;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n setshowbg(\r\n true,\r\n mediaArray[0].url,\r\n mediaArray[0].type,\r\n false,\r\n 0\r\n )\r\n }\r\n onDragEnter={(e) => handleDrag(e, 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 0)}\r\n className={\r\n dragoverId == 1\r\n ? \"imgone img-slide opacity\"\r\n : \"imgone img-slide\"\r\n }\r\n style={{\r\n backgroundImage: \"url(\" + apiPath + mediaArray[0].url + \") \",\r\n }}\r\n />\r\n \r\n setshowbg(\r\n true,\r\n mediaArray[0].url,\r\n mediaArray[0].type,\r\n false,\r\n 0\r\n )\r\n }\r\n onDragEnter={(e) => handleDrag(e, 2)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 0)}\r\n className={\r\n dragoverId == 2\r\n ? \"imgtwo img-slide opacity\"\r\n : \"imgtwo img-slide\"\r\n }\r\n style={{\r\n backgroundImage: \"url(\" + apiPath + mediaArray[0].url + \") \",\r\n }}\r\n >\r\n {imgindex == 0 ? (\r\n \r\n
\r\n
setzoomToggle()}>\r\n Scale\r\n
\r\n
\r\n
filterBtnClick(mediaArray[0].url, 0)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(mediaArray[0].url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n ) : null}\r\n
\r\n\r\n
\r\n setshowbg(\r\n true,\r\n mediaArray[0].url,\r\n mediaArray[0].type,\r\n false,\r\n 0\r\n )\r\n }\r\n onDragEnter={(e) => handleDrag(e, 3)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 0)}\r\n alt=\"imgmain\"\r\n className={\r\n dragoverId == 3\r\n ? \"imgthree img-slide opacity\"\r\n : \"imgthree img-slide \"\r\n }\r\n //src={apiPath + mediaArray[0].url}\r\n style={{\r\n backgroundImage: \"url(\" + apiPath + mediaArray[0].url + \") \",\r\n }}\r\n > \r\n
\r\n {layout.map((single) => {\r\n return (\r\n setshowbg(false, \"\", \"\", false, '10', true)}\r\n className={\r\n \"child-container form-control border size-auto \" +\r\n props.setAlignment +\r\n \" \" +\r\n props.setTextTransform\r\n }\r\n onChange={getcontent}\r\n value={content}\r\n >\r\n );\r\n })}\r\n
\r\n \r\n \r\n \r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n\r\n {textShow && content.length >= 118 ? = 138 ? \"char-counter red\" : \"char-counter \"}> {138 - content.length}
: null}\r\n \r\n );\r\n};\r\nexport default SceneFourtyFour;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneFourtyFour from \"./Scene44\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene44 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/44/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(5.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 44) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene44;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneFourtyFive = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container, textshows) {\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n //setContent(props.data.content)\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n setContent(props.content);\r\n }, [props.content, props.fontFamily, props.data]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 128;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\":\r\n \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n
\r\n ) : null;\r\n })}\r\n \r\n
\r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 1 ? (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\":\r\n \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
setshowbg(false, \"\", \"\", false, '10', true)}\r\n >\r\n {layout.map((single) => {\r\n return (\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n {textShow && content.length >= 108 ? = 128 ? \"char-counter red\" : \"char-counter \"}> {128 - content.length}
: null}\r\n \r\n );\r\n};\r\nexport default SceneFourtyFive;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"./../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"./../../TopSection/TopSection\";\r\nimport TextEditor from \"./../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"./../../ChangeBg\";\r\nimport SceneFourtyFive from \"./Scene45\";\r\nimport AddMedia from \"./../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"./../../BottomSection/BottomSection\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene45 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/45/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: 4,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: 4,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: 4,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: 4,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: 4,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: 4,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: 4,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: 4,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: 4,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: 4,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 45) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: 4,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene45;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneFourtySix = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container, textshows) {\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n //setContent(props.data.content)\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n setContent(props.content);\r\n }, [props.content, props.fontFamily, props.data]);\r\n\r\n function getcontent(e) {\r\n const maxlimit =132;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n
\r\n
setshowbg(false, \"\", \"\", false, '10', true)}\r\n >\r\n {layout.map((single) => {\r\n return (\r\n \r\n );\r\n })}\r\n \r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\":\r\n \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n {textShow && content.length >= 112 ? = 132 ? \"char-counter red\" : \"char-counter \"}> {132 - content.length}
: null}\r\n \r\n );\r\n};\r\nexport default SceneFourtySix;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneFourtySix from \"./Scene46\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene46 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/46/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(5.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 46) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene46;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneFourtySeven from \"./Scene47\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nconst TemplateScene47 = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/47/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 6,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 6,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 6,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 6,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 6,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 6,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: 6,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: 6,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: 6,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: 6,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n //getData();\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 47) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[0].fontSize\r\n );\r\n setFontFamily(\r\n block.sceneData.textArray[0].fontFamily\r\n );\r\n setFontWeight(\r\n block.sceneData.textArray[0].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[0].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 4700);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 4700);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene47;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport left from \"./../../../../Assets/images/templates/left.png\";\r\nimport right from \"./../../../../Assets/images/templates/right.png\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneFourtyEight = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [content, setContent] = React.useState([]);\r\n const [counter, setCounter] = React.useState(content.length);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n function setshowbg(option, scene, type, titleColor, container) {\r\n props.showBg(option, type, scene, titleColor, container);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n dots: true,\r\n speed: 1500,\r\n autoplaySpeed: 3500,\r\n slidesToShow: 1,\r\n infinite: false,\r\n swipe:false,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n dots: true,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n dots: true,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n dots: true,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n const settings2 = {\r\n dots: true,\r\n speed: 1500,\r\n autoplaySpeed: 3500,\r\n slidesToShow: 2,\r\n infinite: false,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n \r\n };\r\n const addSection = () => {\r\n setCounter(counter + 1);\r\n let newArr = [...content]; // copying the old datas array\r\n newArr[counter] = {\r\n title: \"Enter Title\",\r\n text: \"Enter Value\",\r\n };\r\n\r\n props.getContent(newArr);\r\n setContent(newArr);\r\n };\r\n const deleteSection = (e) => {\r\n setCounter(counter - 1);\r\n content.splice(e, 1);\r\n props.getContent(content);\r\n };\r\n\r\n const updateFieldChanged = (index) => (e) => {\r\n let newArr = [...content]; // copying the old datas array\r\n const maxlimit = 14;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n title: newArr[index].title,\r\n text: charc,\r\n };\r\n setContent(newArr);\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n title: newArr[index].title,\r\n text: e.target.value,\r\n };\r\n setContent(newArr);\r\n props.getContent(newArr);\r\n }\r\n };\r\n const updateTile = (index) => (e) => {\r\n // let newArr = [...content]; // copying the old datas array\r\n // newArr[index] = {\r\n // title: e.target.value,\r\n // text: newArr[index].text,\r\n // };\r\n // props.getContent(newArr);\r\n // setContent(newArr); // ??\r\n\r\n let newArr = [...content]; // copying the old datas array\r\n const maxlimit = 14;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n title: charc,\r\n text: newArr[index].text,\r\n };\r\n setContent(newArr);\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n title: e.target.value,\r\n text: newArr[index].text,\r\n };\r\n props.getContent(newArr);\r\n setContent(newArr);\r\n }\r\n };\r\n React.useEffect(() => {\r\n setContent(props.content);\r\n\r\n setMediaArray(props.mediaArray);\r\n setCounter(props.content.length);\r\n if (props.data) {\r\n setContent(props.content);\r\n setCounter(props.content.length);\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n }, [props.content, props.fontFamily, props.data]);\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n {typeof content != undefined && content.length\r\n ? content.map((data, index) => {\r\n return (\r\n
\r\n
\r\n {counter < 5 ? (\r\n
\r\n ) : null}\r\n {counter > 1 ? (\r\n
deleteSection(index)}\r\n />\r\n ) : null}\r\n \r\n
setsctiveFontFamily(true)}>\r\n \r\n
setsctiveFontFamily(false)}\r\n >\r\n \r\n
\r\n );\r\n })\r\n : null}\r\n
\r\n
(slider1.current = slider)}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1 ? \"bg box-1 opacity\" : \"bg box-1 \"\r\n }\r\n style={{\r\n backgroundImage: \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n
\r\n
(slider2.current = slider)}\r\n slidesToShow={2}\r\n swipeToSlide={true}\r\n focusOnSelect={true}\r\n >\r\n {mediaArray.map((data, index) => {\r\n return (\r\n \r\n
\r\n {index == 0 ?\r\n
\r\n
\r\n
\r\n :
\r\n
\r\n
\r\n }\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\nexport default SceneFourtyEight;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"./../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"./../../TopSection/TopSection\";\r\nimport TextEditor from \"./../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"./../../ChangeBg\";\r\nimport SceneFourtyEight from \"./Scene48\";\r\nimport AddMedia from \"./../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"./../../BottomSection/BottomSection\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apiUpdateBlock,\r\n apigetAdminTemplate,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene48 = (props) => {\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/48/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [content, setContent] = React.useState([]);\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-left\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [texAreatextColor, setTexAreatextColor] = React.useState(\"\");\r\n const [titletextColor, setTitletextColor] = React.useState(\"\");\r\n const [titletextSize, setTitletextSize] = React.useState(\"\");\r\n\r\n const [fontfamilySet, setFontfamilySet] = React.useState(\"\");\r\n const [fontweightSet, setFontweightSet] = React.useState(\"\");\r\n\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [titleactive, setTitleactive] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [titleFontFamily, setTitleFontFamily] = React.useState(\"\");\r\n const [titleFontWeight, setTitleFontWeight] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [setInitials, setSetInitials] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(6.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: fontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: scenetime,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function setActiveFontFamily(fontfamily) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setTitleactive(fontfamily);\r\n if (fontfamily) {\r\n setTexAreatextColor(titletextColor);\r\n setFontfamilySet(titleFontFamily);\r\n } else {\r\n setFontfamilySet(fontFamily);\r\n setTexAreatextColor(textColor);\r\n }\r\n }\r\n function getFontfamily(fontfamily) {\r\n setFontfamilySet(fontfamily);\r\n if (titleactive) {\r\n setTitleFontFamily(fontfamily);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: fontfamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n console.log(data);\r\n updateData(data);\r\n } else {\r\n setFontFamily(fontfamily);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n console.log(data);\r\n updateData(data);\r\n }\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontweightSet(fontweight);\r\n if (titleactive) {\r\n setTitleFontWeight(fontweight);\r\n\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: fontweight,\r\n time: time,\r\n };\r\n updateData(data);\r\n } else {\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n if (titleactive) {\r\n setTitletextColor(color);\r\n setTexAreatextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: color,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n } else {\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n setTextColor(color);\r\n setTexAreatextColor(color);\r\n }\r\n }\r\n\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n if (titleactive) {\r\n setTitletextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: size,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n } else {\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n titleColor: titletextColor,\r\n titletextSize: titletextSize,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n time: time,\r\n };\r\n\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n }\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setTitleactive(titleColor);\r\n setShowGlobal(false);\r\n setContainer(container);\r\n if (titleColor) {\r\n setTexAreatextColor(titletextColor);\r\n setFontfamilySet(titleFontFamily);\r\n } else {\r\n setFontfamilySet(titleFontFamily);\r\n setTexAreatextColor(fontFamily);\r\n }\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n }\r\n\r\n function showAddScene(mediaactive, scene) {\r\n // console.log(mediaactive);\r\n setShowGlobal(false);\r\n setAddScene(mediaactive);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n titleColor: titletextColor,\r\n textSize: textSize,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: newArr,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n titleColor: titletextColor,\r\n textSize: textSize,\r\n titletextSize: titletextSize,\r\n textTransform: textTransform,\r\n media: newArr,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n titleFontFamily: titleFontFamily,\r\n titleFontWeight: titleFontWeight,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 48) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTitletextColor(block.sceneData.titleColor);\r\n setTitletextSize(block.sceneData.titletextSize);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setFontWeight(block.sceneData.fontWeight);\r\n if (!setInitials) {\r\n setSetInitials(true);\r\n setFontfamilySet(block.sceneData.titleFontFamily);\r\n }\r\n // else{\r\n // setFontfamilySet(block.sceneData.fontFamily);\r\n // }\r\n setFontFamily(block.sceneData.fontFamily);\r\n setTitleFontWeight(block.sceneData.titleFontWeight);\r\n setTitleFontFamily(block.sceneData.titleFontFamily);\r\n // setFontfamilySet(block.sceneData.fontFamily);\r\n setFontweightSet(block.sceneData.fontWeight);\r\n setContent(block.sceneData.content);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n // getData();\r\n reFetchData(true)\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" && content != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : showGlobal ? null : addMusic ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene48;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneFourtyNine = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef(); const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container, textshows) {\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n setContent(props.data.content);\r\n }\r\n setContent(props.content);\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n }, [props.content]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 132;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n\r\n
\r\n {layout.map((single) => {\r\n return (\r\n setshowbg(false, \"\", \"\", false, '10', true)}\r\n key={single.key}\r\n style={{\r\n \"font-size\": props.settextSize + \"px\",\r\n color: props.setColor,\r\n \"line-height\": props.setTextLineHeight,\r\n fontFamily: props.data.fontFamily,\r\n fontWeight: props.data.fontWeight,\r\n }}\r\n className={\r\n \"child-container form-control editable-div size-auto \" +\r\n props.setAlignment +\r\n \" \" +\r\n props.setTextTransform\r\n }\r\n onChange={getcontent}\r\n value={content}\r\n >\r\n {content}\r\n \r\n );\r\n })}\r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return (\r\n
\r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n {textShow && content.length >= 112 ? = 132 ? \"char-counter red\" : \"char-counter \"}> {132 - content.length}
: null}\r\n \r\n );\r\n};\r\nexport default SceneFourtyNine;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneFourtyNine from \"./Scen49\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene49 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/49/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [time, setTime] = React.useState(5.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n console.log(\"here\")\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n setShowGlobal(false);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowGlobal(false);\r\n setShowEditbutton(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 49) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n getData();\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n getData();\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene49;\r\n","/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneFifty = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [content, setContent] = React.useState(props.content);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [state, setState] = React.useState({ nav1: null, nav2: null });\r\n const slider1 = React.useRef();\r\n const slider2 = React.useRef();const [processing, setProcessing] = React.useState(false);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n const layout = [\r\n {\r\n key: \"test\",\r\n x: transformX,\r\n y: transformY,\r\n width: width,\r\n height: height,\r\n zIndex: 1,\r\n },\r\n ];\r\n const canResizable = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n const onLayoutChange = (e) => {\r\n //console.log(e[0])\r\n setTransformX(e[0].x);\r\n setTransformY(e[0].y);\r\n setWidth(e[0].width);\r\n setHeight(e[0].height);\r\n let newObj = {\r\n boxwidth: e[0].width,\r\n boxheight: e[0].height,\r\n x: e[0].x,\r\n y: e[0].y,\r\n };\r\n props.getTextAreaData(newObj);\r\n };\r\n function setshowbg(option, scene, type, titleColor, container, textshows) {\r\n console.log(container)\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n setImageSrc(apiPath + scene);\r\n setImgindex(container);\r\n setZoomToggle(false);\r\n if (container != imgindex) {\r\n setZoom(1);\r\n }\r\n props.showBg(option, type, scene, false, container);\r\n }\r\n\r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n speed: 1500,\r\n autoplaySpeed: 3000,\r\n slidesToShow: 1,\r\n infinite: true,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n fade: true,\r\n cssEase: \"linear\",\r\n responsive: [\r\n {\r\n breakpoint: 1600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1400,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 600,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1,\r\n },\r\n },\r\n ],\r\n };\r\n React.useEffect(() => {\r\n setMediaArray(props.mediaArray);\r\n if (props.data) {\r\n console.log(props.data);\r\n setWidth(props.data.boxwidth);\r\n setHeight(props.data.boxheight);\r\n setTransformX(props.data.x);\r\n setTransformY(props.data.y);\r\n //setContent(props.data.content)\r\n }\r\n setState({\r\n nav1: slider1.current,\r\n nav2: slider2.current,\r\n });\r\n setContent(props.content);\r\n }, [props.content, props.fontFamily, props.data]);\r\n\r\n function getcontent(e) {\r\n const maxlimit = 92;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n // if too long...trim it!\r\n charc = e.target.value.substring(0, maxlimit);\r\n setContent(charc);\r\n props.getContent(charc);\r\n } else {\r\n setContent(charc);\r\n props.getContent(charc);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n };\r\n\r\n const { nav1, nav2 } = state;\r\n return (\r\n \r\n \r\n
\r\n
\r\n
setshowbg(false, \"\", \"\", false, '10', true)}\r\n layout={layout}\r\n onLayoutChange={onLayoutChange}\r\n dragProps={{ disabled: false }}\r\n scale={1}\r\n >\r\n {layout.map((single) => {\r\n return (\r\n setshowbg(false, \"\", \"\", false, '10', true)}\r\n className={\r\n \"child-container form-control border size-auto \" +\r\n props.setAlignment +\r\n \" \" +\r\n props.setTextTransform\r\n }\r\n onChange={getcontent}\r\n value={content}\r\n >\r\n );\r\n })}\r\n \r\n \r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\":\r\n \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n ) : null;\r\n })}\r\n \r\n
\r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 1 ? (\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\":\r\n \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(data.url, index)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n\r\n {textShow && content.length >= 72 ? = 92 ? \"char-counter red\" : \"char-counter \"}> {92 - content.length}
: null}\r\n \r\n );\r\n};\r\nexport default SceneFifty;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"./../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"./../../TopSection/TopSection\";\r\nimport TextEditor from \"./../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"./../../ChangeBg\";\r\nimport SceneFifty from \"./Scene50\";\r\nimport AddMedia from \"./../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"./../../BottomSection/BottomSection\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Player from \"../../Player\";\r\nconst TemplateScene50 = (props) => {\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/50/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"#333\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"18\");\r\n const [textTransform, setTexttransform] = React.useState(\"\");\r\n\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: Scene,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene2,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene3,\r\n // type:'image/png'\r\n // },\r\n // {\r\n // url: Scene4,\r\n // type:'image/png'\r\n // }\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [transformX, setTransformX] = React.useState(0);\r\n const [transformY, setTransformY] = React.useState(0);\r\n const [width, setWidth] = React.useState(350);\r\n const [height, setHeight] = React.useState(100);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: scenetime,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n\r\n updateData(data);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontfamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontweight,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextAligmnet(alignment);\r\n const data = {\r\n content: content,\r\n textAligmnet: alignment,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setContent(content);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n // console.log(texttransform);\r\n setTexttransform(texttransform);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: texttransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextColor(color);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: color,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n time: time,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: lineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: size,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container) {\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: transformX,\r\n y: transformY,\r\n boxwidth: width,\r\n boxheight: height,\r\n textTransform: textTransform,\r\n media: newArr,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n if (response.data.data[0].blocks.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 50) {\r\n setUpatedData(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextSize(block.sceneData.textSize);\r\n setTextlineHeight(block.sceneData.textlineHeight);\r\n setTextColor(block.sceneData.textColor);\r\n setTexttransform(block.sceneData.textTransform);\r\n setTextAligmnet(block.sceneData.textAligmnet);\r\n setTransformX(block.sceneData.x);\r\n setTransformY(block.sceneData.y);\r\n setWidth(block.sceneData.boxwidth);\r\n setHeight(block.sceneData.boxheight);\r\n setContent(block.sceneData.content);\r\n setFontWeight(block.sceneData.fontWeight);\r\n setFontFamily(block.sceneData.fontFamily);\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n //setUserId(decoded.id);\r\n setUserId(decoded.id);\r\n getData();\r\n }\r\n }, [userId]);\r\n\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n function getTextAreaData(obj) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n content: content,\r\n textAligmnet: textAligmnet,\r\n textColor: textColor,\r\n textlineHeight: textlineHeight,\r\n textSize: textSize,\r\n x: obj.x,\r\n y: obj.y,\r\n boxwidth: obj.boxwidth,\r\n boxheight: obj.boxheight,\r\n textTransform: textTransform,\r\n media: mediaArray,\r\n fontFamily: fontFamily,\r\n fontWeight: fontWeight,\r\n time: time,\r\n };\r\n setTransformX(obj.x);\r\n setTransformY(obj.y);\r\n setWidth(obj.boxwidth);\r\n setHeight(obj.boxheight);\r\n updateData(data);\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 800);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : data != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene50;\r\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\n\r\nimport home from \"./../../../../Assets/images/home-con.png\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneFour = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const [usertext1, setUsertext1] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n const [mediaArray1, setMediaArray1] = React.useState([]);\r\n const [mediaArray2, setMediaArray2] = React.useState([]);\r\n const [showSlider, setshowSlider] = React.useState(true);\r\n\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(index);\r\n setZoomToggle(false);\r\n if (index != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 5000,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n const settings2 = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 6500,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n\r\n React.useEffect(() => {\r\n // props.mediaArray.map((data, index) => {\r\n // {\r\n // index <= 1\r\n // ? setMediaArray1((medias) => [...medias, data])\r\n // : index > 1 && index <= 3\r\n // ? setMediaArray2((media) => [...media, data])\r\n // : null;\r\n // }\r\n // });\r\n if (props.data) {\r\n mediaArray.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n });\r\n setUsertext1(textArrays[0].text);\r\n }\r\n }, [textArrays, props.data]);\r\n textArrays.map((data, index) => {\r\n window[\"layout\" + index] = [\r\n {\r\n key: \"test\" + index,\r\n x: data.x,\r\n y: data.y,\r\n width: data.boxWidth,\r\n height: data.boxHeight,\r\n zIndex: 1,\r\n },\r\n ];\r\n window[\"canResizable\" + index] = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n window[\"onLayoutChange\" + index] = (e, index) => {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: newArr[index].text,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: e[0].x,\r\n y: e[0].y,\r\n boxWidth: e[0].width,\r\n boxHeight: e[0].height,\r\n };\r\n props.getContent(newArr);\r\n textArrays = newArr;\r\n };\r\n });\r\n function getcontent(e, index) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n const maxlimit = 140;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n text: charc,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n if (index >= 0 && index <= 5) {\r\n setshowSlider(false);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setMediaArray1([]);\r\n setMediaArray2([]);\r\n newArr.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n if (index == 3) {\r\n setshowSlider(true);\r\n }\r\n });\r\n }\r\n setDragoverId(0);\r\n //console.log(index)\r\n };\r\n return (\r\n \r\n {showSlider ? (\r\n \r\n
\r\n
\r\n
\r\n\r\n
{\r\n setsctiveFontFamily(0);\r\n }}\r\n onChange={(e) => getcontent(e, 0)}\r\n value={textArrays[0].text}\r\n >\r\n\r\n setsctiveFontFamily(1)}\r\n onChange={(e) => getcontent(e, 1)}\r\n value={textArrays[1].text}\r\n >\r\n \r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index < 2 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n ) : null;\r\n })}\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index > 1 && index <= 3 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n {mediaArray.map((data, index) => {\r\n return index > 3 && index <= 5 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SceneFour;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneFiftyOne from \"./Scene51\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nconst TemplateScene51 = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/51/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: time,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 51) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[1].fontSize\r\n );\r\n // setFontFamily(\r\n // block.sceneData.textArray[1].fontFamily\r\n // );\r\n setFontWeight(\r\n block.sceneData.textArray[1].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[1].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene51;\r\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"../../../../Utility/Loader/Loader\";\r\nconst SceneFiftyTwo = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n const [mediaArray1, setMediaArray1] = React.useState([]);\r\n const [mediaArray2, setMediaArray2] = React.useState([]);\r\n const [showSlider, setshowSlider] = React.useState(true);\r\n\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(index);\r\n setZoomToggle(false);\r\n if (index != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 5000,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n const settings2 = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 6500,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n\r\n React.useEffect(() => {\r\n // props.mediaArray.map((data, index) => {\r\n // {\r\n // index <= 1\r\n // ? setMediaArray1((medias) => [...medias, data])\r\n // : index > 1 && index <= 3\r\n // ? setMediaArray2((media) => [...media, data])\r\n // : null;\r\n // }\r\n // });\r\n if (props.data) {\r\n mediaArray.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n });\r\n }\r\n }, [textArrays, props.data]);\r\n textArrays.map((data, index) => {\r\n window[\"layout\" + index] = [\r\n {\r\n key: \"test\" + index,\r\n x: data.x,\r\n y: data.y,\r\n width: data.boxWidth,\r\n height: data.boxHeight,\r\n zIndex: 1,\r\n },\r\n ];\r\n window[\"canResizable\" + index] = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n window[\"onLayoutChange\" + index] = (e, index) => {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: newArr[index].text,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: e[0].x,\r\n y: e[0].y,\r\n boxWidth: e[0].width,\r\n boxHeight: e[0].height,\r\n };\r\n props.getContent(newArr);\r\n textArrays = newArr;\r\n };\r\n });\r\n function getcontent(e, index) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n const maxlimit = 14;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n text: charc,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n if (index >= 0 && index <= 3) {\r\n setshowSlider(false);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setMediaArray1([]);\r\n setMediaArray2([]);\r\n newArr.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n if (index == 3) {\r\n setshowSlider(true);\r\n }\r\n });\r\n }\r\n setDragoverId(0);\r\n //console.log(index)\r\n };\r\n return (\r\n \r\n {showSlider ? (\r\n \r\n
\r\n
\r\n {\r\n setsctiveFontFamily(0);\r\n }}\r\n onChange={(e) => getcontent(e, 0)}\r\n value={textArrays[0].text}\r\n >\r\n\r\n setsctiveFontFamily(1)}\r\n onChange={(e) => getcontent(e, 1)}\r\n value={textArrays[1].text}\r\n >\r\n
\r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index < 2 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n ) : null;\r\n })}\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index > 1 && index <= 3 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SceneFiftyTwo;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneFiftyTwo from \"./Scene52\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nconst TemplateScene52 = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/52/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.52\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: time,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 52) {\r\n setUpatedData(block.sceneData);\r\n // console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[1].fontSize\r\n );\r\n setFontFamily(\r\n block.sceneData.textArray[1].fontFamily\r\n );\r\n setFontWeight(\r\n block.sceneData.textArray[1].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[1].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene52;\r\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport pentagon from \"./../../../../Assets/images/pentagon.png\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"../../../../Utility/Loader/Loader\";\r\nconst SceneFiftyThree = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n const [mediaArray1, setMediaArray1] = React.useState([]);\r\n const [mediaArray2, setMediaArray2] = React.useState([]);\r\n const [showSlider, setshowSlider] = React.useState(true);\r\n\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(index);\r\n setZoomToggle(false);\r\n if (index != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 5000,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n const settings2 = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 6500,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n\r\n React.useEffect(() => {\r\n // props.mediaArray.map((data, index) => {\r\n // {\r\n // index <= 1\r\n // ? setMediaArray1((medias) => [...medias, data])\r\n // : index > 1 && index <= 3\r\n // ? setMediaArray2((media) => [...media, data])\r\n // : null;\r\n // }\r\n // });\r\n if (props.data) {\r\n mediaArray.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n });\r\n }\r\n }, [textArrays, props.data]);\r\n textArrays.map((data, index) => {\r\n window[\"layout\" + index] = [\r\n {\r\n key: \"test\" + index,\r\n x: data.x,\r\n y: data.y,\r\n width: data.boxWidth,\r\n height: data.boxHeight,\r\n zIndex: 1,\r\n },\r\n ];\r\n window[\"canResizable\" + index] = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n window[\"onLayoutChange\" + index] = (e, index) => {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: newArr[index].text,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: e[0].x,\r\n y: e[0].y,\r\n boxWidth: e[0].width,\r\n boxHeight: e[0].height,\r\n };\r\n props.getContent(newArr);\r\n textArrays = newArr;\r\n };\r\n });\r\n function getcontent(e, index) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n const maxlimit = 30;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n text: charc,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n if (index >= 0 && index <= 3) {\r\n setshowSlider(false);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setMediaArray1([]);\r\n setMediaArray2([]);\r\n newArr.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n if (index == 3) {\r\n setshowSlider(true);\r\n }\r\n });\r\n }\r\n setDragoverId(0);\r\n //console.log(index)\r\n };\r\n return (\r\n \r\n {showSlider ? (\r\n \r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity box-size\"\r\n : \"bg box-1 box-size\"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}>\r\n Scale\r\n
\r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n ) : null}\r\n
\r\n
\r\n
\r\n
\r\n\r\n {textArrays.map((data, index) => {\r\n return index == 0 ? (\r\n
{\r\n setsctiveFontFamily(0);\r\n }}\r\n onChange={(e) => getcontent(e, 0)}\r\n value={textArrays[0].text}\r\n >\r\n ) : null;\r\n })}\r\n \r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity box-size\"\r\n : \"bg box-1 box-size\"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}>\r\n Scale\r\n
\r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SceneFiftyThree;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneFiftyThree from \"./Scene53\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nconst TemplateScene53 = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/53/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.53\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: time,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 53) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[1].fontSize\r\n );\r\n // setFontFamily(\r\n // block.sceneData.textArray[1].fontFamily\r\n // );\r\n setFontWeight(\r\n block.sceneData.textArray[1].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[1].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene53;\r\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"../../../../Utility/Loader/Loader\";\r\nimport home from \"./../../../../Assets/images/home-con.png\";\r\nconst SceneFiftyFour = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n const [mediaArray1, setMediaArray1] = React.useState([]);\r\n const [mediaArray2, setMediaArray2] = React.useState([]);\r\n const [showSlider, setshowSlider] = React.useState(true);\r\n\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(index);\r\n setZoomToggle(false);\r\n if (index != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 5000,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n const settings2 = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 6500,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n\r\n React.useEffect(() => {\r\n // props.mediaArray.map((data, index) => {\r\n // {\r\n // index <= 1\r\n // ? setMediaArray1((medias) => [...medias, data])\r\n // : index > 1 && index <= 3\r\n // ? setMediaArray2((media) => [...media, data])\r\n // : null;\r\n // }\r\n // });\r\n if (props.data) {\r\n mediaArray.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n });\r\n }\r\n }, [textArrays, props.data]);\r\n textArrays.map((data, index) => {\r\n window[\"layout\" + index] = [\r\n {\r\n key: \"test\" + index,\r\n x: data.x,\r\n y: data.y,\r\n width: data.boxWidth,\r\n height: data.boxHeight,\r\n zIndex: 1,\r\n },\r\n ];\r\n window[\"canResizable\" + index] = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n window[\"onLayoutChange\" + index] = (e, index) => {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: newArr[index].text,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: e[0].x,\r\n y: e[0].y,\r\n boxWidth: e[0].width,\r\n boxHeight: e[0].height,\r\n };\r\n props.getContent(newArr);\r\n textArrays = newArr;\r\n };\r\n });\r\n function getcontent(e, index) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n const maxlimit = 14;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n text: charc,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n if (index >= 0 && index <= 5) {\r\n setshowSlider(false);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setMediaArray1([]);\r\n setMediaArray2([]);\r\n newArr.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n if (index == 3) {\r\n setshowSlider(true);\r\n }\r\n });\r\n }\r\n setDragoverId(0);\r\n //console.log(index)\r\n };\r\n return (\r\n \r\n {showSlider ? (\r\n \r\n
\r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index < 2 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n ) : null;\r\n })}\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index > 1 && index <= 3 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n
\r\n\r\n
{\r\n setsctiveFontFamily(0);\r\n }}\r\n onChange={(e) => getcontent(e, 0)}\r\n value={textArrays[0].text}\r\n >\r\n\r\n setsctiveFontFamily(1)}\r\n onChange={(e) => getcontent(e, 1)}\r\n value={textArrays[1].text}\r\n >\r\n \r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SceneFiftyFour;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneFiftyFour from \"./Scene54\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nconst TemplateScene54 = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/54/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: time,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 54) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[1].fontSize\r\n );\r\n setFontFamily(\r\n block.sceneData.textArray[1].fontFamily\r\n );\r\n setFontWeight(\r\n block.sceneData.textArray[1].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[1].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene54;\r\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\n\r\nimport home from \"./../../../../Assets/images/home-con.png\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"../../../../Utility/Loader/Loader\";\r\nconst SceneFiftyFive = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const [usertext1, setUsertext1] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n const [mediaArray1, setMediaArray1] = React.useState([]);\r\n const [mediaArray2, setMediaArray2] = React.useState([]);\r\n const [showSlider, setshowSlider] = React.useState(true);\r\n\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(index);\r\n setZoomToggle(false);\r\n if (index != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 5000,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n const settings2 = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 6500,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n\r\n React.useEffect(() => {\r\n // props.mediaArray.map((data, index) => {\r\n // {\r\n // index <= 1\r\n // ? setMediaArray1((medias) => [...medias, data])\r\n // : index > 1 && index <= 3\r\n // ? setMediaArray2((media) => [...media, data])\r\n // : null;\r\n // }\r\n // });\r\n if (props.data) {\r\n mediaArray.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n });\r\n setUsertext1(textArrays[0].text);\r\n }\r\n }, [textArrays, props.data]);\r\n textArrays.map((data, index) => {\r\n window[\"layout\" + index] = [\r\n {\r\n key: \"test\" + index,\r\n x: data.x,\r\n y: data.y,\r\n width: data.boxWidth,\r\n height: data.boxHeight,\r\n zIndex: 1,\r\n },\r\n ];\r\n window[\"canResizable\" + index] = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n window[\"onLayoutChange\" + index] = (e, index) => {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: newArr[index].text,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: e[0].x,\r\n y: e[0].y,\r\n boxWidth: e[0].width,\r\n boxHeight: e[0].height,\r\n };\r\n props.getContent(newArr);\r\n textArrays = newArr;\r\n };\r\n });\r\n function getcontent(e, index, count) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n const maxlimit = count;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n text: charc,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n if (index >= 0 && index <= 5) {\r\n setshowSlider(false);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setMediaArray1([]);\r\n setMediaArray2([]);\r\n newArr.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n if (index == 3) {\r\n setshowSlider(true);\r\n }\r\n });\r\n }\r\n setDragoverId(0);\r\n //console.log(index)\r\n };\r\n return (\r\n \r\n {showSlider ? (\r\n \r\n
\r\n
\r\n
{\r\n setsctiveFontFamily(0);\r\n }}\r\n onChange={(e) => getcontent(e, 0, 12)}\r\n value={textArrays[0].text}\r\n >\r\n \r\n setsctiveFontFamily(1)}\r\n onChange={(e) => getcontent(e, 1, 21)}\r\n value={textArrays[1].text}\r\n >\r\n
\r\n \r\n setsctiveFontFamily(2)}\r\n onChange={(e) => getcontent(e, 2, 10)}\r\n value={textArrays[2].text}\r\n >\r\n
\r\n setsctiveFontFamily(3)}\r\n onChange={(e) => getcontent(e, 3, 60)}\r\n value={textArrays[3].text}\r\n >\r\n setsctiveFontFamily(4)}\r\n onChange={(e) => getcontent(e, 4, 36)}\r\n value={textArrays[4].text}\r\n >\r\n \r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n ) : null;\r\n })}\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index >= 1 && index < 3 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n {mediaArray.map((data, index) => {\r\n return index == 3 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SceneFiftyFive;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneFiftyFive from \"./Scene55\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nimport steps from \"./../../Guide/steps\"\r\nimport { disableBodyScroll, enableBodyScroll } from \"body-scroll-lock\";\r\nimport Tour from \"reactour\";\r\nconst TemplateScene55 = (props) => {\r\n const disableBody = target => disableBodyScroll(target);\r\n const enableBody = target => enableBodyScroll(target);\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/55/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: time,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 55) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[1].fontSize\r\n );\r\n // setFontFamily(\r\n // block.sceneData.textArray[1].fontFamily\r\n // );\r\n setFontWeight(\r\n block.sceneData.textArray[1].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[1].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n const [isTourOpen, setIsTourOpen] = React.useState(false);\r\n const [isShowingMore, setIsShowingMore] = React.useState(false);\r\n const toggleShowMore = () => {\r\n setIsShowingMore(!isShowingMore)\r\n };\r\n\r\n const closeTour = () => {\r\n setIsTourOpen(false)\r\n };\r\n const showTour = () => {\r\n setIsTourOpen(true)\r\n };\r\n const accentColor = \"#5cb7b7\";\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n
Guide
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene55;\r\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\n\r\nimport home from \"./../../../../Assets/images/home-con.png\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"../../../../Utility/Loader/Loader\";\r\nconst SceneFiftySix= (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const [usertext1, setUsertext1] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n const [mediaArray1, setMediaArray1] = React.useState([]);\r\n const [mediaArray2, setMediaArray2] = React.useState([]);\r\n const [showSlider, setshowSlider] = React.useState(true);\r\n\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(index);\r\n setZoomToggle(false);\r\n if (index != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 5000,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n const settings2 = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 6500,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n\r\n React.useEffect(() => {\r\n // props.mediaArray.map((data, index) => {\r\n // {\r\n // index <= 1\r\n // ? setMediaArray1((medias) => [...medias, data])\r\n // : index > 1 && index <= 3\r\n // ? setMediaArray2((media) => [...media, data])\r\n // : null;\r\n // }\r\n // });\r\n if (props.data) {\r\n mediaArray.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n });\r\n setUsertext1(textArrays[0].text);\r\n }\r\n }, [textArrays, props.data]);\r\n textArrays.map((data, index) => {\r\n window[\"layout\" + index] = [\r\n {\r\n key: \"test\" + index,\r\n x: data.x,\r\n y: data.y,\r\n width: data.boxWidth,\r\n height: data.boxHeight,\r\n zIndex: 1,\r\n },\r\n ];\r\n window[\"canResizable\" + index] = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n window[\"onLayoutChange\" + index] = (e, index) => {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: newArr[index].text,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: e[0].x,\r\n y: e[0].y,\r\n boxWidth: e[0].width,\r\n boxHeight: e[0].height,\r\n };\r\n props.getContent(newArr);\r\n textArrays = newArr;\r\n };\r\n });\r\n function getcontent(e, index, count) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n const maxlimit = count;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n text: charc,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n if (index >= 0 && index <= 5) {\r\n setshowSlider(false);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setMediaArray1([]);\r\n setMediaArray2([]);\r\n newArr.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n if (index == 3) {\r\n setshowSlider(true);\r\n }\r\n });\r\n }\r\n setDragoverId(0);\r\n //console.log(index)\r\n };\r\n return ( \r\n \r\n {showSlider ? (\r\n \r\n
\r\n
\r\n
{\r\n setsctiveFontFamily(0);\r\n }}\r\n onChange={(e) => getcontent(e, 0, 12)}\r\n value={textArrays[0].text}\r\n >\r\n \r\n setsctiveFontFamily(1)}\r\n onChange={(e) => getcontent(e, 1, 21)}\r\n value={textArrays[1].text}\r\n >\r\n
\r\n \r\n setsctiveFontFamily(2)}\r\n onChange={(e) => getcontent(e, 2, 10)}\r\n value={textArrays[2].text}\r\n >\r\n
\r\n setsctiveFontFamily(3)}\r\n onChange={(e) => getcontent(e, 3, 60)}\r\n value={textArrays[3].text}\r\n >\r\n setsctiveFontFamily(4)}\r\n onChange={(e) => getcontent(e, 4, 36)}\r\n value={textArrays[4].text}\r\n >\r\n \r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SceneFiftySix;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneFiftySix from \"./Scene56\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nimport { disableBodyScroll, enableBodyScroll } from \"body-scroll-lock\";\r\nimport steps from \"./../../Guide/steps\"\r\nimport Tour from \"reactour\";\r\nconst TemplateScene56 = (props) => {\r\n const disableBody = target => disableBodyScroll(target);\r\n const enableBody = target => enableBodyScroll(target);\r\n const [isTourOpen, setIsTourOpen] = React.useState(false);\r\n const [isShowingMore, setIsShowingMore] = React.useState(false);\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/56/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: time,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 56) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[1].fontSize\r\n );\r\n // setFontFamily(\r\n // block.sceneData.textArray[1].fontFamily\r\n // );\r\n setFontWeight(\r\n block.sceneData.textArray[1].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[1].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n const closeTour = () => {\r\n setIsTourOpen(false)\r\n };\r\n const showTour = () => {\r\n setIsTourOpen(true)\r\n };\r\n const accentColor = \"#5cb7b7\";\r\n return (\r\n \r\n Guide
\r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene56;\r\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\n\r\nimport home from \"./../../../../Assets/images/home-con.png\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"../../../../Utility/Loader/Loader\";\r\nconst SceneFiftySeven = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const [usertext1, setUsertext1] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n const [mediaArray1, setMediaArray1] = React.useState([]);\r\n const [mediaArray2, setMediaArray2] = React.useState([]);\r\n const [showSlider, setshowSlider] = React.useState(true);\r\n\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(index);\r\n setZoomToggle(false);\r\n if (index != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 5000,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n const settings2 = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 6500,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n\r\n React.useEffect(() => {\r\n // props.mediaArray.map((data, index) => {\r\n // {\r\n // index <= 1\r\n // ? setMediaArray1((medias) => [...medias, data])\r\n // : index > 1 && index <= 3\r\n // ? setMediaArray2((media) => [...media, data])\r\n // : null;\r\n // }\r\n // });\r\n if (props.data) {\r\n mediaArray.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n });\r\n setUsertext1(textArrays[0].text);\r\n }\r\n }, [textArrays, props.data]);\r\n textArrays.map((data, index) => {\r\n window[\"layout\" + index] = [\r\n {\r\n key: \"test\" + index,\r\n x: data.x,\r\n y: data.y,\r\n width: data.boxWidth,\r\n height: data.boxHeight,\r\n zIndex: 1,\r\n },\r\n ];\r\n window[\"canResizable\" + index] = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n window[\"onLayoutChange\" + index] = (e, index) => {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: newArr[index].text,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: e[0].x,\r\n y: e[0].y,\r\n boxWidth: e[0].width,\r\n boxHeight: e[0].height,\r\n };\r\n props.getContent(newArr);\r\n textArrays = newArr;\r\n };\r\n });\r\n function getcontent(e, index, count) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n const maxlimit = count;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n text: charc,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n if (index >= 0 && index <= 5) {\r\n setshowSlider(false);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setMediaArray1([]);\r\n setMediaArray2([]);\r\n newArr.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n if (index == 3) {\r\n setshowSlider(true);\r\n }\r\n });\r\n }\r\n setDragoverId(0);\r\n //console.log(index)\r\n };\r\n return (\r\n \r\n {showSlider ? (\r\n \r\n
\r\n\r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n ) : null;\r\n })}\r\n
\r\n
{\r\n setsctiveFontFamily(0);\r\n }}\r\n onChange={(e) => getcontent(e, 0, 12)}\r\n value={textArrays[0].text}\r\n >\r\n \r\n setsctiveFontFamily(1)}\r\n onChange={(e) => getcontent(e, 1, 21)}\r\n value={textArrays[1].text}\r\n >\r\n
\r\n \r\n setsctiveFontFamily(2)}\r\n onChange={(e) => getcontent(e, 2, 10)}\r\n value={textArrays[2].text}\r\n >\r\n
\r\n \r\n setsctiveFontFamily(3)}\r\n onChange={(e) => getcontent(e, 3, 60)}\r\n value={textArrays[3].text}\r\n >\r\n setsctiveFontFamily(4)}\r\n onChange={(e) => getcontent(e, 4, 36)}\r\n value={textArrays[4].text}\r\n >\r\n
\r\n \r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 1 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SceneFiftySeven;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneFiftySeven from \"./Scene57\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nconst TemplateScene57 = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/57/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: time,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 57) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[1].fontSize\r\n );\r\n // setFontFamily(\r\n // block.sceneData.textArray[1].fontFamily\r\n // );\r\n setFontWeight(\r\n block.sceneData.textArray[1].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[1].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene57;\r\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\n\r\nimport home from \"./../../../../Assets/images/home-con.png\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"../../../../Utility/Loader/Loader\";\r\nconst SceneFiftyEight = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const [usertext1, setUsertext1] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n const [mediaArray1, setMediaArray1] = React.useState([]);\r\n const [mediaArray2, setMediaArray2] = React.useState([]);\r\n const [showSlider, setshowSlider] = React.useState(true);\r\n\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(index);\r\n setZoomToggle(false);\r\n if (index != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 5000,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n const settings2 = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 6500,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n\r\n React.useEffect(() => {\r\n // props.mediaArray.map((data, index) => {\r\n // {\r\n // index <= 1\r\n // ? setMediaArray1((medias) => [...medias, data])\r\n // : index > 1 && index <= 3\r\n // ? setMediaArray2((media) => [...media, data])\r\n // : null;\r\n // }\r\n // });\r\n if (props.data) {\r\n mediaArray.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n });\r\n setUsertext1(textArrays[0].text);\r\n }\r\n }, [textArrays, props.data]);\r\n textArrays.map((data, index) => {\r\n window[\"layout\" + index] = [\r\n {\r\n key: \"test\" + index,\r\n x: data.x,\r\n y: data.y,\r\n width: data.boxWidth,\r\n height: data.boxHeight,\r\n zIndex: 1,\r\n },\r\n ];\r\n window[\"canResizable\" + index] = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n window[\"onLayoutChange\" + index] = (e, index) => {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: newArr[index].text,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: e[0].x,\r\n y: e[0].y,\r\n boxWidth: e[0].width,\r\n boxHeight: e[0].height,\r\n };\r\n props.getContent(newArr);\r\n textArrays = newArr;\r\n };\r\n });\r\n function getcontent(e, index, count) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n const maxlimit = count;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n text: charc,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n if (index >= 0 && index <= 5) {\r\n setshowSlider(false);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setMediaArray1([]);\r\n setMediaArray2([]);\r\n newArr.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n if (index == 3) {\r\n setshowSlider(true);\r\n }\r\n });\r\n }\r\n setDragoverId(0);\r\n //console.log(index)\r\n };\r\n return (\r\n \r\n {showSlider ? (\r\n \r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity box-size\"\r\n : \"bg box-1 box-size\"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}>\r\n Scale\r\n
\r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n ) : null}\r\n
\r\n
\r\n
{\r\n setsctiveFontFamily(0);\r\n }}\r\n onChange={(e) => getcontent(e, 0, 12)}\r\n value={textArrays[0].text}\r\n >\r\n \r\n setsctiveFontFamily(1)}\r\n onChange={(e) => getcontent(e, 1, 21)}\r\n value={textArrays[1].text}\r\n >\r\n
\r\n \r\n setsctiveFontFamily(2)}\r\n onChange={(e) => getcontent(e, 2, 10)}\r\n value={textArrays[2].text}\r\n >\r\n
\r\n setsctiveFontFamily(3)}\r\n onChange={(e) => getcontent(e, 3, 60)}\r\n value={textArrays[3].text}\r\n >\r\n setsctiveFontFamily(4)}\r\n onChange={(e) => getcontent(e, 4, 36)}\r\n value={textArrays[4].text}\r\n >\r\n \r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity box-size\"\r\n : \"bg box-1 box-size\"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}>\r\n Scale\r\n
\r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SceneFiftyEight;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneFiftyEight from \"./Scene58\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nconst TemplateScene58 = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/58/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: time,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 58) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[1].fontSize\r\n );\r\n // setFontFamily(\r\n // block.sceneData.textArray[1].fontFamily\r\n // );\r\n setFontWeight(\r\n block.sceneData.textArray[1].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[1].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene58;\r\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\n\r\nimport home from \"./../../../../Assets/images/home-con.png\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"../../../../Utility/Loader/Loader\";\r\nconst SceneFiftyNine = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const [usertext1, setUsertext1] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n const [mediaArray1, setMediaArray1] = React.useState([]);\r\n const [mediaArray2, setMediaArray2] = React.useState([]);\r\n const [showSlider, setshowSlider] = React.useState(true);\r\n\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(index);\r\n setZoomToggle(false);\r\n if (index != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 5000,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n const settings2 = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 6500,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n\r\n React.useEffect(() => {\r\n // props.mediaArray.map((data, index) => {\r\n // {\r\n // index <= 1\r\n // ? setMediaArray1((medias) => [...medias, data])\r\n // : index > 1 && index <= 3\r\n // ? setMediaArray2((media) => [...media, data])\r\n // : null;\r\n // }\r\n // });\r\n if (props.data) {\r\n mediaArray.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n });\r\n setUsertext1(textArrays[0].text);\r\n }\r\n }, [textArrays, props.data]);\r\n textArrays.map((data, index) => {\r\n window[\"layout\" + index] = [\r\n {\r\n key: \"test\" + index,\r\n x: data.x,\r\n y: data.y,\r\n width: data.boxWidth,\r\n height: data.boxHeight,\r\n zIndex: 1,\r\n },\r\n ];\r\n window[\"canResizable\" + index] = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n window[\"onLayoutChange\" + index] = (e, index) => {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: newArr[index].text,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: e[0].x,\r\n y: e[0].y,\r\n boxWidth: e[0].width,\r\n boxHeight: e[0].height,\r\n };\r\n props.getContent(newArr);\r\n textArrays = newArr;\r\n };\r\n });\r\n function getcontent(e, index, count) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n const maxlimit = count;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n text: charc,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n if (index >= 0 && index <= 5) {\r\n setshowSlider(false);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setMediaArray1([]);\r\n setMediaArray2([]);\r\n newArr.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n if (index == 3) {\r\n setshowSlider(true);\r\n }\r\n });\r\n }\r\n setDragoverId(0);\r\n //console.log(index)\r\n };\r\n return (\r\n \r\n {showSlider ? (\r\n \r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity \"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}>\r\n Scale\r\n
\r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n ) : null}\r\n
\r\n
\r\n setsctiveFontFamily(1)}\r\n onChange={(e) => getcontent(e, 1, 21)}\r\n value={textArrays[1].text}\r\n >\r\n
\r\n
\r\n
\r\n {\r\n setsctiveFontFamily(0);\r\n }}\r\n onChange={(e) => getcontent(e, 0, 12)}\r\n value={textArrays[0].text}\r\n >\r\n\r\n\r\n setsctiveFontFamily(3)}\r\n onChange={(e) => getcontent(e, 3, 60)}\r\n value={textArrays[3].text}\r\n >\r\n {/* setsctiveFontFamily(4)}\r\n onChange={(e) => getcontent(e, 4, 36)}\r\n value={textArrays[4].text}\r\n > */}\r\n
\r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity \"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}>\r\n Scale\r\n
\r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n setsctiveFontFamily(2)}\r\n onChange={(e) => getcontent(e, 2, 10)}\r\n value={textArrays[2].text}\r\n >\r\n
\r\n \r\n ) : null;\r\n })}\r\n \r\n\r\n \r\n ) : null}\r\n \r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SceneFiftyNine;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneFiftyNine from \"./Scene59\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nconst TemplateScene59 = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/59/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: time,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 59) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[1].fontSize\r\n );\r\n // setFontFamily(\r\n // block.sceneData.textArray[1].fontFamily\r\n // );\r\n setFontWeight(\r\n block.sceneData.textArray[1].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[1].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene59;\r\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport comingSoon from \"./../../../../Assets/images/icon-coming-soon.png\"\r\nimport home from \"./../../../../Assets/images/home-con.png\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"../../../../Utility/Loader/Loader\";\r\nconst SceneSixty = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const [usertext1, setUsertext1] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n const [mediaArray1, setMediaArray1] = React.useState([]);\r\n const [mediaArray2, setMediaArray2] = React.useState([]);\r\n const [showSlider, setshowSlider] = React.useState(true);\r\n\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(index);\r\n setZoomToggle(false);\r\n if (index != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 5000,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n const settings2 = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 6500,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n\r\n React.useEffect(() => {\r\n // props.mediaArray.map((data, index) => {\r\n // {\r\n // index <= 1\r\n // ? setMediaArray1((medias) => [...medias, data])\r\n // : index > 1 && index <= 3\r\n // ? setMediaArray2((media) => [...media, data])\r\n // : null;\r\n // }\r\n // });\r\n if (props.data) {\r\n mediaArray.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n });\r\n setUsertext1(textArrays[0].text);\r\n }\r\n }, [textArrays, props.data]);\r\n textArrays.map((data, index) => {\r\n window[\"layout\" + index] = [\r\n {\r\n key: \"test\" + index,\r\n x: data.x,\r\n y: data.y,\r\n width: data.boxWidth,\r\n height: data.boxHeight,\r\n zIndex: 1,\r\n },\r\n ];\r\n window[\"canResizable\" + index] = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n window[\"onLayoutChange\" + index] = (e, index) => {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: newArr[index].text,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: e[0].x,\r\n y: e[0].y,\r\n boxWidth: e[0].width,\r\n boxHeight: e[0].height,\r\n };\r\n props.getContent(newArr);\r\n textArrays = newArr;\r\n };\r\n });\r\n function getcontent(e, index, count) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n const maxlimit = count;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n text: charc,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n if (index >= 0 && index <= 5) {\r\n setshowSlider(false);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setMediaArray1([]);\r\n setMediaArray2([]);\r\n newArr.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n if (index == 3) {\r\n setshowSlider(true);\r\n }\r\n });\r\n }\r\n setDragoverId(0);\r\n //console.log(index)\r\n };\r\n return (\r\n \r\n {showSlider ? (\r\n \r\n
\r\n
\r\n
\r\n
\r\n
{\r\n setsctiveFontFamily(0);\r\n }}\r\n onChange={(e) => getcontent(e, 0, 12)}\r\n value={textArrays[0].text}\r\n >\r\n \r\n setsctiveFontFamily(3)}\r\n onChange={(e) => getcontent(e, 3, 60)}\r\n value={textArrays[3].text}\r\n >\r\n setsctiveFontFamily(4)}\r\n onChange={(e) => getcontent(e, 4, 36)}\r\n value={textArrays[4].text}\r\n >\r\n
\r\n \r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SceneSixty;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneSixty from \"./Scene60\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nconst TemplateScene60 = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/60/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: time,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 60) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[1].fontSize\r\n );\r\n // setFontFamily(\r\n // block.sceneData.textArray[1].fontFamily\r\n // );\r\n setFontWeight(\r\n block.sceneData.textArray[1].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[1].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene60;\r\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\n\r\nimport home from \"./../../../../Assets/images/home-con.png\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"../../../../Utility/Loader/Loader\";\r\nconst SceneSixtyOne = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const [usertext1, setUsertext1] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n const [mediaArray1, setMediaArray1] = React.useState([]);\r\n const [mediaArray2, setMediaArray2] = React.useState([]);\r\n const [showSlider, setshowSlider] = React.useState(true);\r\n\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(index);\r\n setZoomToggle(false);\r\n if (index != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 5000,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n const settings2 = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 6500,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n\r\n React.useEffect(() => {\r\n // props.mediaArray.map((data, index) => {\r\n // {\r\n // index <= 1\r\n // ? setMediaArray1((medias) => [...medias, data])\r\n // : index > 1 && index <= 3\r\n // ? setMediaArray2((media) => [...media, data])\r\n // : null;\r\n // }\r\n // });\r\n if (props.data) {\r\n mediaArray.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n });\r\n setUsertext1(textArrays[0].text);\r\n console.log(textArrays)\r\n }\r\n }, [textArrays, props.data]);\r\n textArrays.map((data, index) => {\r\n window[\"layout\" + index] = [\r\n {\r\n key: \"test\" + index,\r\n x: data.x,\r\n y: data.y,\r\n width: data.boxWidth,\r\n height: data.boxHeight,\r\n zIndex: 1,\r\n },\r\n ];\r\n window[\"canResizable\" + index] = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n window[\"onLayoutChange\" + index] = (e, index) => {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: newArr[index].text,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: e[0].x,\r\n y: e[0].y,\r\n boxWidth: e[0].width,\r\n boxHeight: e[0].height,\r\n };\r\n props.getContent(newArr);\r\n textArrays = newArr;\r\n };\r\n });\r\n function getcontent(e, index, count) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n const maxlimit = count;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n text: charc,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n if (index >= 0 && index <= 5) {\r\n setshowSlider(false);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setMediaArray1([]);\r\n setMediaArray2([]);\r\n newArr.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n if (index == 3) {\r\n setshowSlider(true);\r\n }\r\n });\r\n }\r\n setDragoverId(0);\r\n //console.log(index)\r\n };\r\n return (\r\n \r\n {showSlider ? (\r\n \r\n
\r\n
\r\n
\r\n
{\r\n setsctiveFontFamily(0);\r\n }}\r\n onChange={(e) => getcontent(e, 0, 12)}\r\n value={textArrays[0].text}\r\n >\r\n\r\n\r\n setsctiveFontFamily(3)}\r\n onChange={(e) => getcontent(e, 3, 60)}\r\n value={textArrays[3].text}\r\n >\r\n setsctiveFontFamily(4)}\r\n onChange={(e) => getcontent(e, 4, 36)}\r\n value={textArrays[4].text}\r\n >\r\n \r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n ) : null;\r\n })}\r\n
\r\n\r\n
\r\n \r\n {mediaArray.map((data, index) => {\r\n return index == 1 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n {mediaArray.map((data, index) => {\r\n return index == 2 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SceneSixtyOne;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneSixtyOne from \"./Scene61\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nconst TemplateScene61 = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/61/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: time,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 61) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[1].fontSize\r\n );\r\n // setFontFamily(\r\n // block.sceneData.textArray[1].fontFamily\r\n // );\r\n setFontWeight(\r\n block.sceneData.textArray[1].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[1].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene61;\r\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\n\r\nimport home from \"./../../../../Assets/images/home-con.png\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"../../../../Utility/Loader/Loader\";\r\nconst SceneSixtyTwo = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const [usertext1, setUsertext1] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n const [mediaArray1, setMediaArray1] = React.useState([]);\r\n const [mediaArray2, setMediaArray2] = React.useState([]);\r\n const [showSlider, setshowSlider] = React.useState(true);\r\n\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(index);\r\n setZoomToggle(false);\r\n if (index != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 5000,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n const settings2 = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 6500,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n\r\n React.useEffect(() => {\r\n // props.mediaArray.map((data, index) => {\r\n // {\r\n // index <= 1\r\n // ? setMediaArray1((medias) => [...medias, data])\r\n // : index > 1 && index <= 3\r\n // ? setMediaArray2((media) => [...media, data])\r\n // : null;\r\n // }\r\n // });\r\n if (props.data) {\r\n mediaArray.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n });\r\n setUsertext1(textArrays[0].text);\r\n console.log(textArrays)\r\n }\r\n }, [textArrays, props.data]);\r\n textArrays.map((data, index) => {\r\n window[\"layout\" + index] = [\r\n {\r\n key: \"test\" + index,\r\n x: data.x,\r\n y: data.y,\r\n width: data.boxWidth,\r\n height: data.boxHeight,\r\n zIndex: 1,\r\n },\r\n ];\r\n window[\"canResizable\" + index] = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n window[\"onLayoutChange\" + index] = (e, index) => {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: newArr[index].text,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: e[0].x,\r\n y: e[0].y,\r\n boxWidth: e[0].width,\r\n boxHeight: e[0].height,\r\n };\r\n props.getContent(newArr);\r\n textArrays = newArr;\r\n };\r\n });\r\n function getcontent(e, index, count) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n const maxlimit = count;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n text: charc,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n console.log(index)\r\n if (index >= 0 && index <= 5) {\r\n setshowSlider(false);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setMediaArray1([]);\r\n setMediaArray2([]);\r\n newArr.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n if (index == 3) {\r\n setshowSlider(true);\r\n }\r\n });\r\n }\r\n setDragoverId(0);\r\n //console.log(index)\r\n };\r\n return (\r\n \r\n {showSlider ? (\r\n \r\n
\r\n
\r\n setshowbg(\r\n true,\r\n mediaArray[2].url,\r\n mediaArray[2].type,\r\n false,\r\n \"2\"\r\n )\r\n }\r\n onDragEnter={(e) => handleDrag(e, 3)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 2)}\r\n />\r\n \r\n
\r\n
\r\n setshowbg(\r\n true,\r\n mediaArray[1].url,\r\n mediaArray[1].type,\r\n false,\r\n \"1\"\r\n )\r\n }\r\n onDragEnter={(e) => handleDrag(e, 2)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 1)}\r\n className={\r\n dragoverId == 1\r\n ? \"img-fluid userimg opacity\"\r\n : \"img-fluid userimg \"\r\n }\r\n alt=\"userImg\"\r\n />\r\n \r\n
\r\n
\r\n {textArrays.map((data, index) => {\r\n return (\r\n index <= 3 ?\r\n
setsctiveFontFamily(index)}\r\n >\r\n getcontent(e, index)}\r\n >\r\n \r\n : null\r\n )\r\n })}\r\n
\r\n setshowbg(\r\n true,\r\n mediaArray[0].url,\r\n mediaArray[0].type,\r\n false,\r\n \"0\"\r\n )\r\n }\r\n onDragEnter={(e) => handleDrag(e, 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 0)}\r\n className={\r\n dragoverId == 1\r\n ? \"img-fluid userimg opacity\"\r\n : \"img-fluid userimg \"\r\n }\r\n alt=\"userImg\"\r\n />\r\n \r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SceneSixtyTwo;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneSixtyTwo from \"./Scene62\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nconst TemplateScene62 = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/62/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: time,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 62) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[1].fontSize\r\n );\r\n // setFontFamily(\r\n // block.sceneData.textArray[1].fontFamily\r\n // );\r\n setFontWeight(\r\n block.sceneData.textArray[1].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[1].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene62;\r\n","/* eslint-disable jsx-a11y/alt-text */\r\n/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\n\r\nimport web from \"./../../../../Assets/images/global.png\"\r\nimport phone from \"./../../../../Assets/images/telephone.png\"\r\nimport user from \"./../../../../Assets/images/email(1).png\"\r\n\r\nimport home from \"./../../../../Assets/images/home-con.png\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"../../../../Utility/Loader/Loader\";\r\nconst SceneSixtyThree = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const [usertext1, setUsertext1] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n const [mediaArray1, setMediaArray1] = React.useState([]);\r\n const [mediaArray2, setMediaArray2] = React.useState([]);\r\n const [showSlider, setshowSlider] = React.useState(true);\r\n\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(index);\r\n setZoomToggle(false);\r\n if (index != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 5000,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n const settings2 = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 6500,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n\r\n React.useEffect(() => {\r\n // props.mediaArray.map((data, index) => {\r\n // {\r\n // index <= 1\r\n // ? setMediaArray1((medias) => [...medias, data])\r\n // : index > 1 && index <= 3\r\n // ? setMediaArray2((media) => [...media, data])\r\n // : null;\r\n // }\r\n // });\r\n if (props.data) {\r\n mediaArray.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n });\r\n setUsertext1(textArrays[0].text);\r\n console.log(textArrays)\r\n }\r\n }, [textArrays, props.data]);\r\n textArrays.map((data, index) => {\r\n window[\"layout\" + index] = [\r\n {\r\n key: \"test\" + index,\r\n x: data.x,\r\n y: data.y,\r\n width: data.boxWidth,\r\n height: data.boxHeight,\r\n zIndex: 1,\r\n },\r\n ];\r\n window[\"canResizable\" + index] = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n window[\"onLayoutChange\" + index] = (e, index) => {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: newArr[index].text,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: e[0].x,\r\n y: e[0].y,\r\n boxWidth: e[0].width,\r\n boxHeight: e[0].height,\r\n };\r\n props.getContent(newArr);\r\n textArrays = newArr;\r\n };\r\n });\r\n function getcontent(e, index, count) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n const maxlimit = count;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n text: charc,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n console.log(index)\r\n if (index >= 0 && index <= 5) {\r\n setshowSlider(false);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setMediaArray1([]);\r\n setMediaArray2([]);\r\n newArr.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n if (index == 3) {\r\n setshowSlider(true);\r\n }\r\n });\r\n }\r\n setDragoverId(0);\r\n //console.log(index)\r\n };\r\n return (\r\n \r\n {showSlider ? (\r\n \r\n
\r\n
\r\n
\r\n
\r\n setshowbg(\r\n true,\r\n mediaArray[1].url,\r\n mediaArray[1].type,\r\n false,\r\n \"1\"\r\n )\r\n }\r\n onDragEnter={(e) => handleDrag(e, 2)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 1)}\r\n />\r\n \r\n\r\n
\r\n {textArrays.map((data, index) => {\r\n return (\r\n index == 0 ?\r\n
setsctiveFontFamily(index)}\r\n >\r\n getcontent(e, index)}\r\n >\r\n \r\n : null\r\n )\r\n })}\r\n
\r\n
\r\n : null\r\n )\r\n })}\r\n
\r\n
\r\n
\r\n setshowbg(\r\n true,\r\n mediaArray[0].url,\r\n mediaArray[0].type,\r\n false,\r\n \"0\"\r\n )\r\n }\r\n onDragEnter={(e) => handleDrag(e, 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 0)}\r\n className={\r\n dragoverId == 1\r\n ? \"img-fluid userimg img-fluid logo opacity\"\r\n : \"img-fluid userimg img-fluid logo \"\r\n }\r\n alt=\"userImg\"\r\n />\r\n \r\n\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SceneSixtyThree;\r\n\r\n\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneSixtyThree from \"./Scene63\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nconst TemplateScene63 = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/63/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: time,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 63) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[1].fontSize\r\n );\r\n // setFontFamily(\r\n // block.sceneData.textArray[1].fontFamily\r\n // );\r\n setFontWeight(\r\n block.sceneData.textArray[1].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[1].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene63;\r\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\n\r\nimport home from \"./../../../../Assets/images/home-con.png\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"../../../../Utility/Loader/Loader\";\r\nconst SceneSixtyFour = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const [usertext1, setUsertext1] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n const [mediaArray1, setMediaArray1] = React.useState([]);\r\n const [mediaArray2, setMediaArray2] = React.useState([]);\r\n const [showSlider, setshowSlider] = React.useState(true);\r\n\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(index);\r\n setZoomToggle(false);\r\n if (index != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 5000,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n const settings2 = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 6500,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n\r\n React.useEffect(() => {\r\n // props.mediaArray.map((data, index) => {\r\n // {\r\n // index <= 1\r\n // ? setMediaArray1((medias) => [...medias, data])\r\n // : index > 1 && index <= 3\r\n // ? setMediaArray2((media) => [...media, data])\r\n // : null;\r\n // }\r\n // });\r\n if (props.data) {\r\n mediaArray.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n });\r\n setUsertext1(textArrays[0].text);\r\n console.log(textArrays)\r\n }\r\n }, [textArrays, props.data]);\r\n textArrays.map((data, index) => {\r\n window[\"layout\" + index] = [\r\n {\r\n key: \"test\" + index,\r\n x: data.x,\r\n y: data.y,\r\n width: data.boxWidth,\r\n height: data.boxHeight,\r\n zIndex: 1,\r\n },\r\n ];\r\n window[\"canResizable\" + index] = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n window[\"onLayoutChange\" + index] = (e, index) => {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: newArr[index].text,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: e[0].x,\r\n y: e[0].y,\r\n boxWidth: e[0].width,\r\n boxHeight: e[0].height,\r\n };\r\n props.getContent(newArr);\r\n textArrays = newArr;\r\n };\r\n });\r\n function getcontent(e, index, count) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n const maxlimit = count;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n text: charc,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n if (index >= 0 && index <= 5) {\r\n setshowSlider(false);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setMediaArray1([]);\r\n setMediaArray2([]);\r\n newArr.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n if (index == 3) {\r\n setshowSlider(true);\r\n }\r\n });\r\n }\r\n setDragoverId(0);\r\n //console.log(index)\r\n };\r\n return (\r\n \r\n {showSlider ? (\r\n \r\n
\r\n
\r\n setshowbg(\r\n true,\r\n mediaArray[2].url,\r\n mediaArray[2].type,\r\n false,\r\n \"2\"\r\n )\r\n }\r\n onDragEnter={(e) => handleDrag(e, 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 0)}\r\n />\r\n \r\n
\r\n
\r\n setshowbg(\r\n true,\r\n mediaArray[0].url,\r\n mediaArray[0].type,\r\n false,\r\n \"0\"\r\n )\r\n }\r\n onDragEnter={(e) => handleDrag(e, 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 0)}\r\n className={\r\n dragoverId == 1\r\n ? \"img-fluid userimg opacity\"\r\n : \"img-fluid userimg \"\r\n }\r\n alt=\"userImg\"\r\n />\r\n \r\n
\r\n
\r\n {\r\n setsctiveFontFamily(0);\r\n }}\r\n onChange={(e) => getcontent(e, 0, 12)}\r\n value={textArrays[0].text}\r\n >\r\n\r\n\r\n setsctiveFontFamily(3)}\r\n onChange={(e) => getcontent(e, 3, 60)}\r\n value={textArrays[3].text}\r\n >\r\n setsctiveFontFamily(4)}\r\n onChange={(e) => getcontent(e, 4, 36)}\r\n value={textArrays[4].text}\r\n >\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SceneSixtyFour;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneSixtyFour from \"./Scene64\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nconst TemplateScene64 = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/64/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: time,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 64) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[1].fontSize\r\n );\r\n // setFontFamily(\r\n // block.sceneData.textArray[1].fontFamily\r\n // );\r\n setFontWeight(\r\n block.sceneData.textArray[1].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[1].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene64;\r\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\n\r\nimport home from \"./../../../../Assets/images/home-con.png\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"../../../../Utility/Loader/Loader\";\r\nconst SceneSixtyFive = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const [usertext1, setUsertext1] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n const [mediaArray1, setMediaArray1] = React.useState([]);\r\n const [mediaArray2, setMediaArray2] = React.useState([]);\r\n const [showSlider, setshowSlider] = React.useState(true);\r\n\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(index);\r\n setZoomToggle(false);\r\n if (index != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 5000,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n const settings2 = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 6500,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n\r\n React.useEffect(() => {\r\n // props.mediaArray.map((data, index) => {\r\n // {\r\n // index <= 1\r\n // ? setMediaArray1((medias) => [...medias, data])\r\n // : index > 1 && index <= 3\r\n // ? setMediaArray2((media) => [...media, data])\r\n // : null;\r\n // }\r\n // });\r\n if (props.data) {\r\n mediaArray.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n });\r\n setUsertext1(textArrays[0].text);\r\n }\r\n }, [textArrays, props.data]);\r\n textArrays.map((data, index) => {\r\n window[\"layout\" + index] = [\r\n {\r\n key: \"test\" + index,\r\n x: data.x,\r\n y: data.y,\r\n width: data.boxWidth,\r\n height: data.boxHeight,\r\n zIndex: 1,\r\n },\r\n ];\r\n window[\"canResizable\" + index] = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n window[\"onLayoutChange\" + index] = (e, index) => {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: newArr[index].text,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: e[0].x,\r\n y: e[0].y,\r\n boxWidth: e[0].width,\r\n boxHeight: e[0].height,\r\n };\r\n props.getContent(newArr);\r\n textArrays = newArr;\r\n };\r\n });\r\n function getcontent(e, index, count) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n const maxlimit = count;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n text: charc,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n if (index >= 0 && index <= 5) {\r\n setshowSlider(false);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setMediaArray1([]);\r\n setMediaArray2([]);\r\n newArr.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n if (index == 3) {\r\n setshowSlider(true);\r\n }\r\n });\r\n }\r\n setDragoverId(0);\r\n //console.log(index)\r\n };\r\n return (\r\n \r\n {showSlider ? (\r\n \r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity \"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}>\r\n Scale\r\n
\r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n ) : null}\r\n
\r\n
\r\n setsctiveFontFamily(1)}\r\n onChange={(e) => getcontent(e, 1, 21)}\r\n value={textArrays[1].text}\r\n >\r\n
\r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity \"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}>\r\n Scale\r\n
\r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n {\r\n setsctiveFontFamily(0);\r\n }}\r\n onChange={(e) => getcontent(e, 0, 12)}\r\n value={textArrays[0].text}\r\n >\r\n\r\n\r\n setsctiveFontFamily(3)}\r\n onChange={(e) => getcontent(e, 3, 60)}\r\n value={textArrays[3].text}\r\n >\r\n {/* setsctiveFontFamily(4)}\r\n onChange={(e) => getcontent(e, 4, 36)}\r\n value={textArrays[4].text}\r\n > */}\r\n
\r\n \r\n ) : null;\r\n })}\r\n {mediaArray.map((data, index) => {\r\n return index == 1 ? (\r\n \r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity \"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}>\r\n Scale\r\n
\r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n setsctiveFontFamily(2)}\r\n onChange={(e) => getcontent(e, 2, 10)}\r\n value={textArrays[2].text}\r\n >\r\n
\r\n \r\n ) : null;\r\n })}\r\n \r\n\r\n \r\n ) : null}\r\n \r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SceneSixtyFive;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneSixtyFive from \"./Scene65\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nconst TemplateScene65 = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/65/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: time,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 65) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[1].fontSize\r\n );\r\n // setFontFamily(\r\n // block.sceneData.textArray[1].fontFamily\r\n // );\r\n setFontWeight(\r\n block.sceneData.textArray[1].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[1].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene65;\r\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\n\r\nimport home from \"./../../../../Assets/images/home-con.png\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"../../../../Utility/Loader/Loader\";\r\nconst SceneSixtySix = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const [usertext1, setUsertext1] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n const [mediaArray1, setMediaArray1] = React.useState([]);\r\n const [mediaArray2, setMediaArray2] = React.useState([]);\r\n const [showSlider, setshowSlider] = React.useState(true);\r\n\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(index);\r\n setZoomToggle(false);\r\n if (index != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 5000,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n const settings2 = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 6500,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n\r\n React.useEffect(() => {\r\n // props.mediaArray.map((data, index) => {\r\n // {\r\n // index <= 1\r\n // ? setMediaArray1((medias) => [...medias, data])\r\n // : index > 1 && index <= 3\r\n // ? setMediaArray2((media) => [...media, data])\r\n // : null;\r\n // }\r\n // });\r\n if (props.data) {\r\n mediaArray.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n });\r\n setUsertext1(textArrays[0].text);\r\n }\r\n }, [textArrays, props.data]);\r\n textArrays.map((data, index) => {\r\n window[\"layout\" + index] = [\r\n {\r\n key: \"test\" + index,\r\n x: data.x,\r\n y: data.y,\r\n width: data.boxWidth,\r\n height: data.boxHeight,\r\n zIndex: 1,\r\n },\r\n ];\r\n window[\"canResizable\" + index] = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n window[\"onLayoutChange\" + index] = (e, index) => {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: newArr[index].text,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: e[0].x,\r\n y: e[0].y,\r\n boxWidth: e[0].width,\r\n boxHeight: e[0].height,\r\n };\r\n props.getContent(newArr);\r\n textArrays = newArr;\r\n };\r\n });\r\n function getcontent(e, index, count) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n const maxlimit = count;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n text: charc,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n if (index >= 0 && index <= 5) {\r\n setshowSlider(false);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setMediaArray1([]);\r\n setMediaArray2([]);\r\n newArr.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n if (index == 3) {\r\n setshowSlider(true);\r\n }\r\n });\r\n }\r\n setDragoverId(0);\r\n //console.log(index)\r\n };\r\n return (\r\n \r\n {showSlider ? (\r\n \r\n
\r\n
\r\n
\r\n {\r\n setsctiveFontFamily(0);\r\n }}\r\n onChange={(e) => getcontent(e, 0, 12)}\r\n value={textArrays[0].text}\r\n >\r\n
\r\n
\r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n ) : null;\r\n })}\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index >= 1 && index < 3 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SceneSixtySix;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneSixtySix from \"./Scene66\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nconst TemplateScene66 = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/66/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: time,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 66) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[1].fontSize\r\n );\r\n // setFontFamily(\r\n // block.sceneData.textArray[1].fontFamily\r\n // );\r\n setFontWeight(\r\n block.sceneData.textArray[1].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[1].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene66;\r\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"../../../../Utility/Loader/Loader\";\r\nconst SceneSixtySeven = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n const [showSlider, setshowSlider] = React.useState(true);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n function setshowbg(option, scene, type, titleColor, index, textIndex, textshows) {\r\n\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(index);\r\n setZoomToggle(false);\r\n if (index != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n const settings = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 5000,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n const settings2 = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 6500,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n\r\n textArrays.map((data, index) => {\r\n window[\"layout\" + index] = [\r\n {\r\n key: \"test\" + index,\r\n x: data.x,\r\n y: data.y,\r\n width: data.boxWidth,\r\n height: data.boxHeight,\r\n zIndex: 1,\r\n },\r\n ];\r\n window[\"canResizable\" + index] = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n window[\"onLayoutChange\" + index] = (e, index) => {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: newArr[index].text,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: e[0].x,\r\n y: e[0].y,\r\n boxWidth: e[0].width,\r\n boxHeight: e[0].height,\r\n };\r\n props.getContent(newArr);\r\n textArrays = newArr;\r\n };\r\n });\r\n function getcontent(e, index) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n const maxlimit = 60;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n text: charc,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n if (index >= 0 && index <= 3) {\r\n setshowSlider(false);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n // newArr.map((data, index) => {\r\n // {\r\n // index <= 1\r\n // ? setMediaArray1((media2) => [...media2, data])\r\n // : index > 1 && index <= 3\r\n // ? setMediaArray2((media3) => [...media3, data])\r\n // : null;\r\n // }\r\n // if (index == 3) {\r\n // setshowSlider(true);\r\n // }\r\n // });\r\n }\r\n //console.log(index)\r\n };\r\n return (\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n setshowbg(\r\n true,\r\n mediaArray[2].url,\r\n mediaArray[2].type,\r\n false,\r\n 2\r\n )\r\n }\r\n onDragEnter={(e) => handleDrag(e, 3)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 2)}\r\n className={\r\n dragoverId == 3 ? \"bg box-1 opacity\" : \"bg box-1 \"\r\n }\r\n style={{\r\n backgroundImage:\r\n \"url(\" + apiPath + mediaArray[2].url + \") \",\r\n }}\r\n >\r\n {imgindex == 2 ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(mediaArray[2].url, 2)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
\r\n showCroppedImage(mediaArray[2].url)\r\n }\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == 2 && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n
\r\n
\r\n
\r\n {textArrays.map((data, index) => {\r\n return index == 0 ? (\r\n
setshowbg(false, \"\", \"\", false, 15, index, true)}\r\n // onClick={() => setshowbg(false, \"\", \"\", false,\"\")}\r\n className={\r\n \"child-container form-control border size-auto \" +\r\n data.fontAlignment +\r\n \" \" +\r\n data.fontCapitalize\r\n }\r\n onChange={(e) => getcontent(e, index)}\r\n value={data.text}\r\n >\r\n ) : null;\r\n })}\r\n \r\n
\r\n
\r\n
\r\n setshowbg(\r\n true,\r\n mediaArray[0].url,\r\n mediaArray[0].type,\r\n false,\r\n 0\r\n )\r\n }\r\n onDragEnter={(e) => handleDrag(e, 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 0)}\r\n className={\r\n dragoverId == 1 ? \"bg box-1 opacity\" : \"bg box-1 \"\r\n }\r\n style={{\r\n backgroundImage:\r\n \"url(\" + apiPath + mediaArray[0].url + \") \",\r\n }}\r\n >\r\n {imgindex == 0 ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(mediaArray[0].url, 0)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
\r\n showCroppedImage(mediaArray[0].url)\r\n }\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == 0 && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n
\r\n setshowbg(\r\n true,\r\n mediaArray[1].url,\r\n mediaArray[1].type,\r\n false,\r\n 1\r\n )\r\n }\r\n onDragEnter={(e) => handleDrag(e, 2)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 1)}\r\n className={\r\n dragoverId == 2 ? \"bg box-1 opacity\" : \"bg box-1 \"\r\n }\r\n style={{\r\n backgroundImage:\r\n \"url(\" + apiPath + mediaArray[1].url + \") \",\r\n }}\r\n >\r\n {imgindex == 1 ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(mediaArray[1].url, 1)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
\r\n showCroppedImage(mediaArray[1].url)\r\n }\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n {textShow && textArrays[0].text.length >= 40 ? = 60 ? \"char-counter red\" : \"char-counter \"}> {60 - textArrays[0].text.length}
: null}\r\n\r\n \r\n );\r\n};\r\n\r\nexport default SceneSixtySeven;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneSixtySeven from \"./Scene67\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nconst TemplateScene67 = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/67/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 6,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 6,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 6,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 6,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 6,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 6,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: 6,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: 6,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: 6,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: 6,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n //getData();\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 67) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[0].fontSize\r\n );\r\n setFontFamily(\r\n block.sceneData.textArray[0].fontFamily\r\n );\r\n setFontWeight(\r\n block.sceneData.textArray[0].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[0].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 6700);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 6700);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene67;\r\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"../../../../Utility/Loader/Loader\";\r\nconst SceneSixtyEight = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n const [mediaArray1, setMediaArray1] = React.useState([]);\r\n const [mediaArray2, setMediaArray2] = React.useState([]);\r\n const [showSlider, setshowSlider] = React.useState(true);\r\n\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => {});\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(index);\r\n setZoomToggle(false);\r\n if (index != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 5000,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n const settings2 = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 6500,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n\r\n React.useEffect(() => {\r\n // props.mediaArray.map((data, index) => {\r\n // {\r\n // index <= 1\r\n // ? setMediaArray1((medias) => [...medias, data])\r\n // : index > 1 && index <= 3\r\n // ? setMediaArray2((media) => [...media, data])\r\n // : null;\r\n // }\r\n // });\r\n if (props.data) {\r\n mediaArray.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n });\r\n }\r\n }, [textArrays, props.data]);\r\n textArrays.map((data, index) => {\r\n window[\"layout\" + index] = [\r\n {\r\n key: \"test\" + index,\r\n x: data.x,\r\n y: data.y,\r\n width: data.boxWidth,\r\n height: data.boxHeight,\r\n zIndex: 1,\r\n },\r\n ];\r\n window[\"canResizable\" + index] = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n window[\"onLayoutChange\" + index] = (e, index) => {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: newArr[index].text,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: e[0].x,\r\n y: e[0].y,\r\n boxWidth: e[0].width,\r\n boxHeight: e[0].height,\r\n };\r\n props.getContent(newArr);\r\n textArrays = newArr;\r\n };\r\n });\r\n function getcontent(e, index) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n const maxlimit = 14;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n text: charc,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n if (index >= 0 && index <= 3) {\r\n setshowSlider(false);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setMediaArray1([]);\r\n setMediaArray2([]);\r\n newArr.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n if (index == 3) {\r\n setshowSlider(true);\r\n }\r\n });\r\n }\r\n setDragoverId(0);\r\n //console.log(index)\r\n };\r\n return (\r\n \r\n {showSlider ? (\r\n \r\n
\r\n
\r\n {\r\n setsctiveFontFamily(0);\r\n }}\r\n onChange={(e) => getcontent(e, 0)}\r\n value={textArrays[0].text}\r\n >\r\n
\r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index < 2 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n ) : null;\r\n })}\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index > 1 && index <= 5 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SceneSixtyEight;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneSixtyEight from \"./Scene68\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nconst TemplateScene68 = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/68/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.68\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: time,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 68) {\r\n setUpatedData(block.sceneData);\r\n // console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[1].fontSize\r\n );\r\n setFontFamily(\r\n block.sceneData.textArray[1].fontFamily\r\n );\r\n setFontWeight(\r\n block.sceneData.textArray[1].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[1].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene68;\r\n","/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport Scenes from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\n\r\nimport trash from \"./../../../../Assets/images/templates/trash.svg\";\r\nimport add from \"./../../../../Assets/images/templates/add.svg\";\r\nimport Slider from \"react-slick\";\r\nimport $ from \"jquery\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { CommentTwoTone } from \"@material-ui/icons\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"./../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneFourtyTwo = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const [usertext1, setUsertext1] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n const [mediaArray1, setMediaArray1] = React.useState([]);\r\n const [mediaArray2, setMediaArray2] = React.useState([]);\r\n const [showSlider, setshowSlider] = React.useState(true);\r\n\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(index);\r\n setZoomToggle(false);\r\n if (index != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 5000,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n const settings2 = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 6500,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n\r\n React.useEffect(() => {\r\n // props.mediaArray.map((data, index) => {\r\n // {\r\n // index <= 1\r\n // ? setMediaArray1((medias) => [...medias, data])\r\n // : index > 1 && index <= 3\r\n // ? setMediaArray2((media) => [...media, data])\r\n // : null;\r\n // }\r\n // });\r\n if (props.data) {\r\n mediaArray.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n });\r\n setUsertext1(textArrays[0].text);\r\n console.log(textArrays)\r\n }\r\n }, [textArrays, props.data]);\r\n textArrays.map((data, index) => {\r\n window[\"layout\" + index] = [\r\n {\r\n key: \"test\" + index,\r\n x: data.x,\r\n y: data.y,\r\n width: data.boxWidth,\r\n height: data.boxHeight,\r\n zIndex: 1,\r\n },\r\n ];\r\n window[\"canResizable\" + index] = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n window[\"onLayoutChange\" + index] = (e, index) => {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: newArr[index].text,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: e[0].x,\r\n y: e[0].y,\r\n boxWidth: e[0].width,\r\n boxHeight: e[0].height,\r\n };\r\n props.getContent(newArr);\r\n textArrays = newArr;\r\n };\r\n });\r\n function getcontent(e, index, count) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n const maxlimit = count;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n text: charc,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n if (index >= 0 && index <= 5) {\r\n setshowSlider(false);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setMediaArray1([]);\r\n setMediaArray2([]);\r\n newArr.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n if (index == 3) {\r\n setshowSlider(true);\r\n }\r\n });\r\n }\r\n setDragoverId(0);\r\n //console.log(index)\r\n };\r\n\r\n \r\n return (\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n {/* {layout.map((single) => {\r\n return (\r\n setshowbg(false, \"\", \"\", false, '10', true)}\r\n className={\r\n \"child-container form-control border size-auto \" +\r\n props.setAlignment +\r\n \" \" +\r\n props.setTextTransform\r\n }\r\n onChange={getcontent}\r\n value={content}\r\n >\r\n );\r\n })} */}\r\n {\r\n setsctiveFontFamily(0);\r\n }}\r\n onChange={(e) => getcontent(e, 0, 12)}\r\n value={textArrays[0].text}\r\n >\r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n
\r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n
\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n {/* {textShow && content.length >= 45 ? = 65 ? \"char-counter red\" : \"char-counter \"}> {65 - content.length}
: null} */}\r\n \r\n );\r\n};\r\nexport default SceneFourtyTwo;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneSixtyNine from \"./Scene69\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nconst TemplateScene69 = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/69/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: time,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 69) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[1].fontSize\r\n );\r\n // setFontFamily(\r\n // block.sceneData.textArray[1].fontFamily\r\n // );\r\n setFontWeight(\r\n block.sceneData.textArray[1].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[1].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene69;\r\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\n\r\nimport home from \"./../../../../Assets/images/home-con.png\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"../../../../Utility/Loader/Loader\";\r\nconst SceneSeventy = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const [usertext1, setUsertext1] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n const [mediaArray1, setMediaArray1] = React.useState([]);\r\n const [mediaArray2, setMediaArray2] = React.useState([]);\r\n const [showSlider, setshowSlider] = React.useState(true);\r\n\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(index);\r\n setZoomToggle(false);\r\n if (index != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 5000,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n const settings2 = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 6500,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n\r\n React.useEffect(() => {\r\n // props.mediaArray.map((data, index) => {\r\n // {\r\n // index <= 1\r\n // ? setMediaArray1((medias) => [...medias, data])\r\n // : index > 1 && index <= 3\r\n // ? setMediaArray2((media) => [...media, data])\r\n // : null;\r\n // }\r\n // });\r\n if (props.data) {\r\n mediaArray.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n });\r\n setUsertext1(textArrays[0].text);\r\n }\r\n }, [textArrays, props.data]);\r\n textArrays.map((data, index) => {\r\n window[\"layout\" + index] = [\r\n {\r\n key: \"test\" + index,\r\n x: data.x,\r\n y: data.y,\r\n width: data.boxWidth,\r\n height: data.boxHeight,\r\n zIndex: 1,\r\n },\r\n ];\r\n window[\"canResizable\" + index] = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n window[\"onLayoutChange\" + index] = (e, index) => {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: newArr[index].text,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: e[0].x,\r\n y: e[0].y,\r\n boxWidth: e[0].width,\r\n boxHeight: e[0].height,\r\n };\r\n props.getContent(newArr);\r\n textArrays = newArr;\r\n };\r\n });\r\n function getcontent(e, index, count) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n const maxlimit = count;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n text: charc,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n if (index >= 0 && index <= 5) {\r\n setshowSlider(false);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setMediaArray1([]);\r\n setMediaArray2([]);\r\n newArr.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n if (index == 3) {\r\n setshowSlider(true);\r\n }\r\n });\r\n }\r\n setDragoverId(0);\r\n //console.log(index)\r\n };\r\n return (\r\n \r\n {showSlider ? (\r\n \r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity \"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}>\r\n Scale\r\n
\r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n ) : null}\r\n
\r\n \r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity \"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}>\r\n Scale\r\n
\r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n \r\n\r\n setsctiveFontFamily(3)}\r\n onChange={(e) => getcontent(e, 3, 60)}\r\n value={textArrays[3].text}\r\n >\r\n {/* setsctiveFontFamily(4)}\r\n onChange={(e) => getcontent(e, 4, 36)}\r\n value={textArrays[4].text}\r\n > */}\r\n
\r\n \r\n ) : null;\r\n })}\r\n {mediaArray.map((data, index) => {\r\n return index == 1 ? (\r\n \r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity \"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}>\r\n Scale\r\n
\r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SceneSeventy;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneSeventy from \"./Scene70\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nconst TemplateScene70 = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/70/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: time,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 70) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[1].fontSize\r\n );\r\n // setFontFamily(\r\n // block.sceneData.textArray[1].fontFamily\r\n // );\r\n setFontWeight(\r\n block.sceneData.textArray[1].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[1].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene70;\r\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\n\r\nimport home from \"./../../../../Assets/images/home-con.png\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"../../../../Utility/Loader/Loader\";\r\nconst SceneSeventyOne = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const [usertext1, setUsertext1] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n const [mediaArray1, setMediaArray1] = React.useState([]);\r\n const [mediaArray2, setMediaArray2] = React.useState([]);\r\n const [showSlider, setshowSlider] = React.useState(true);\r\n\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(index);\r\n setZoomToggle(false);\r\n if (index != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 5000,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n const settings2 = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 6500,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n\r\n React.useEffect(() => {\r\n // props.mediaArray.map((data, index) => {\r\n // {\r\n // index <= 1\r\n // ? setMediaArray1((medias) => [...medias, data])\r\n // : index > 1 && index <= 3\r\n // ? setMediaArray2((media) => [...media, data])\r\n // : null;\r\n // }\r\n // });\r\n if (props.data) {\r\n mediaArray.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n });\r\n setUsertext1(textArrays[0].text);\r\n }\r\n }, [textArrays, props.data]);\r\n textArrays.map((data, index) => {\r\n window[\"layout\" + index] = [\r\n {\r\n key: \"test\" + index,\r\n x: data.x,\r\n y: data.y,\r\n width: data.boxWidth,\r\n height: data.boxHeight,\r\n zIndex: 1,\r\n },\r\n ];\r\n window[\"canResizable\" + index] = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n window[\"onLayoutChange\" + index] = (e, index) => {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: newArr[index].text,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: e[0].x,\r\n y: e[0].y,\r\n boxWidth: e[0].width,\r\n boxHeight: e[0].height,\r\n };\r\n props.getContent(newArr);\r\n textArrays = newArr;\r\n };\r\n });\r\n function getcontent(e, index, count) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n const maxlimit = count;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n text: charc,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n if (index >= 0 && index <= 5) {\r\n setshowSlider(false);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setMediaArray1([]);\r\n setMediaArray2([]);\r\n newArr.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n if (index == 3) {\r\n setshowSlider(true);\r\n }\r\n });\r\n }\r\n setDragoverId(0);\r\n //console.log(index)\r\n };\r\n return (\r\n \r\n {showSlider ? (\r\n \r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity \"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}>\r\n Scale\r\n
\r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n ) : null}\r\n
\r\n \r\n
\r\n
\r\n \r\n\r\n\r\n setsctiveFontFamily(3)}\r\n onChange={(e) => getcontent(e, 3, 60)}\r\n value={textArrays[3].text}\r\n >\r\n {/* setsctiveFontFamily(4)}\r\n onChange={(e) => getcontent(e, 4, 36)}\r\n value={textArrays[4].text}\r\n > */}\r\n
\r\n
\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity \"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}>\r\n Scale\r\n
\r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SceneSeventyOne;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneSeventyOne from \"./Scene71\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nconst TemplateScene71 = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/71/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: time,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 71) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[1].fontSize\r\n );\r\n // setFontFamily(\r\n // block.sceneData.textArray[1].fontFamily\r\n // );\r\n setFontWeight(\r\n block.sceneData.textArray[1].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[1].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene71;\r\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\n\r\nimport home from \"./../../../../Assets/images/home-con.png\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"../../../../Utility/Loader/Loader\";\r\nconst SceneSeventyTwo = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const [usertext1, setUsertext1] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n const [mediaArray1, setMediaArray1] = React.useState([]);\r\n const [mediaArray2, setMediaArray2] = React.useState([]);\r\n const [showSlider, setshowSlider] = React.useState(true);\r\n\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(index);\r\n setZoomToggle(false);\r\n if (index != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 5000,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n const settings2 = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 6500,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n\r\n React.useEffect(() => {\r\n // props.mediaArray.map((data, index) => {\r\n // {\r\n // index <= 1\r\n // ? setMediaArray1((medias) => [...medias, data])\r\n // : index > 1 && index <= 3\r\n // ? setMediaArray2((media) => [...media, data])\r\n // : null;\r\n // }\r\n // });\r\n if (props.data) {\r\n mediaArray.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n });\r\n setUsertext1(textArrays[0].text);\r\n }\r\n }, [textArrays, props.data]);\r\n textArrays.map((data, index) => {\r\n window[\"layout\" + index] = [\r\n {\r\n key: \"test\" + index,\r\n x: data.x,\r\n y: data.y,\r\n width: data.boxWidth,\r\n height: data.boxHeight,\r\n zIndex: 1,\r\n },\r\n ];\r\n window[\"canResizable\" + index] = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n window[\"onLayoutChange\" + index] = (e, index) => {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: newArr[index].text,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: e[0].x,\r\n y: e[0].y,\r\n boxWidth: e[0].width,\r\n boxHeight: e[0].height,\r\n };\r\n props.getContent(newArr);\r\n textArrays = newArr;\r\n };\r\n });\r\n function getcontent(e, index, count) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n const maxlimit = count;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n text: charc,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n if (index >= 0 && index <= 5) {\r\n setshowSlider(false);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setMediaArray1([]);\r\n setMediaArray2([]);\r\n newArr.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n if (index == 3) {\r\n setshowSlider(true);\r\n }\r\n });\r\n }\r\n setDragoverId(0);\r\n //console.log(index)\r\n };\r\n return (\r\n \r\n {showSlider ? (\r\n \r\n
\r\n
\r\n
\r\n {\r\n setsctiveFontFamily(0);\r\n }}\r\n onChange={(e) => getcontent(e, 0, 12)}\r\n value={textArrays[0].text}\r\n >\r\n
\r\n
\r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n ) : null;\r\n })}\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index >= 1 && index < 3 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SceneSeventyTwo;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneSeventyTwo from \"./Scene72\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nconst TemplateScene72 = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/72/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: time,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 72) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[1].fontSize\r\n );\r\n // setFontFamily(\r\n // block.sceneData.textArray[1].fontFamily\r\n // );\r\n setFontWeight(\r\n block.sceneData.textArray[1].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[1].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene72;\r\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport Sliders from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"../../../../Utility/Loader/Loader\";\r\nconst SceneSeventyThree = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [textShow, setTextShow] = React.useState(false);\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n const [showSlider, setshowSlider] = React.useState(true);\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n function setshowbg(option, scene, type, titleColor, index, textIndex, textshows) {\r\n\r\n if (textshows) {\r\n setTextShow(true)\r\n }\r\n else {\r\n setTextShow(false)\r\n }\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(index);\r\n setZoomToggle(false);\r\n if (index != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n const settings = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 5000,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n const settings2 = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 6500,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n\r\n textArrays.map((data, index) => {\r\n window[\"layout\" + index] = [\r\n {\r\n key: \"test\" + index,\r\n x: data.x,\r\n y: data.y,\r\n width: data.boxWidth,\r\n height: data.boxHeight,\r\n zIndex: 1,\r\n },\r\n ];\r\n window[\"canResizable\" + index] = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n window[\"onLayoutChange\" + index] = (e, index) => {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: newArr[index].text,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: e[0].x,\r\n y: e[0].y,\r\n boxWidth: e[0].width,\r\n boxHeight: e[0].height,\r\n };\r\n props.getContent(newArr);\r\n textArrays = newArr;\r\n };\r\n });\r\n function getcontent(e, index) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n const maxlimit = 60;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n text: charc,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n if (index >= 0 && index <= 3) {\r\n setshowSlider(false);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n // newArr.map((data, index) => {\r\n // {\r\n // index <= 1\r\n // ? setMediaArray1((media2) => [...media2, data])\r\n // : index > 1 && index <= 3\r\n // ? setMediaArray2((media3) => [...media3, data])\r\n // : null;\r\n // }\r\n // if (index == 3) {\r\n // setshowSlider(true);\r\n // }\r\n // });\r\n }\r\n //console.log(index)\r\n };\r\n return (\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n setshowbg(\r\n true,\r\n mediaArray[2].url,\r\n mediaArray[2].type,\r\n false,\r\n 2\r\n )\r\n }\r\n onDragEnter={(e) => handleDrag(e, 3)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 2)}\r\n className={\r\n dragoverId == 3 ? \"bg box-1 opacity\" : \"bg box-1 \"\r\n }\r\n style={{\r\n backgroundImage:\r\n \"url(\" + apiPath + mediaArray[2].url + \") \",\r\n }}\r\n >\r\n {imgindex == 2 ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(mediaArray[2].url, 2)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
\r\n showCroppedImage(mediaArray[2].url)\r\n }\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == 2 && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n
\r\n
\r\n
\r\n {textArrays.map((data, index) => {\r\n return index == 0 ? (\r\n
setshowbg(false, \"\", \"\", false, 15, index, true)}\r\n // onClick={() => setshowbg(false, \"\", \"\", false,\"\")}\r\n className={\r\n \"child-container form-control border size-auto \" +\r\n data.fontAlignment +\r\n \" \" +\r\n data.fontCapitalize\r\n }\r\n onChange={(e) => getcontent(e, index)}\r\n value={data.text}\r\n >\r\n ) : null;\r\n })}\r\n \r\n
\r\n
\r\n
\r\n setshowbg(\r\n true,\r\n mediaArray[0].url,\r\n mediaArray[0].type,\r\n false,\r\n 0\r\n )\r\n }\r\n onDragEnter={(e) => handleDrag(e, 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 0)}\r\n className={\r\n dragoverId == 1 ? \"bg box-1 opacity\" : \"bg box-1 \"\r\n }\r\n style={{\r\n backgroundImage:\r\n \"url(\" + apiPath + mediaArray[0].url + \") \",\r\n }}\r\n >\r\n {imgindex == 0 ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(mediaArray[0].url, 0)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
\r\n showCroppedImage(mediaArray[0].url)\r\n }\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == 0 && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n
\r\n setshowbg(\r\n true,\r\n mediaArray[1].url,\r\n mediaArray[1].type,\r\n false,\r\n 1\r\n )\r\n }\r\n onDragEnter={(e) => handleDrag(e, 2)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 1)}\r\n className={\r\n dragoverId == 2 ? \"bg box-1 opacity\" : \"bg box-1 \"\r\n }\r\n style={{\r\n backgroundImage:\r\n \"url(\" + apiPath + mediaArray[1].url + \") \",\r\n }}\r\n >\r\n {imgindex == 1 ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
\r\n filterBtnClick(mediaArray[1].url, 1)\r\n }\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
\r\n showCroppedImage(mediaArray[1].url)\r\n }\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n {textShow && textArrays[0].text.length >= 40 ? = 60 ? \"char-counter red\" : \"char-counter \"}> {60 - textArrays[0].text.length}
: null}\r\n\r\n \r\n );\r\n};\r\n\r\nexport default SceneSeventyThree;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport Scene from \"./../../../../Assets/images/templates/img11.png\";\r\nimport Scene2 from \"./../../../../Assets/images/templates/img12.png\";\r\nimport Scene3 from \"./../../../../Assets/images/templates/img13.png\";\r\nimport Scene4 from \"./../../../../Assets/images/templates/img14.png\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneSeventyThree from \"./Scene73\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nconst TemplateScene73 = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/73/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match; \r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 6,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 6,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 6,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 6,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 6,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 6,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: 6,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: 6,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: 6,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: 6,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setUpatedData(data);\r\n setData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n //getData();\r\n console.log(response);\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 73) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[0].fontSize\r\n );\r\n setFontFamily(\r\n block.sceneData.textArray[0].fontFamily\r\n );\r\n setFontWeight(\r\n block.sceneData.textArray[0].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[0].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 7300);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 7300);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene73;\r\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\n\r\nimport home from \"./../../../../Assets/images/home-con.png\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"../../../../Utility/Loader/Loader\";\r\nconst SceneSeventyFour = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const [usertext1, setUsertext1] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n const [mediaArray1, setMediaArray1] = React.useState([]);\r\n const [mediaArray2, setMediaArray2] = React.useState([]);\r\n const [showSlider, setshowSlider] = React.useState(true);\r\n\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(index);\r\n setZoomToggle(false);\r\n if (index != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 5000,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n const settings2 = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 6500,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n\r\n React.useEffect(() => {\r\n // props.mediaArray.map((data, index) => {\r\n // {\r\n // index <= 1\r\n // ? setMediaArray1((medias) => [...medias, data])\r\n // : index > 1 && index <= 3\r\n // ? setMediaArray2((media) => [...media, data])\r\n // : null;\r\n // }\r\n // });\r\n if (props.data) {\r\n mediaArray.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n });\r\n setUsertext1(textArrays[0].text);\r\n }\r\n }, [textArrays, props.data]);\r\n textArrays.map((data, index) => {\r\n window[\"layout\" + index] = [\r\n {\r\n key: \"test\" + index,\r\n x: data.x,\r\n y: data.y,\r\n width: data.boxWidth,\r\n height: data.boxHeight,\r\n zIndex: 1,\r\n },\r\n ];\r\n window[\"canResizable\" + index] = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n window[\"onLayoutChange\" + index] = (e, index) => {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: newArr[index].text,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: e[0].x,\r\n y: e[0].y,\r\n boxWidth: e[0].width,\r\n boxHeight: e[0].height,\r\n };\r\n props.getContent(newArr);\r\n textArrays = newArr;\r\n };\r\n });\r\n function getcontent(e, index, count) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n const maxlimit = count;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n text: charc,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n if (index >= 0 && index <= 5) {\r\n setshowSlider(false);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setMediaArray1([]);\r\n setMediaArray2([]);\r\n newArr.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n if (index == 3) {\r\n setshowSlider(true);\r\n }\r\n });\r\n }\r\n setDragoverId(0);\r\n //console.log(index)\r\n };\r\n return (\r\n \r\n {showSlider ? (\r\n \r\n
\r\n
\r\n {\r\n setsctiveFontFamily(0);\r\n }}\r\n onChange={(e) => getcontent(e, 0, 12)}\r\n value={textArrays[0].text}\r\n >\r\n \r\n setsctiveFontFamily(3)}\r\n onChange={(e) => getcontent(e, 3, 60)}\r\n value={textArrays[3].text}\r\n >\r\n setsctiveFontFamily(4)}\r\n onChange={(e) => getcontent(e, 4, 36)}\r\n value={textArrays[4].text}\r\n >\r\n
\r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n data-tut={index == 0 ? \"reactour__5\" : null}\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n ) : null;\r\n })}\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index >= 1 && index < 3 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n {mediaArray.map((data, index) => {\r\n return index == 3 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SceneSeventyFour;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneSeventyFour from \"./Scene74\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nimport { disableBodyScroll, enableBodyScroll } from \"body-scroll-lock\";\r\nimport steps from \"./../../Guide/steps\"\r\nimport Tour from \"reactour\";\r\nconst TemplateScene74 = (props) => {\r\n const disableBody = target => disableBodyScroll(target);\r\n const enableBody = target => enableBodyScroll(target);\r\n const [isTourOpen, setIsTourOpen] = React.useState(false);\r\n const [isShowingMore, setIsShowingMore] = React.useState(false);\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/74/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: time,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 74) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[1].fontSize\r\n );\r\n // setFontFamily(\r\n // block.sceneData.textArray[1].fontFamily\r\n // );\r\n setFontWeight(\r\n block.sceneData.textArray[1].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[1].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n const closeTour = () => {\r\n setIsTourOpen(false)\r\n };\r\n const showTour = () => {\r\n setIsTourOpen(true)\r\n };\r\n const accentColor = \"#5cb7b7\";\r\n return (\r\n \r\n\r\n Guide
\r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene74;\r\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\n\r\nimport home from \"./../../../../Assets/images/home-con.png\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"../../../../Utility/Loader/Loader\";\r\nconst SceneSeventyFive = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const [usertext1, setUsertext1] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n const [mediaArray1, setMediaArray1] = React.useState([]);\r\n const [mediaArray2, setMediaArray2] = React.useState([]);\r\n const [showSlider, setshowSlider] = React.useState(true);\r\n\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(index);\r\n setZoomToggle(false);\r\n if (index != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 5000,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n const settings2 = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 6500,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n\r\n React.useEffect(() => {\r\n // props.mediaArray.map((data, index) => {\r\n // {\r\n // index <= 1\r\n // ? setMediaArray1((medias) => [...medias, data])\r\n // : index > 1 && index <= 3\r\n // ? setMediaArray2((media) => [...media, data])\r\n // : null;\r\n // }\r\n // });\r\n if (props.data) {\r\n mediaArray.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n });\r\n setUsertext1(textArrays[0].text);\r\n }\r\n }, [textArrays, props.data]);\r\n textArrays.map((data, index) => {\r\n window[\"layout\" + index] = [\r\n {\r\n key: \"test\" + index,\r\n x: data.x,\r\n y: data.y,\r\n width: data.boxWidth,\r\n height: data.boxHeight,\r\n zIndex: 1,\r\n },\r\n ];\r\n window[\"canResizable\" + index] = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n window[\"onLayoutChange\" + index] = (e, index) => {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: newArr[index].text,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: e[0].x,\r\n y: e[0].y,\r\n boxWidth: e[0].width,\r\n boxHeight: e[0].height,\r\n };\r\n props.getContent(newArr);\r\n textArrays = newArr;\r\n };\r\n });\r\n function getcontent(e, index, count) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n const maxlimit = count;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n text: charc,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n if (index >= 0 && index <= 5) {\r\n setshowSlider(false);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setMediaArray1([]);\r\n setMediaArray2([]);\r\n newArr.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n if (index == 3) {\r\n setshowSlider(true);\r\n }\r\n });\r\n }\r\n setDragoverId(0);\r\n //console.log(index)\r\n };\r\n return (\r\n \r\n {showSlider ? (\r\n \r\n
\r\n
\r\n\r\n setsctiveFontFamily(3)}\r\n onChange={(e) => getcontent(e, 3, 60)}\r\n value={textArrays[3].text}\r\n >\r\n\r\n
\r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n ) : null;\r\n })}\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index >= 1 && index < 3 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n {mediaArray.map((data, index) => {\r\n return index == 3 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n \r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SceneSeventyFive;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneSeventyFive from \"./Scene75\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"./../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nconst TemplateScene75 = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/75/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: time,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 75) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[1].fontSize\r\n );\r\n // setFontFamily(\r\n // block.sceneData.textArray[1].fontFamily\r\n // );\r\n setFontWeight(\r\n block.sceneData.textArray[1].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[1].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene75;\r\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\n\r\nimport home from \"./../../../../Assets/images/home-con.png\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"../../../../Utility/Loader/Loader\";\r\nconst SceneSeventySix = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const [usertext1, setUsertext1] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n const [mediaArray1, setMediaArray1] = React.useState([]);\r\n const [mediaArray2, setMediaArray2] = React.useState([]);\r\n const [showSlider, setshowSlider] = React.useState(true);\r\n\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(index);\r\n setZoomToggle(false);\r\n if (index != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 5000,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n const settings2 = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 6500,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n\r\n React.useEffect(() => {\r\n // props.mediaArray.map((data, index) => {\r\n // {\r\n // index <= 1\r\n // ? setMediaArray1((medias) => [...medias, data])\r\n // : index > 1 && index <= 3\r\n // ? setMediaArray2((media) => [...media, data])\r\n // : null;\r\n // }\r\n // });\r\n if (props.data) {\r\n mediaArray.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n });\r\n setUsertext1(textArrays[0].text);\r\n }\r\n }, [textArrays, props.data]);\r\n textArrays.map((data, index) => {\r\n window[\"layout\" + index] = [\r\n {\r\n key: \"test\" + index,\r\n x: data.x,\r\n y: data.y,\r\n width: data.boxWidth,\r\n height: data.boxHeight,\r\n zIndex: 1,\r\n },\r\n ];\r\n window[\"canResizable\" + index] = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n window[\"onLayoutChange\" + index] = (e, index) => {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: newArr[index].text,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: e[0].x,\r\n y: e[0].y,\r\n boxWidth: e[0].width,\r\n boxHeight: e[0].height,\r\n };\r\n props.getContent(newArr);\r\n textArrays = newArr;\r\n };\r\n });\r\n function getcontent(e, index, count) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n const maxlimit = count;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n text: charc,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n if (index >= 0 && index <= 5) {\r\n setshowSlider(false);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setMediaArray1([]);\r\n setMediaArray2([]);\r\n newArr.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n if (index == 3) {\r\n setshowSlider(true);\r\n }\r\n });\r\n }\r\n setDragoverId(0);\r\n //console.log(index)\r\n };\r\n return (\r\n \r\n {showSlider ? (\r\n \r\n
\r\n
\r\n {\r\n setsctiveFontFamily(0);\r\n }}\r\n onChange={(e) => getcontent(e, 0, 12)}\r\n value={textArrays[0].text}\r\n >\r\n\r\n setsctiveFontFamily(3)}\r\n onChange={(e) => getcontent(e, 3, 60)}\r\n value={textArrays[3].text}\r\n >\r\n setsctiveFontFamily(4)}\r\n onChange={(e) => getcontent(e, 4, 36)}\r\n value={textArrays[4].text}\r\n >\r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SceneSeventySix;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneSeventySix from \"./Scene76\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nimport { disableBodyScroll, enableBodyScroll } from \"body-scroll-lock\";\r\nimport steps from \"./../../Guide/steps\"\r\nimport Tour from \"reactour\";\r\nconst TemplateScene76 = (props) => {\r\n const disableBody = target => disableBodyScroll(target);\r\n const enableBody = target => enableBodyScroll(target);\r\n const [isTourOpen, setIsTourOpen] = React.useState(false);\r\n const [isShowingMore, setIsShowingMore] = React.useState(false);\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/76/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: time,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 76) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[1].fontSize\r\n );\r\n // setFontFamily(\r\n // block.sceneData.textArray[1].fontFamily\r\n // );\r\n setFontWeight(\r\n block.sceneData.textArray[1].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[1].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n const closeTour = () => {\r\n setIsTourOpen(false)\r\n };\r\n const showTour = () => {\r\n setIsTourOpen(true)\r\n };\r\n const accentColor = \"#5cb7b7\";\r\n return (\r\n \r\n Guide
\r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene76;\r\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\nimport comingSoon from \"./../../../../Assets/images/icon-coming-soon.png\"\r\nimport home from \"./../../../../Assets/images/home-con.png\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"../../../../Utility/Loader/Loader\";\r\nconst SceneSeventySeven = (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const [usertext1, setUsertext1] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n const [mediaArray1, setMediaArray1] = React.useState([]);\r\n const [mediaArray2, setMediaArray2] = React.useState([]);\r\n const [showSlider, setshowSlider] = React.useState(true);\r\n\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(index);\r\n setZoomToggle(false);\r\n if (index != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 5000,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n const settings2 = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 6500,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n\r\n React.useEffect(() => {\r\n // props.mediaArray.map((data, index) => {\r\n // {\r\n // index <= 1\r\n // ? setMediaArray1((medias) => [...medias, data])\r\n // : index > 1 && index <= 3\r\n // ? setMediaArray2((media) => [...media, data])\r\n // : null;\r\n // }\r\n // });\r\n if (props.data) {\r\n mediaArray.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n });\r\n setUsertext1(textArrays[0].text);\r\n }\r\n }, [textArrays, props.data]);\r\n textArrays.map((data, index) => {\r\n window[\"layout\" + index] = [\r\n {\r\n key: \"test\" + index,\r\n x: data.x,\r\n y: data.y,\r\n width: data.boxWidth,\r\n height: data.boxHeight,\r\n zIndex: 1,\r\n },\r\n ];\r\n window[\"canResizable\" + index] = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n window[\"onLayoutChange\" + index] = (e, index) => {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: newArr[index].text,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: e[0].x,\r\n y: e[0].y,\r\n boxWidth: e[0].width,\r\n boxHeight: e[0].height,\r\n };\r\n props.getContent(newArr);\r\n textArrays = newArr;\r\n };\r\n });\r\n function getcontent(e, index, count) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n const maxlimit = count;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n text: charc,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n if (index >= 0 && index <= 5) {\r\n setshowSlider(false);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setMediaArray1([]);\r\n setMediaArray2([]);\r\n newArr.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n if (index == 3) {\r\n setshowSlider(true);\r\n }\r\n });\r\n }\r\n setDragoverId(0);\r\n //console.log(index)\r\n };\r\n return (\r\n \r\n {showSlider ? (\r\n \r\n
\r\n
\r\n
\r\n
\r\n
{\r\n setsctiveFontFamily(0);\r\n }}\r\n onChange={(e) => getcontent(e, 0, 12)}\r\n value={textArrays[0].text}\r\n >\r\n \r\n setsctiveFontFamily(3)}\r\n onChange={(e) => getcontent(e, 3, 60)}\r\n value={textArrays[3].text}\r\n >\r\n \r\n
\r\n \r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SceneSeventySeven;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneSeventySeven from \"./Scene77\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nconst TemplateScene77 = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/77/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: time,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 77) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[1].fontSize\r\n );\r\n // setFontFamily(\r\n // block.sceneData.textArray[1].fontFamily\r\n // );\r\n setFontWeight(\r\n block.sceneData.textArray[1].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[1].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene77;\r\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport {\r\n apiPath,\r\n apigetUploads,\r\n apiUploadImage,\r\n apideleteMedia,\r\n} from \"../../../../Utility/Utility\";\r\nimport FilerobotImageEditor from \"filerobot-image-editor\";\r\nimport editing from \"./../../../../Assets/images/templates/editing.png\";\r\nimport check from \"./../../../../Assets/images/templates/check.png\";\r\n\r\nimport home from \"./../../../../Assets/images/home-con.png\";\r\nimport Slider from \"@material-ui/core/Slider\";\r\nimport getCroppedImg from \"../../../../Utility/cropImage\";\r\nimport Cropper from \"react-easy-crop\";\r\nimport ReactTooltip from \"react-tooltip\";\r\nimport axios from \"axios\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport Loader from \"../../../../Utility/Loader/Loader\";\r\nconst SceneSeventyEight= (props) => {\r\n const match = useRouteMatch(\"/template/:templateId/:id/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const [usertext1, setUsertext1] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userId, setUserId] = React.useState(\"\");\r\n const [imageSrc, setImageSrc] = React.useState(null);\r\n const [editUrl, setEditUrl] = React.useState(\"\");\r\n const [imgindex, setImgindex] = React.useState(null);\r\n const [show, toggle] = React.useState(false);\r\n const [crop, setCrop] = React.useState({ x: 0, y: 0 });\r\n const [rotation, setRotation] = React.useState(0);\r\n const [zoom, setZoom] = React.useState(1);\r\n const [zoomToggle, setZoomToggle] = React.useState(false);\r\n const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);\r\n const [croppedImage, setCroppedImage] = React.useState(null);\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n const [mediaArray1, setMediaArray1] = React.useState([]);\r\n const [mediaArray2, setMediaArray2] = React.useState([]);\r\n const [showSlider, setshowSlider] = React.useState(true);\r\n\r\n const onCropComplete = React.useCallback((croppedArea, croppedAreaPixels) => {\r\n setCroppedAreaPixels(croppedAreaPixels);\r\n }, []);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n }\r\n }, [userId]);\r\n const showCroppedImage = React.useCallback(async () => {\r\n setProcessing(true);\r\n try {\r\n const croppedImage = await getCroppedImg(\r\n imageSrc,\r\n croppedAreaPixels,\r\n rotation\r\n );\r\n console.log(croppedImage);\r\n setCroppedImage(croppedImage);\r\n var croppedimg = \"\";\r\n axios({\r\n method: \"get\",\r\n url: croppedImage,\r\n responseType: \"blob\",\r\n }).then(function (response) {\r\n console.log(response.data);\r\n croppedimg = response.data;\r\n var formData = new FormData();\r\n\r\n formData.append(\"file\", croppedimg, \"scale-img.jpg\");\r\n formData.append(\"userId\", userId);\r\n formData.append(\"templateId\", templateId);\r\n // API Call\r\n setProcessing(true);\r\n axios\r\n .post(`${apiUploadImage}`, formData)\r\n .then((response) => {\r\n setProcessing(false);\r\n let fileUrl = response.data.message\r\n .replace(/\\\\/g, \"/\")\r\n .substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n console.log(updatedImage);\r\n closeScale(50);\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n })\r\n .catch((error) => { });\r\n });\r\n } catch (e) {\r\n console.error(e);\r\n }\r\n }, [croppedAreaPixels, rotation]);\r\n const onClose = React.useCallback(() => {\r\n setCroppedImage(null);\r\n }, []);\r\n //console.log(props.content)\r\n const config = {\r\n tools: [\r\n \"adjust\",\r\n \"effects\",\r\n \"filters\",\r\n \"rotate\",\r\n \"crop\",\r\n \"resize\",\r\n \"image\",\r\n \"text\",\r\n ],\r\n theme: {\r\n colors: {\r\n primaryBg: \"#eee\",\r\n primaryBgHover: \"#637381\",\r\n secondaryBg: \"#777\",\r\n secondaryBgHover: \"#ee6352\",\r\n text: \"#F9FAFB\",\r\n textHover: \"#eee\",\r\n textMute: \"#aaaaaa\",\r\n textWarn: \"#f7931e\",\r\n secondaryBgOpacity: \"rgba(0, 0, 0, 0.75)\",\r\n border: \"#eee\",\r\n borderLight: \"#637381\",\r\n tagsBackground: \"#fb3640\",\r\n buttonBackground: \"#fb3640\",\r\n hoverButtonBackground: \"#E04241\",\r\n },\r\n },\r\n };\r\n\r\n function filterBtnClick(scene, index) {\r\n setImgindex(index);\r\n setEditUrl(scene);\r\n toggle(true);\r\n }\r\n const closeScale = (index) => {\r\n setTimeout(function () {\r\n setImgindex(index);\r\n }, 100);\r\n };\r\n const setzoomToggle = () => {\r\n console.log(\"here\");\r\n setTimeout(function () {\r\n setZoomToggle(!zoomToggle);\r\n }, 100);\r\n };\r\n\r\n const onComplete = function (newUrl) {\r\n let fileUrl = newUrl.message.replace(/\\\\/g, \"/\").substring(\"public\".length);\r\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\r\n let updatedImage = imageUrl;\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[imgindex] = {\r\n type: \"img\",\r\n url: updatedImage,\r\n };\r\n\r\n setMediaArray(newArr);\r\n props.dropMedia(false, updatedImage, \"img\", imgindex, newArr);\r\n };\r\n const ImageEditor = new FilerobotImageEditor(config, onComplete);\r\n\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n setImageSrc(apiPath + scene);\r\n setImgindex(index);\r\n setZoomToggle(false);\r\n if (index != imgindex) {\r\n setZoom(1);\r\n }\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n const settings = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 5000,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n const settings2 = {\r\n arrows: false,\r\n infiniteLoop: true,\r\n autoPlay: true,\r\n interval: 6500,\r\n transitionTime: 2000,\r\n showArrows: false,\r\n showStatus: false,\r\n showIndicators: false,\r\n swipeable: true,\r\n stopOnHover: true,\r\n showThumbs: false,\r\n };\r\n\r\n React.useEffect(() => {\r\n // props.mediaArray.map((data, index) => {\r\n // {\r\n // index <= 1\r\n // ? setMediaArray1((medias) => [...medias, data])\r\n // : index > 1 && index <= 3\r\n // ? setMediaArray2((media) => [...media, data])\r\n // : null;\r\n // }\r\n // });\r\n if (props.data) {\r\n mediaArray.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n });\r\n setUsertext1(textArrays[0].text);\r\n }\r\n }, [textArrays, props.data]);\r\n textArrays.map((data, index) => {\r\n window[\"layout\" + index] = [\r\n {\r\n key: \"test\" + index,\r\n x: data.x,\r\n y: data.y,\r\n width: data.boxWidth,\r\n height: data.boxHeight,\r\n zIndex: 1,\r\n },\r\n ];\r\n window[\"canResizable\" + index] = (isResize) => {\r\n return {\r\n top: isResize,\r\n right: isResize,\r\n bottom: isResize,\r\n left: isResize,\r\n topRight: isResize,\r\n bottomRight: isResize,\r\n bottomLeft: isResize,\r\n topLeft: isResize,\r\n };\r\n };\r\n window[\"onLayoutChange\" + index] = (e, index) => {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: newArr[index].text,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: e[0].x,\r\n y: e[0].y,\r\n boxWidth: e[0].width,\r\n boxHeight: e[0].height,\r\n };\r\n props.getContent(newArr);\r\n textArrays = newArr;\r\n };\r\n });\r\n function getcontent(e, index, count) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n const maxlimit = count;\r\n let charc = e.target.value;\r\n if (e.target.value.length > maxlimit) {\r\n charc = e.target.value.substring(0, maxlimit);\r\n newArr[index] = {\r\n text: charc,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n } else {\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n x: newArr[index].x,\r\n y: newArr[index].y,\r\n boxWidth: newArr[index].boxWidth,\r\n boxHeight: newArr[index].boxHeight,\r\n };\r\n props.getContent(newArr);\r\n }\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n const handleDropComplete = (e, index) => {\r\n if (index >= 0 && index <= 5) {\r\n setshowSlider(false);\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n props.dropMedia(false, imgUrl, \"img\", index);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n setMediaArray(newArr);\r\n setMediaArray1([]);\r\n setMediaArray2([]);\r\n newArr.map((data, index) => {\r\n {\r\n index <= 1\r\n ? setMediaArray1((media2) => [...media2, data])\r\n : index > 1 && index <= 3\r\n ? setMediaArray2((media3) => [...media3, data])\r\n : null;\r\n }\r\n if (index == 3) {\r\n setshowSlider(true);\r\n }\r\n });\r\n }\r\n setDragoverId(0);\r\n //console.log(index)\r\n };\r\n return (\r\n \r\n {showSlider ? (\r\n \r\n
\r\n
\r\n {\r\n setsctiveFontFamily(0);\r\n }}\r\n onChange={(e) => getcontent(e, 0, 12)}\r\n value={textArrays[0].text}\r\n >\r\n \r\n setsctiveFontFamily(3)}\r\n onChange={(e) => getcontent(e, 3, 60)}\r\n value={textArrays[3].text}\r\n >\r\n \r\n
\r\n
\r\n {mediaArray.map((data, index) => {\r\n return index == 0 ? (\r\n
\r\n setshowbg(true, data.url, data.type, false, index)\r\n }\r\n onDragEnter={(e) => handleDrag(e, index + 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, index)}\r\n className={\r\n dragoverId == index + 1\r\n ? \"bg box-1 opacity\"\r\n : \"bg box-1 \"\r\n }\r\n style={{\r\n \"background-image\": \"url(\" + apiPath + data.url + \") \",\r\n }}\r\n >\r\n {imgindex == index ? (\r\n \r\n
\r\n
setzoomToggle()}\r\n >\r\n Scale\r\n \r\n
\r\n
filterBtnClick(data.url, index)}\r\n data-tip=\"\"\r\n data-for=\"edit\"\r\n />\r\n \r\n Edit\r\n \r\n \r\n
\r\n
showCroppedImage(data.url)}\r\n data-tip=\"\"\r\n data-for=\"done\"\r\n />\r\n \r\n Done\r\n \r\n \r\n
closeScale(50)}\r\n >\r\n Close\r\n \r\n\r\n {imgindex == index && zoomToggle ? (\r\n
\r\n setZoom(zoom)}\r\n />\r\n
\r\n ) : null}\r\n\r\n
\r\n
\r\n ) : null}\r\n
\r\n {\r\n toggle(false);\r\n }}\r\n onComplete={onComplete}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SceneSeventyEight;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport Footer from \"../../../../Footer\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneSeventyEight from \"./Scene78\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"../../GlobalOptions/GlobalOptions\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdateBlock,\r\n} from \"../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"../../AddMusic/AddMusic\";\r\nconst TemplateScene78 = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/78/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n const [time, setTime] = React.useState(7.5);\r\n\r\n function getTime(scenetime) {\r\n setTime(scenetime);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: scenetime,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor);\r\n }\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontFamily(fontfamily);\r\n let newArr = [...textArray];\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setFontWeight(fontweight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data, true);\r\n }\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setTextColor(color);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: time,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n console.log(scene);\r\n // if (index) {\r\n // setTextSize(textArray[index].fontSize);\r\n // setFontWeight(textArray[index].fontWeight);\r\n // setFontFamily(textArray[index].fontFamily)\r\n // }\r\n setArrayIndex(index);\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setContainer(container);\r\n setShowGlobal(false);\r\n\r\n //console.log(textArray[index].fontSize)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: time,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function getContent(content) {\r\n setTextArray(content);\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n const data = {\r\n textArray: content,\r\n time: time,\r\n media: mediaArray,\r\n };\r\n updateData(data, true);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n if (!norefresh) {\r\n reFetchData(true);\r\n }\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n if (block.sceneId == 78) {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[1].fontSize\r\n );\r\n // setFontFamily(\r\n // block.sceneData.textArray[1].fontFamily\r\n // );\r\n setFontWeight(\r\n block.sceneData.textArray[1].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[1].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n setTime(block.sceneData.time)\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n console.log(upatedData);\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateScene78;\r\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { apiPath } from \"../../../../Utility/Utility\";\r\n// import userImg from \"../../../../../assets/images/User/Template/user.png\";\r\n// import LogoImg from \"../../../../../assets/images/User/Template/Resizer.webp\";\r\nimport Loader from \"../../../../Utility/Loader/Loader\";\r\nconst SceneLast2 = (props) => {\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n React.useEffect(() => {\r\n if (props.mediaArray) {\r\n setMediaArray(props.mediaArray);\r\n }\r\n }, [textArrays, props.data]);\r\n\r\n function getcontent(e, index) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n };\r\n props.getContent(newArr);\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n console.log(newArr)\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n props.dropMedia(false, imgUrl, \"img\", index, newArr);\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n return (\r\n \r\n \r\n
\r\n
\r\n
\r\n setshowbg(\r\n true,\r\n mediaArray[0].url,\r\n mediaArray[0].type,\r\n false,\r\n \"0\"\r\n )\r\n }\r\n onDragEnter={(e) => handleDrag(e, 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 0)}\r\n className={\r\n dragoverId == 1\r\n ? \"img-fluid userimg opacity\"\r\n : \"img-fluid userimg \"\r\n }\r\n alt=\"userImg\"\r\n />\r\n \r\n
\r\n
\r\n {textArrays.map((data, index) => {\r\n return (\r\n
setsctiveFontFamily(index)}\r\n >\r\n getcontent(e, index)}\r\n >\r\n \r\n );\r\n })}\r\n
handleDrag(e, 2)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 1)}\r\n onClick={() =>\r\n setshowbg(\r\n true,\r\n mediaArray[1].url,\r\n mediaArray[1].type,\r\n false,\r\n \"1\"\r\n )\r\n }\r\n className={\r\n dragoverId == 2\r\n ? \"img-fluid logo-img opacity\"\r\n : \"img-fluid logo-img \"\r\n }\r\n\r\n alt=\"userImg\"\r\n />\r\n \r\n
\r\n
\r\n );\r\n};\r\nexport default SceneLast2;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneLast2 from \"./SceneLast2\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\n// import userImg from \"../../../../../assets/images/User/Template/user.png\";\r\n// import LogoImg from \"../../../../../assets/images/User/Template/Resizer.webp\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdatLastScene,\r\n apiUpdateScene,\r\n apiGetLastScene,\r\n apiUpdateBlock\r\n} from \"./../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nconst TemplateSceneLast2 = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/last2/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n // const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n // const [textTransform, setTexttransform] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: userImg,\r\n // type: \"image/png\",\r\n // },\r\n // {\r\n // url: LogoImg,\r\n // type: \"image/png\",\r\n // },\r\n // ]);\r\n // const [textArray, setTextArray] = React.useState([\r\n // {\r\n // text: \"Devon Carrick\",\r\n // fontSize: \"35\",\r\n // fontFamily: \"\",\r\n // fontWeight: \"600\",\r\n // fontLineHeight: \"1.4\",\r\n // fontAlignment: \"text-left\",\r\n // fontColor: \"#333\",\r\n // fontCapitalize: \"\",\r\n // },\r\n // {\r\n // text: \"devon-carrick.kw.com\",\r\n // fontSize: \"22\",\r\n // fontFamily: \"\",\r\n // fontWeight: \"500\",\r\n // fontLineHeight: \"1.4\",\r\n // fontAlignment: \"text-left\",\r\n // fontColor: \"#333\",\r\n // fontCapitalize: \"\",\r\n // },\r\n // {\r\n // text: \"devoncarrick@kw.com\",\r\n // fontSize: \"22\",\r\n // fontFamily: \"\",\r\n // fontWeight: \"500\",\r\n // fontLineHeight: \"1.4\",\r\n // fontAlignment: \"text-left\",\r\n // fontColor: \"#333\",\r\n // fontCapitalize: \"\",\r\n // },\r\n // {\r\n // text: \"99-628-32220\",\r\n // fontSize: \"22\",\r\n // fontFamily: \"\",\r\n // fontWeight: \"500\",\r\n // fontLineHeight: \"1.4\",\r\n // fontAlignment: \"text-left\",\r\n // fontColor: \"#333\",\r\n // fontCapitalize: \"\",\r\n // },\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 4,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 4,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 4,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 4,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 4,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 4,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: 4,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n\r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setShowGlobal(false);\r\n setContainer(container);\r\n }\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: 4,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index, newArr) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n // let newArr = [...mediaArray]; // copying the old datas array\r\n // newArr[container] = {\r\n // type: mediaType,\r\n // url: mediaFile,\r\n // };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: 4,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextArray(content);\r\n const data = {\r\n textArray: content,\r\n time: 4,\r\n media: mediaArray,\r\n };\r\n updateData(data);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdateBlock}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n // getData();\r\n console.log(response);\r\n reFetchData(true)\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n if (response.data.data[0].blocks.length > 0) {\r\n //setBlocks(response.data.data[0].blocks);\r\n response.data.data[0].blocks.map((block) => {\r\n console.log(block)\r\n if (block.sceneId == 'last2') {\r\n setUpatedData(block.sceneData);\r\n console.log(block.sceneData);\r\n setMediaArray(block.sceneData.media);\r\n setTextArray(block.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(block.sceneData.textArray[0].fontSize);\r\n setFontFamily(block.sceneData.textArray[0].fontFamily);\r\n setFontWeight(block.sceneData.textArray[0].fontWeight);\r\n setTextColor(block.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n block.sceneData.textArray[1].fontSize\r\n );\r\n setFontFamily(\r\n block.sceneData.textArray[1].fontFamily\r\n );\r\n setFontWeight(\r\n block.sceneData.textArray[1].fontWeight\r\n );\r\n setTextColor(\r\n block.sceneData.textArray[1].fontColor\r\n );\r\n }\r\n setData(block.sceneData);\r\n }\r\n });\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n //console.log(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n }\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n getData();\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateSceneLast2;\r\n","/* eslint-disable no-lone-blocks */\r\n/* eslint-disable no-unused-expressions */\r\n/* eslint-disable eqeqeq */\r\nimport React from \"react\";\r\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\r\nimport { Carousel } from \"react-responsive-carousel\";\r\nimport DragResizeContainer from \"react-drag-resize\";\r\nimport { apiPath } from \"./../../../../Utility/Utility\";\r\n// import userImg from \"../../../../../assets/images/User/Template/user.png\";\r\n// import LogoImg from \"../../../../../assets/images/User/Template/Resizer.webp\";\r\nimport Loader from \"./../../../../Utility/Loader/Loader\";\r\nconst SceneLast = (props) => {\r\n const [mediaArray, setMediaArray] = React.useState(props.mediaArray);\r\n const [dragoverId, setDragoverId] = React.useState(0);\r\n var textArrays = props.textArray;\r\n function setshowbg(option, scene, type, titleColor, index, textIndex) {\r\n props.showBg(option, type, scene, titleColor, index, textIndex);\r\n }\r\n function setsctiveFontFamily(option) {\r\n props.setActiveFontFamily(option);\r\n }\r\n React.useEffect(() => {\r\n if (props.mediaArray) {\r\n setMediaArray(props.mediaArray);\r\n }\r\n }, [textArrays, props.data]);\r\n\r\n function getcontent(e, index) {\r\n let newArr = [...textArrays]; // copying the old datas array\r\n newArr[index] = {\r\n text: e.target.value,\r\n fontSize: newArr[index].fontSize,\r\n fontFamily: newArr[index].fontFamily,\r\n fontWeight: newArr[index].fontWeight,\r\n fontLineHeight: newArr[index].fontLineHeight,\r\n fontAlignment: newArr[index].fontAlignment,\r\n fontColor: newArr[index].fontColor,\r\n fontCapitalize: newArr[index].fontCapitalize,\r\n };\r\n props.getContent(newArr);\r\n }\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n const handleDropComplete = (e, index) => {\r\n let imgUrl = e.dataTransfer.getData(\"img\");\r\n \r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[index] = {\r\n type: \"img\",\r\n url: imgUrl,\r\n };\r\n console.log(newArr)\r\n setMediaArray(newArr);\r\n setDragoverId(0);\r\n props.dropMedia(false, imgUrl, \"img\", index, newArr) ;\r\n };\r\n const handleDrag = (e, id) => {\r\n console.log(id);\r\n setDragoverId(id);\r\n };\r\n const removeDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n const endDrag = (e, id) => {\r\n setDragoverId(0);\r\n };\r\n\r\n return (\r\n \r\n \r\n
\r\n
\r\n
\r\n setshowbg(\r\n true,\r\n mediaArray[0].url,\r\n mediaArray[0].type,\r\n false,\r\n \"0\"\r\n )\r\n }\r\n onDragEnter={(e) => handleDrag(e, 1)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 0)}\r\n className={\r\n dragoverId == 1\r\n ? \"img-fluid userimg opacity\"\r\n : \"img-fluid userimg \"\r\n }\r\n alt=\"userImg\"\r\n />\r\n \r\n
\r\n {textArrays.map((data, index) => {\r\n return (\r\n
setsctiveFontFamily(index)}\r\n >\r\n getcontent(e, index)}\r\n >\r\n \r\n );\r\n })}\r\n
handleDrag(e, 2)}\r\n onDragLeave={(e) => removeDrag()}\r\n onDragOver={(e) => handleDrop(e)}\r\n onDrop={(e) => handleDropComplete(e, 1)}\r\n onClick={() =>\r\n setshowbg(\r\n true,\r\n mediaArray[1].url,\r\n mediaArray[1].type,\r\n false,\r\n \"1\"\r\n )\r\n }\r\n className={\r\n dragoverId == 2\r\n ? \"img-fluid logo-img opacity\"\r\n : \"img-fluid logo-img \"\r\n }\r\n \r\n alt=\"userImg\"\r\n />\r\n \r\n
\r\n );\r\n};\r\nexport default SceneLast;\r\n","import React from \"react\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch } from \"react-router-dom\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport SiteHeader from \"../../../../Header/HeaderUser\";\r\nimport SidebarLeft from \"../../SidebarLeft/SidebarLeft\";\r\nimport TextEditor from \"../../TextEditor/TextEditor\";\r\nimport ChangeBg from \"../../ChangeBg\";\r\nimport SceneLast from \"./SceneLast\";\r\nimport AddMedia from \"../../AddMedia/AddMedia\";\r\nimport AddScenes from \"../../AddScenes/AddScenes\";\r\nimport TopSection from \"../../TopSection/TopSection\";\r\nimport BottomSection from \"../../BottomSection/BottomSection\";\r\nimport GlobalOptions from \"./../../GlobalOptions/GlobalOptions\";\r\n// import userImg from \"../../../../../assets/images/User/Template/user.png\";\r\n// import LogoImg from \"../../../../../assets/images/User/Template/Resizer.webp\";\r\nimport {\r\n apigetAdminTemplate,\r\n apiUpdatLastScene,\r\n apiUpdateScene,\r\n apiGetLastScene,\r\n} from \"./../../../../Utility/Utility\";\r\nimport Player from \"../../Player\";\r\nimport AddMusic from \"./../../AddMusic/AddMusic\";\r\nconst TemplateSceneLast = (props) => {\r\n const [sceneOrder, setSceneOrder] = React.useState(\"\");\r\n const [parenttemplateId, setParenttemplateId] = React.useState(\"\");\r\n const [bottomData, setBottomData] = React.useState(\"\");\r\n const [userId, setUserId] = React.useState(\"\");\r\n const match = useRouteMatch(\"/template/:templateId/last/:sceneId\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n const {\r\n params: { sceneId },\r\n } = match;\r\n const [templateTitle, setTemplateTitle] = React.useState(\"\");\r\n const [data, setData] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n // const [textAligmnet, setTextAligmnet] = React.useState(\"text-center\");\r\n const [bgType, setBgType] = React.useState(\"\");\r\n const [bgScene, setBgScene] = React.useState(\"\");\r\n const [textColor, setTextColor] = React.useState(\"\");\r\n const [content, setContent] = React.useState(\"\");\r\n const [textlineHeight, setTextlineHeight] = React.useState(\"1.4\");\r\n const [textSize, setTextSize] = React.useState(\"\");\r\n // const [textTransform, setTexttransform] = React.useState(\"\");\r\n const [changeBg, setChangeBg] = React.useState(false);\r\n const [addMedia, setAddMedia] = React.useState(false);\r\n const [addScene, setAddScene] = React.useState(false);\r\n const [addMusic, setAddMusic] = React.useState(false);\r\n const [container, setContainer] = React.useState(\"\");\r\n const [arrayIndex, setArrayIndex] = React.useState(0);\r\n const [showEditbutton, setShowEditbutton] = React.useState(false);\r\n const [playActive, setPlayActive] = React.useState(false);\r\n const [sceneThumbnail, setSceneThumbnail] = React.useState(\"\");\r\n const [selectedCategory, setSelectedCategory] = React.useState(\"\");\r\n const [bottomsectionActive, setBottomsectionActive] = React.useState(false);\r\n const [fontFamily, setFontFamily] = React.useState(\"\");\r\n const [fontWeight, setFontWeight] = React.useState(\"\");\r\n const [showGlobal, setShowGlobal] = React.useState(false);\r\n const [undoData, setUndoData] = React.useState([]);\r\n const [redoData, setRedoData] = React.useState([]);\r\n const [upatedData, setUpatedData] = React.useState([]);\r\n // const [mediaArray, setMediaArray] = React.useState([\r\n // {\r\n // url: userImg,\r\n // type: \"image/png\",\r\n // },\r\n // {\r\n // url: LogoImg,\r\n // type: \"image/png\",\r\n // },\r\n // ]);\r\n // const [textArray, setTextArray] = React.useState([\r\n // {\r\n // text: \"Devon Carrick\",\r\n // fontSize: \"35\",\r\n // fontFamily: \"\",\r\n // fontWeight: \"600\",\r\n // fontLineHeight: \"1.4\",\r\n // fontAlignment: \"text-left\",\r\n // fontColor: \"#333\",\r\n // fontCapitalize: \"\",\r\n // },\r\n // {\r\n // text: \"devon-carrick.kw.com\",\r\n // fontSize: \"22\",\r\n // fontFamily: \"\",\r\n // fontWeight: \"500\",\r\n // fontLineHeight: \"1.4\",\r\n // fontAlignment: \"text-left\",\r\n // fontColor: \"#333\",\r\n // fontCapitalize: \"\",\r\n // },\r\n // {\r\n // text: \"devoncarrick@kw.com\",\r\n // fontSize: \"22\",\r\n // fontFamily: \"\",\r\n // fontWeight: \"500\",\r\n // fontLineHeight: \"1.4\",\r\n // fontAlignment: \"text-left\",\r\n // fontColor: \"#333\",\r\n // fontCapitalize: \"\",\r\n // },\r\n // {\r\n // text: \"99-628-32220\",\r\n // fontSize: \"22\",\r\n // fontFamily: \"\",\r\n // fontWeight: \"500\",\r\n // fontLineHeight: \"1.4\",\r\n // fontAlignment: \"text-left\",\r\n // fontColor: \"#333\",\r\n // fontCapitalize: \"\",\r\n // },\r\n // ]);\r\n const [mediaArray, setMediaArray] = React.useState([]);\r\n const [textArray, setTextArray] = React.useState([]);\r\n\r\n function getFontfamily(fontfamily) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: fontfamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 4,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getFontWeight(fontweight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: fontweight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 4,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getAlignment(alignment) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: alignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 4,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n\r\n function getTextTransform(texttransform) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: texttransform,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 4,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextColor(color) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: color,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 4,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextlineHeight(lineHeight) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextlineHeight(lineHeight);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: newArr[arrayIndex].fontSize,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: lineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n const data = {\r\n media: mediaArray,\r\n time: 4,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function getTextSize(size) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextSize(size);\r\n console.log(arrayIndex);\r\n let newArr = [...textArray]; // copying the old datas array\r\n newArr[arrayIndex] = {\r\n text: newArr[arrayIndex].text,\r\n fontSize: size,\r\n fontFamily: newArr[arrayIndex].fontFamily,\r\n fontWeight: newArr[arrayIndex].fontWeight,\r\n fontLineHeight: newArr[arrayIndex].fontLineHeight,\r\n fontAlignment: newArr[arrayIndex].fontAlignment,\r\n fontColor: newArr[arrayIndex].fontColor,\r\n fontCapitalize: newArr[arrayIndex].fontCapitalize,\r\n x: newArr[arrayIndex].x,\r\n y: newArr[arrayIndex].y,\r\n boxWidth: newArr[arrayIndex].boxWidth,\r\n boxHeight: newArr[arrayIndex].boxHeight,\r\n };\r\n setTextArray(newArr);\r\n //console.log(newArr)\r\n const data = {\r\n media: mediaArray,\r\n time: 4,\r\n textArray: newArr,\r\n };\r\n updateData(data);\r\n }\r\n function showBg(changeBg, type, scene, titleColor, container, index) {\r\n \r\n setChangeBg(changeBg);\r\n setBgType(type);\r\n setBgScene(scene);\r\n setShowGlobal(false);\r\n setContainer(container);\r\n }\r\n function setActiveFontFamily(index) {\r\n setChangeBg(false);\r\n setShowGlobal(false);\r\n setArrayIndex(index);\r\n setTextSize(textArray[index].fontSize);\r\n setFontWeight(textArray[index].fontWeight);\r\n setFontFamily(textArray[index].fontFamily);\r\n setTextColor(textArray[index].fontColor)\r\n }\r\n function showAddMedia(media, mediaFile) {\r\n setAddMedia(media);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function showMusic(media) {\r\n setAddMusic(media);\r\n setAddMedia(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddMedia(media, mediaFile, mediaType) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n let newArr = [...mediaArray]; // copying the old datas array\r\n newArr[container] = {\r\n type: mediaType,\r\n url: mediaFile,\r\n };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: 4,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function dropMedia(media, mediaFile, mediaType, index, newArr) {\r\n if (mediaFile) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setBgType(mediaType);\r\n setBgScene(mediaFile);\r\n // let newArr = [...mediaArray]; // copying the old datas array\r\n // newArr[container] = {\r\n // type: mediaType,\r\n // url: mediaFile,\r\n // };\r\n setMediaArray(newArr);\r\n const data = {\r\n media: newArr,\r\n time: 4,\r\n textArray: textArray,\r\n };\r\n updateData(data);\r\n }\r\n setAddMedia(media);\r\n }\r\n function showAddScene(mediaactive, scene) {\r\n setAddScene(mediaactive);\r\n setAddMusic(false);\r\n setShowGlobal(false);\r\n }\r\n function closeAddScene(media) {\r\n setAddScene(media);\r\n setShowEditbutton(false);\r\n setShowGlobal(false);\r\n }\r\n function showglobal(global) {\r\n setShowGlobal(global);\r\n setAddMusic(false);\r\n setAddMedia(false);\r\n }\r\n function getContent(content) {\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n setTextArray(content);\r\n const data = {\r\n textArray: content,\r\n time: 4,\r\n media: mediaArray,\r\n };\r\n updateData(data);\r\n }\r\n function updateData(data, norefresh) {\r\n setData(data);\r\n setUpatedData(data);\r\n axios\r\n .put(`${apiUpdatLastScene}/${sceneId}`, {\r\n id: sceneId,\r\n sceneData: data,\r\n })\r\n .then(function (response) {\r\n // getData();\r\n console.log(response);\r\n reFetchData(true)\r\n });\r\n }\r\n\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserId(decoded.id);\r\n //console.log(decoded.id)\r\n getData();\r\n }\r\n // console.log(textSize);\r\n }, [userId]);\r\n\r\n function getData(check) {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n if (response.data.data.length > 0) {\r\n setBlocks(response.data.data[0].blocks);\r\n if (typeof response.data.data[0] !== undefined) {\r\n if (check != true) {\r\n setParenttemplateId(response.data.data[0].templateId);\r\n setTemplateTitle(response.data.data[0].title);\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n setSceneOrder(response.data.data[0].sceneOrder);\r\n setSceneThumbnail(response.data.data[0].templateImage);\r\n setSelectedCategory(response.data.data[0].templateCategory);\r\n }\r\n } else {\r\n setBottomsectionActive(false);\r\n setBottomData(response.data.data[0]);\r\n setBottomsectionActive(true);\r\n }\r\n }\r\n });\r\n axios\r\n .get(`${apiGetLastScene}` + \"?id=\" + templateId, {})\r\n .then(function (response) {\r\n console.log(response.data.scene.sceneData);\r\n setUpatedData(response.data.scene.sceneData);\r\n setMediaArray(response.data.scene.sceneData.media);\r\n setTextArray(response.data.scene.sceneData.textArray);\r\n if (arrayIndex == 0) {\r\n setTextSize(response.data.scene.sceneData.textArray[0].fontSize);\r\n setFontWeight(response.data.scene.sceneData.textArray[0].fontWeight);\r\n setFontFamily(response.data.scene.sceneData.textArray[0].fontFamily);\r\n setTextColor(response.data.scene.sceneData.textArray[0].fontColor);\r\n } else {\r\n setTextSize(\r\n response.data.scene.sceneData.textArray[arrayIndex].fontSize\r\n );\r\n setFontWeight(\r\n response.data.scene.sceneData.textArray[arrayIndex].fontWeight\r\n );\r\n setFontFamily(\r\n response.data.scene.sceneData.textArray[arrayIndex].fontFamily\r\n );\r\n setTextColor(response.data.scene.sceneData.textArray[arrayIndex].fontColor);\r\n }\r\n\r\n setData(response.data.scene.sceneData);\r\n });\r\n }\r\n function playVideo(click) {\r\n setPlayActive(click);\r\n }\r\n function reFetchData() {\r\n getData();\r\n }\r\n function undodata() {\r\n let productindex = parseInt(undoData.length) - 1;\r\n //console.log(undoData);\r\n let data = undoData[productindex];\r\n setRedoData((prevState) => [...prevState, upatedData]);\r\n updateData(data);\r\n let popped = undoData;\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n // updateData(popped)\r\n console.log(newRetails);\r\n // setUndoData([popped]);\r\n setUndoData(newRetails);\r\n setTimeout(function () {\r\n getData();\r\n }, 1000);\r\n }\r\n function redodata() {\r\n let popped = redoData;\r\n let productindex = parseInt(redoData.length) - 1;\r\n setUndoData((prevState) => [...prevState, upatedData]);\r\n updateData(redoData[productindex]);\r\n let newRetails = popped.filter(function (item, index) {\r\n return index != productindex;\r\n });\r\n setRedoData(newRetails);\r\n getData();\r\n }\r\n return (\r\n \r\n \r\n {templateTitle ? (\r\n \r\n
\r\n {addMedia ? (\r\n
\r\n ) : addScene ? (\r\n
\r\n ) : addMusic ? (\r\n
\r\n ) : textArray != \"\" ? (\r\n playActive ? (\r\n
\r\n ) : (\r\n
\r\n )\r\n ) : null}\r\n\r\n {addMedia ? null : addScene ? null : addMusic ? null : showGlobal ? null : changeBg ===\r\n false ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : (\r\n
\r\n )}\r\n {showGlobal && !changeBg && !addMedia && !addScene && !addMusic ? (\r\n data != \"\" ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n {bottomsectionActive ? (\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default TemplateSceneLast;\r\n","import React from \"react\";\n\nimport SiteHeader from \"./../../Header/HeaderUser\";\nimport Footer from \"../../Footer\";\nimport axios from \"axios\";\nimport jwt_decode from \"jwt-decode\";\nimport Cookies from \"universal-cookie\";\nimport { useRouteMatch, useHistory } from \"react-router-dom\";\nimport {\n apigetAdminTemplate,\n apiPath,\n apiaddAdminTemplate,\n} from \"./.././../Utility/Utility\";\nimport Loader from \"./../../Utility/Loader/Loader\";\nconst CreateTemplate = () => {\n const [processing, setProcessing] = React.useState(false);\n const match = useRouteMatch(\"/create-template/:templateId/\");\n const [successMessage, setSuccessMessage] = React.useState(\"\");\n const [errorMessage, setErrorMessage] = React.useState(\"\");\n const [loader, setLoader] = React.useState(false);\n const [userId, setUserId] = React.useState(\"\");\n const [userToken, setUserToken] = React.useState(\"\");\n const cookies = new Cookies();\n let history = useHistory();\n const {\n params: { templateId },\n } = match;\n const [data, setData] = React.useState([]);\n React.useEffect(() => {\n setProcessing(false);\n const tokens = localStorage.getItem('token');\n // if (cookies.get(\"token\")) {\n if (tokens != null) {\n setUserToken(cookies.get(\"token\"));\n const token = cookies.get(\"token\");\n const decoded = jwt_decode(tokens);\n //const decoded = jwt_decode(token);\n var lastsceneexculde = false;\n if (templateId == '6399ad1570446a16f20033e6') {\n lastsceneexculde = true;\n }\n setUserId(decoded.id);\n axios\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\n .then(function (response) {\n console.log(response.data.data);\n // history.push(\"/home\");\n axios\n .post(apiaddAdminTemplate, {\n userId: decoded.id,\n templateId: templateId,\n title: response.data.data[0].title,\n templateImage: response.data.data[0].templateImage,\n templatePreview: response.data.data[0].templatePreview,\n adminTemplate: false,\n sceneOrder: response.data.data[0].blocks,\n templateCategory: response.data.data[0].selectedCategory,\n lastSceneOption: lastsceneexculde\n })\n .then((response) => {\n //console.log(response)\n const order = response.data.blockData.sort((a, b) => a.order - b.order);\n setTimeout(function () {\n setProcessing(false); \n\n history.push(\n \"/template/\" +\n order[\"0\"].templateId +\n \"/\" +\n order[\"0\"].sceneId +\n \"/\" +\n order[\"0\"]._id\n );\n document.getElementById(\"lottie\").style.display = \"none\";\n }, 3000);\n setSuccessMessage(response.data.message);\n setLoader(false);\n })\n .catch((error) => {\n console.log(error);\n setErrorMessage(error.response.data.message);\n setLoader(false);\n });\n });\n }\n }, []);\n return (\n \n \n {/*
\n C \n R \n E \n A \n T \n I \n N \n G \n T \n E \n M \n P \n A \n T \n E \n . \n . \n . \n
\n */}\n {/*
*/}\n
\n );\n};\nexport default CreateTemplate;\n","/* eslint-disable no-loop-func */\n/* eslint-disable no-undef */\n/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable no-unused-vars */\n/* eslint-disable react-hooks/rules-of-hooks */\nimport React from \"react\";\nimport { Link , useHistory } from \"react-router-dom\";\nimport toplog from \"./../../Assets/images/toplogo.png\";\nimport icon1 from \"./../../Assets/images/icon1.png\";\nimport icon2 from \"./../../Assets/images/icon2.png\";\nimport icon3 from \"./../../Assets/images/icon3.png\";\nimport icon4 from \"./../../Assets/images/icon4.png\";\nimport icon5 from \"./../../Assets/images/icon5.png\";\nimport logout from \"./../../Assets/images/logout.png\";\nimport jwt_decode from \"jwt-decode\";\nimport Cookies from \"universal-cookie\";\n\nconst Sidebar = () => {\n let history = useHistory();\n const cookies = new Cookies();\n function logOut() {\n cookies.get(\"token\");\n cookies.remove(\"token\");\n localStorage.removeItem('token');\n history.push(\"/login\");\n\n }\n return (\n \n\n );\n};\nexport default Sidebar;\n","/* eslint-disable no-loop-func */\n/* eslint-disable no-undef */\n/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable no-unused-vars */\n/* eslint-disable react-hooks/rules-of-hooks */\nimport { Link } from \"react-router-dom\";\nimport React, { useState } from \"react\";\nimport { Container } from \"reactstrap\";\nimport logo from \"./../../Assets/images/header/logo.svg\";\n\nimport UserIcon from \"./../../Assets/images/User/Header/menu-item.svg\";\nimport Loader from \"./../../Utility/Loader/Loader\";\nimport UserAvatar from \"./../../Assets/images/User/Header/default.png\";\nimport jwt_decode from \"jwt-decode\";\nimport { Redirect } from \"react-router-dom\";\nimport Cookies from \"universal-cookie\";\nimport { apiPath } from \"./../../Utility/Utility\";\nimport FontPicker from \"font-picker-react\";\nimport {\n Dropdown,\n DropdownToggle,\n DropdownMenu,\n DropdownItem,\n} from \"reactstrap\";\n\n\nconst Top = (props) => {\n const [userToken, setUserToken] = React.useState(\"\");\n const cookies = new Cookies();\n const [userName, setUserName] = React.useState(\"\");\n const [redirectPath, setRedirectPath] = React.useState(false);\n const [processing, setProcessing] = React.useState(false);\n const [loginType, setLoginType] = React.useState(\"\");\n const [profileImage, setProfileImage] = React.useState(\"\");\n const [activeFontFamily, setActiveFontFamily] = React.useState('Raleway');\n\n React.useEffect(() => {\n const tokens = localStorage.getItem('token');\n console.log(tokens)\n if (tokens != null) {\n setUserToken(cookies.get(\"token\"));\n const token = cookies.get(\"token\");\n const decoded = jwt_decode(tokens);\n // console.log(decoded);\n setUserName(decoded.firstName);\n if (decoded.loginType) {\n setLoginType(decoded.loginType);\n }\n if (decoded.profileImage) {\n setProfileImage(decoded.profileImage);\n }\n } else {\n setRedirect();\n }\n setTimeout(function () {\n setActiveFontFamily(props.fontFamily)\n }, 600);\n }, [userToken, cookies, props.fontFamily]);\n\n const [dropdownOpen, setDropdownOpen] = useState(false);\n\n const toggle = () => setDropdownOpen((prevState) => !prevState);\n\n function setRedirect() {\n setRedirectPath(true);\n }\n function renderRedirect() {\n if (redirectPath) {\n return \n \n {/*
*/}\n\n
\n
\n {/*
*/}\n
\n
\n {/*
*/}\n
\n
My Templates \n
\n {dataTemplate.length > 0 ? (\n
\n {dataTemplate\n .sort((a, b) => a.order - b.order)\n .map((data, index) => {\n const order = data.blocks.sort((a, b) => a.order - b.order);\n return (\n
\n
\n
{data.title} \n
\n \n Edit template\n \n confirmDelete(data._id)}>\n Delete Template\n \n
\n
\n
\n );\n })}\n
\n ) : (\n !processing ?\n
\n
No Templates available
\n
\n : null\n )}\n
\n
\n Delete Template \n \n Are you sure you want to delete this template?
\n \n \n \n
\n
\n \n confirm\n \n
\n
\n \n Cancel\n \n
\n
\n
\n \n \n \n );\n};\nexport default MyTemplates;\n","/* eslint-disable eqeqeq */\nimport React from \"react\";\nimport { useRouteMatch, Link } from \"react-router-dom\";\nimport axios from \"axios\";\nimport jwt_decode from \"jwt-decode\";\nimport Cookies from \"universal-cookie\";\nimport SiteHeader from \"../../../Header/HeaderUser\";\nimport Footer from \"../../../Footer\";\nimport TopSection from \"../../HomeV2/TopSection\";\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter } from \"reactstrap\";\nimport trash from \"./../../../Assets/images/templates/trash.svg\";\nimport downloagimg from \"./../../../Assets/images/templates/download.svg\";\nimport {\n apigetVideos,\n apiPath,\n apideleteVideos,\n} from \"../../../Utility/Utility\";\nimport Sidebar from \"../../Profile/Sidebar\";\nimport Loader from \"./../../../Utility/Loader/Loader\";\nimport Top from \"../../Profile/Top\";\nimport download from \"downloadjs\";\nconst MyVideos = (props) => {\n const [modal, setModal] = React.useState(false);\n const toggle = () => setModal(!modal);\n const [media, setMedia] = React.useState(\"\");\n const [data, setData] = React.useState([]);\n const [userToken, setUserToken] = React.useState(\"\");\n const cookies = new Cookies();\n const [userId, setUserId] = React.useState(\"\");\n const [loader, setLoader] = React.useState(true);\n const [successMessage, setSuccessMessage] = React.useState(\"\");\n const [errorMessage, setErrorMessage] = React.useState(\"\");\n const { buttonLabel, className } = props;\n const [blockToDelete, setblockToDelete] = React.useState(\"\");\n const [processing, setProcessing] = React.useState(true);\n React.useEffect(() => {\n const tokens = localStorage.getItem('token');\n // if (cookies.get(\"token\")) {\n if (tokens != null) {\n setUserToken(cookies.get(\"token\"));\n const token = cookies.get(\"token\");\n const decoded = jwt_decode(tokens);\n // console.log(decoded.id)\n setUserId(decoded.id);\n }\n if (userId) {\n axios\n .get(`${apigetVideos}?userId=${userId}`, {})\n .then(function (response) {\n setProcessing(false);\n console.log(response.data.data);\n setData(response.data.data);\n });\n }\n }, [userId]);\n function confirmDelete(id, media) {\n setModal(!modal);\n setblockToDelete(id);\n setMedia(media);\n // console.log(id);\n }\n function deleteBlock() {\n setModal(!modal);\n setProcessing(true);\n let blockId = blockToDelete;\n axios\n .delete(`${apideleteVideos}`, {\n params: {\n mediaId: blockId,\n media: media,\n },\n })\n .then(function (response) {\n //console.log(response.data.message)\n if (response.data.message) {\n setProcessing(false);\n } else {\n setProcessing(false);\n }\n window.location.reload();\n });\n }\n function downloadVideo(videoUrl) {\n download(apiPath + videoUrl);\n }\n return (\n \n \n {/*
*/}\n\n
\n
\n {/*
*/}\n
\n
\n {/*
*/}\n
\n
My Videos \n {data != undefined && data.length > 0 ? (\n
\n {data\n .sort((a, b) => a.order - b.order)\n .map((data, index) => {\n return (\n
\n
\n
\n \n
{data.videoTitle} \n
\n
downloadVideo(data.path)}\n >\n \n Share \n \n
downloadVideo(data.path)}\n >\n \n
\n confirmDelete(data._id, data.path)\n }\n />\n \n
\n
\n
\n );\n })}\n
\n ) : (\n !processing ?\n
\n
No Videos in the List
\n
\n : null\n )}\n
\n Delete Video \n \n Are you sure you want to delete this video?
\n \n \n \n
\n
\n \n confirm\n \n
\n
\n \n Cancel\n \n
\n
\n
\n \n \n \n );\n};\nexport default MyVideos;\n","import React from \"react\";\r\nimport SiteHeader from \"./../../Header/HeaderUser\";\r\nimport Footer from \"../../Footer\";\r\nimport axios from \"axios\";\r\nimport { useRouteMatch, Link } from \"react-router-dom\";\r\nimport download from \"downloadjs\";\r\nimport Player from \"../Templates/Player/Createtemplate\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport CountdownTimer from \"react-component-countdown-timer\";\r\nimport UserAvatar from \"./../../Assets/images/User/Header/default.png\";\r\nimport SideShape3 from \"./../../Assets/images/homeV3/SideShape3.png\";\r\nimport SideShape4 from \"./../../Assets/images/homeV3/SideShape2inverse.png\";\r\nimport Circle2 from \"./../../Assets/images/homeV3/Circle2.png\";\r\nimport HalfCircle from \"./../../Assets/images/homeV3/HalfCircle.png\";\r\nimport Triangle1 from \"./../../Assets/images/homeV3/Triangle1.png\";\r\nimport Circle1 from \"./../../Assets/images/homeV3/Circle1.png\";\r\nimport reveo_TempLogo from \"./../../Assets/images/templates/reveo_TempLogo.png\";\r\nimport \"react-component-countdown-timer/lib/styles.css\";\r\nimport \"slick-carousel/slick/slick.css\";\r\nimport \"slick-carousel/slick/slick-theme.css\";\r\nimport Slider from \"react-slick\";\r\nimport {\r\n apiPreviewVideo,\r\n apiMergeVideo,\r\n apigetAdminTemplate,\r\n apiPath,\r\n} from \"./../../Utility/Utility\";\r\nconst ExportVideo = (props) => {\r\n const [templateData, setTemplateData] = React.useState(\"\");\r\n const [loaderCheck, setLoaderCheck] = React.useState(true);\r\n const [videoSuccess, setVideoSuccess] = React.useState(false);\r\n const [videoError, setVideoError] = React.useState(false);\r\n const [videoUrl, setVideoUrl] = React.useState(\"\");\r\n const [blocks, setBlocks] = React.useState(\"\");\r\n const [time, setTime] = React.useState(\"\");\r\n const match = useRouteMatch(\"/export-video/:templateId/download\");\r\n const {\r\n params: { templateId },\r\n } = match;\r\n let history = useHistory();\r\n // function videosMerged(data) {\r\n // axios\r\n // .post(apiMergeVideo, {\r\n // videos: data,\r\n // templateId: templateId,\r\n // })\r\n // .then((response) => {\r\n // console.log(response);\r\n // setLoaderCheck(false);\r\n // if (response.data.message == \"successfull\") {\r\n // setVideoUrl(response.data.data);\r\n // }\r\n // })\r\n // .catch((error) => {\r\n // console.log(error);\r\n // });\r\n // }\r\n function videoExport() {\r\n axios\r\n .post(apiPreviewVideo, {\r\n templateId: templateId,\r\n })\r\n .then((response) => {\r\n console.log(response);\r\n setLoaderCheck(false);\r\n if (response.data.message == \"successfull\") {\r\n setVideoUrl(response.data.data);\r\n history.push(\"/share/\" + response.data.uploadData._id);\r\n //videosMerged(response.data.data);\r\n setVideoError(false)\r\n } else {\r\n setVideoError(true)\r\n }\r\n })\r\n .catch((error) => {\r\n console.log(error);\r\n });\r\n }\r\n var i = 1;\r\n React.useEffect(() => {\r\n setVideoError(false)\r\n if (templateData == \"\") {\r\n axios\r\n .get(`${apigetAdminTemplate}` + \"?templateId=\" + templateId, {})\r\n .then(function (response) {\r\n console.log(response.data.data[0].blocks);\r\n setTemplateData(response.data.data);\r\n setBlocks(response.data.data[0].blocks);\r\n if (response.data.data[0].blocks.length > 0) {\r\n const sceneLength = parseInt(response.data.data[0].blocks.length);\r\n\r\n let scenetimer = 60 * sceneLength;\r\n\r\n move(scenetimer * 10);\r\n console.log(scenetimer * 10);\r\n setTime(scenetimer);\r\n }\r\n if (i == 1) {\r\n videoExport();\r\n i++;\r\n }\r\n });\r\n }\r\n }, [templateData]);\r\n function downloadVideo() {\r\n download(apiPath + videoUrl);\r\n }\r\n var i = 0;\r\n function move(sceneLength) {\r\n if (i == 0) {\r\n i = 1;\r\n var elem = document.getElementById(\"myBar\");\r\n var width = 0;\r\n var id = setInterval(frame, sceneLength);\r\n function frame() {\r\n if (width >= 100) {\r\n clearInterval(id);\r\n i = 0;\r\n } else {\r\n width++;\r\n elem.style.width = width + \"%\";\r\n elem.innerHTML = width + \"%\";\r\n }\r\n }\r\n }\r\n }\r\n var settings = {\r\n dots: false,\r\n infinite: true,\r\n speed: 1500,\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n autoplaySpeed: 6000,\r\n\r\n };\r\n return (\r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n {videoUrl ? (\r\n
\r\n \r\n
\r\n ) : templateData != \"\" ? (\r\n //
\r\n blocks ? (\r\n
\r\n ) : null\r\n ) : null}\r\n
\r\n
\r\n
\r\n
\r\n {loaderCheck ? (\r\n
\r\n
Your Video is Rendering... \r\n
\r\n
Please Wait
\r\n
Loading...
\r\n
\r\n\r\n {/* {time > 0 ? (\r\n
\r\n ) : null} */}\r\n {/*
\r\n
\r\n ) : (\r\n
\r\n
Download your video \r\n
\r\n Free exports can be downloaded and shared as often as you\r\n like.\r\n
\r\n
\r\n \r\n \r\n \r\n Download video \r\n \r\n \r\n )}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {/*
Export Video */}\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
Your Video is Rendering... \r\n
\r\n {!videoError ?\r\n
\r\n\r\n
\r\n
\r\n Please wait for some time ...
\r\n {/* \r\n Create and download unlimited HD 1080p videos in\r\n mp4.\r\n
\r\n \r\n Easy one click share on social platforms.\r\n
\r\n \r\n Customised videos according to your needs.\r\n
\r\n \r\n Choose from various varieties of templates.\r\n
\r\n \r\n We will notfify you once the video is created\r\n
*/}\r\n \r\n Your video is exporting\r\n
\r\n Hang tight\r\n
\r\n It’s almost done\r\n
\r\n So close\r\n
\r\n \r\n
\r\n
\r\n : null}\r\n {!videoError ?\r\n
Loading...
\r\n : null}\r\n {!videoError ?\r\n
\r\n : null}\r\n\r\n {/* {time > 0 ? (\r\n
\r\n ) : null} */}\r\n {videoError ?\r\n
\r\n Error! error in video export. Please update the scenes and try again\r\n
\r\n : null}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n );\r\n};\r\nexport default ExportVideo;\r\n","/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable no-unused-vars */\n/* eslint-disable react-hooks/rules-of-hooks */\nimport React from \"react\";\nimport { Link } from \"react-router-dom\";\nimport axios from \"axios\";\nimport jwt_decode from \"jwt-decode\";\nimport Cookies from \"universal-cookie\";\nimport UserAvatar from \"./../../Assets/images/User/Header/default.png\";\nimport SideShape3 from \"./../../Assets/images/homeV3/SideShape3.png\";\nimport SideShape4 from \"./../../Assets/images/homeV3/SideShape2inverse.png\";\nimport Circle2 from \"./../../Assets/images/homeV3/Circle2.png\";\nimport HalfCircle from \"./../../Assets/images/homeV3/HalfCircle.png\";\nimport Triangle1 from \"./../../Assets/images/homeV3/Triangle1.png\";\nimport Circle1 from \"./../../Assets/images/homeV3/Circle1.png\";\nimport reveo_TempLogo from \"./../../Assets/images/templates/reveo_TempLogo.png\";\nimport Editing from \"./../../Assets/images/editing.png\";\nimport {\n schemaFname,\n apiUpdateUser,\n apiUploadImage,\n apiPath,\n} from \"./../../Utility/Utility\";\nimport Sidebar from \"./Sidebar\";\nimport Top from \"./Top\";\nconst Profile = () => {\n const [userId, setUserId] = React.useState(\"\");\n const [firstName, setFirstName] = React.useState(\"\");\n const [email, setEmail] = React.useState(\"\");\n const [website, setWebsite] = React.useState(\"\");\n const [agencyname, setAgencyname] = React.useState(\"\");\n const [agencylogo, setAgencylogo] = React.useState(\"\");\n const [profileImage, setProfileImage] = React.useState(\"\");\n const [phone, setPhone] = React.useState(\"\");\n const [userToken, setUserToken] = React.useState(\"\");\n const [loginType, setLoginType] = React.useState(\"\");\n const [successMessage, setSuccessMessage] = React.useState(\"\");\n const [errorMessage, setErrorMessage] = React.useState(\"\");\n const [checkFirstname, setCheckFirstname] = React.useState(false);\n const [processing, setProcessing] = React.useState(false);\n\n const [toggleImg, setToggleImg] = React.useState(false);\n\n const [userImg, setUserImg] = React.useState(\"\");\n const cookies = new Cookies();\n\n React.useEffect(() => {\n const tokens = localStorage.getItem('token');\n // if (cookies.get(\"token\")) {\n if (tokens != null) {\n setUserToken(cookies.get(\"token\"));\n const token = cookies.get(\"token\");\n const decoded = jwt_decode(tokens);\n setUserId(decoded._id);\n setEmail(decoded.email);\n setFirstName(decoded.firstName);\n setPhone(decoded.phone);\n if (decoded.website) {\n setWebsite(decoded.website);\n }\n if (decoded.agencyname) {\n setAgencyname(decoded.agencyname);\n }\n if (decoded.agencylogo) {\n setAgencylogo(decoded.agencylogo);\n }\n if (decoded.profileImage) {\n\n if (decoded.profileImage.indexOf(\"template\") != -1) {\n setProfileImage(apiPath + decoded.profileImage);\n } else {\n setProfileImage(decoded.profileImage);\n }\n\n }\n if (decoded.loginType) {\n setLoginType(decoded.loginType);\n }\n }\n }, [email]);\n\n function handleSubmit(imageUrl) {\n console.log(imageUrl)\n setProcessing(true);\n // API Call\n axios\n .put(apiUpdateUser + userId, {\n firstName: firstName,\n phone: phone,\n agencyname: agencyname,\n agencylogo: agencylogo,\n id: userId,\n website: website,\n profileImage: imageUrl,\n })\n .then((response) => {\n setSuccessMessage(response.data.message);\n const cookies = new Cookies();\n const tokens = localStorage.setItem('token', response.data.token);\n cookies.set(\"token\", response.data.token, { path: \"/\" });\n cookies.set(\"userRole\", response.data.userRole, { path: \"/\" });\n setProcessing(false);\n setTimeout(function () {\n window.location.reload();\n }, 2000);\n })\n .catch((error) => {\n console.log(error);\n setErrorMessage(error.response.data.message);\n setProcessing(false);\n });\n }\n function setformImage(e, img) {\n ///console.log(e.target.files.length);\n for (var i = 0; i < e.target.files.length; i++) {\n var parts = e.target.files[i].type.split(\"/\");\n var result = parts[0];\n if (result == \"image\") {\n const data = new FormData();\n data.append(\"file\", e.target.files[i]);\n data.append(\"userId\", userId);\n data.append(\"noUpload\", true);\n setProcessing(true);\n axios\n .post(`${apiUploadImage}`, data)\n .then((response) => {\n setProcessing(false);\n let fileUrl = response.data.message\n .replace(/\\\\/g, \"/\")\n .substring(\"public\".length);\n let imageUrl = fileUrl.replace(\"sets/\", \"\");\n let updatedImage = imageUrl;\n // console.log(imageUrl)\n setUserImg(imageUrl);\n setToggleImg(!toggleImg)\n handleSubmit(imageUrl)\n })\n .catch((error) => { });\n }\n }\n }\n return (\n \n
\n
\n
\n
\n
\n
\n
Account \n
\n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n
\n {toggleImg &&\n
setformImage(e, 1)}\n className=\"form-control\"\n placeholder=\"User Img\"\n />\n }\n \n {loginType != \"\" ? (\n
\n ) : profileImage ? (\n
\n ) : (\n
\n )}\n {/* {profileImage == \"\" ? (\n
\n ) : (\n
\n )} */}\n
\n {toggleImg == false ?\n
setToggleImg(!toggleImg)}\n >\n Edit Photo\n \n }\n
\n
\n
\n
{firstName} \n
\n \n Agency name \n {website} \n \n\n \n Email \n {email} \n \n \n Phone Number \n {phone} \n \n \n Website \n {website} \n \n \n Agency Logo \n {agencylogo ? (\n \n \n \n
\n
\n
\n
\n
\n {/*
*/}\n
\n {/*
*/}\n
\n
\n
\n
\n
\n
\n
\n
Account \n
\n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Account \n
\n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n
\n
\n
Professional \n
\n $30/month \n
\n
\n or get 3 months free at $270 when billed annually\n
\n
Features \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n
\n
\n
Team \n
\n $20/month \n
\n
\n Each user is $20/month or get 3 months free at $180/user\n when billed annually\n
\n
Features \n
\n \n \n \n
\n
\n
\n
\n
\n
\n
\n \n
\n\n
\n {/*
*/}\n\n
\n
\n
\n
\n
\n
\n
\n
Account \n
\n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n
\n
setformImage(e, 1)}\n className=\"form-control\"\n placeholder=\"User Img\"\n />\n \n Click to update\n
\n \n {loginType != \"\" ? (\n
\n ) : userImg ? (\n
\n ) : (\n
\n )}\n {/* {userImg == \"\" ? (\n
\n ) : (\n
\n )} */}\n
\n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Account \n
\n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n
\n\n
\n {loginType != \"\" ? (\n
\n ) : userImg ? (\n
\n ) : (\n
\n )}\n {/* {userImg == \"\" ? (\n
\n ) : (\n
\n )} */}\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Account \n
\n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n \n \n # \n Plan \n Name \n Email \n Price \n Date \n \n \n \n {data.length > 0\n ? data.map((template, index) => {\n return (\n \n {index + 1} \n {template.product_name} \n {template.buyer_first_name + ' ' + template.buyer_last_name} \n {template.buyer_email} \n ${template.amount} \n {moment(template.createdAt).format(\"ddd, MM Do YYYY\")} \n \n );\n })\n : null}\n \n
\n
\n
\n
\n
\n
}\n \n
\n
\n
\n
\n
\n
\n
Reveo Professional - Monthly \n \n \n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
}\n \n
\n
\n
\n
\n
\n
\n
Reveo Team - Monthly \n
\n
\n \n \n
\n\n
\n
\n Or\n \n
You can pay using paypal and credit card \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
}\n \n
\n
\n
\n
\n
\n
\n
Reveo Team - Annual \n
\n
\n \n \n
\n\n
\n
\n Or\n \n
You can pay using paypal and credit card \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
}\n \n
\n
\n
\n
\n
\n
\n
Reveo Professional- Annual \n \n \n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Reveo Free - Plan \n \n \n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n {/*
*/}\n\n
\n
\n
\n
\n
\n
\n
Team \n \n
\n
\n
\n
\n
Search \n
\n
searchMember(e.currentTarget.value)}\n className=\"form-control\"\n placeholder=\"Search User by Email\"\n />\n\n {errorMessage2 != \"\" ? (\n \n
\n \n Error!\n
\n \n ) : null}\n {errorMessage != \"\" ? (\n
\n \n No Members Found\n
\n \n inviteMember()}\n className=\"btn\"\n >\n Invite\n \n
\n \n ) : null}\n {successMessageInvite ? (\n
\n \n Success!\n
\n \n ) : null}\n
\n
\n {memberList.length > 0 ? (\n memberList.map((member, index) => {\n console.log(member);\n return (\n
\n \n
\n
confirmDelete(member._id)}\n />\n \n
\n
\n {member.memberProfilePic == undefined ? (\n
\n ) : (\n
\n )}\n
\n
\n
\n
{member.memberName} \n
\n \n Email \n {member.memberEmail} \n \n \n Phone Number \n {member.memberPhone} \n \n \n
\n
\n );\n })\n ) : (\n
\n
\n \n No Members Yet\n
\n \n
\n )}\n {showmembers ? (\n
\n
\n
\n
\n {searchResult[0].profileImage == undefined ? (\n
\n ) : (\n
\n )}\n
\n
\n
\n
{searchResult[0].firstName} \n
\n \n Email \n {searchResult[0].email} \n \n \n Phone Number \n {searchResult[0].phone} \n \n \n
\n
\n
\n
\n addMember()} className=\"btn\">\n Add Member\n \n
\n
\n
\n ) : null}\n\n {successMessage != \"\" ? (\n
\n
\n \n Succesfull!\n
\n \n
\n Delete Template \n \n Are you sure you want to delete this member?
\n \n \n \n
\n
\n \n confirm\n \n
\n
\n \n Cancel\n \n
\n
\n
\n \n \n );\n};\nexport default Team;\n","import React from \"react\";\nimport { Link } from \"react-router-dom\";\nimport SiteHeader from \"../../Header/Header\";\nimport Loader from \"../../Utility/Loader/Loader\";\nimport Footer from \"../../Footer\";\nimport SideShape3 from \"./../../Assets/images/homeV3/SideShape3.png\";\nimport SideShape4 from \"./../../Assets/images/homeV3/SideShape2inverse.png\";\nimport Circle2 from \"./../../Assets/images/homeV3/Circle2.png\";\nimport HalfCircle from \"./../../Assets/images/homeV3/HalfCircle.png\";\nimport Triangle1 from \"./../../Assets/images/homeV3/Triangle1.png\";\nimport Circle1 from \"./../../Assets/images/homeV3/Circle1.png\";\nimport reveo_TempLogo from \"./../../Assets/images/templates/reveo_TempLogo.png\";\nimport axios from \"axios\";\n\nimport {\n apiGetTemplateCategories,\n apiGetTemplateCategory,\n apiPath,\n} from \"../../Utility/Utility\";\nimport { useRouteMatch } from \"react-router-dom\";\nconst SuccessPageSignup = () => {\n return (\n \n \n {/*
\n
\n
\n
Success! Video successfully uploaded \n {/* \n
\n
*/}\n
\n
\n
\n
\n
Success! \n \n
\n
\n
\n
\n
\n
Account has been created successfully \n
\n
Verification Email has been sent to your email id. Please confirm email before proceed.
\n
Login\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n );\n};\nexport default SuccessPageSignup;\n","// @flow\r\n\r\nimport React from \"react\";\r\nimport {\r\n BrowserRouter as Router,\r\n Switch,\r\n Route,\r\n Redirect,\r\n} from \"react-router-dom\";\r\n\r\nimport HomePage from \"../Pages/Home\";\r\nimport PricingPage from \"../Pages/Pricing\";\r\nimport VideoPage from \"../Pages/VideoPage\";\r\nimport HomePageV2 from \"../Pages/HomeV2\";\r\nimport SharePage from \"../Pages/SharePage\";\r\nimport ThankyouPage from \"../Pages/ThankyouPage\";\r\nimport SuccessPage from \"../Pages/SuccessPage\";\r\nimport HomePageV3 from \"../Pages/HomeV3\";\r\nimport SupportPage from \"../Pages/Support\";\r\nimport PrivacyPage from \"../Pages/Privacy\";\r\nimport SignupPage from \"../Pages/Signup\";\r\nimport LoginPage from \"../Pages/Login\";\r\nimport ResetPage from \"../Pages/ResetPassword\";\r\nimport TokenVerification from \"../Pages/ResetPassword/TokenVerification\";\r\nimport EmailVerification from \"../Pages/Signup/TokenVerification\";\r\nimport ResetNewPassword from \"../Pages/ResetPassword/NewPassword\";\r\nimport UserHome from \"../Pages/Users/Home\";\r\nimport TemplateOne from \"../Pages/Users/Templates/Template1/Template1\";\r\nimport Block1 from \"../Pages/Users/Templates/Template1/Block/Block1\";\r\nimport Block2 from \"../Pages/Users/Templates/Template1/Block/Block2\";\r\nimport Block3 from \"../Pages/Users/Templates/Template1/Block/Block3\";\r\nimport Block4 from \"../Pages/Users/Templates/Template1/Block/Block4\";\r\n\r\nimport TemplateNew1 from \"../Pages/Templates/Scenes/Scene1\";\r\nimport TemplateScene2 from \"../Pages/Templates/Scenes/Scene2\";\r\nimport TemplateScene3 from \"../Pages/Templates/Scenes/Scene3\";\r\nimport TemplateScene4 from \"../Pages/Templates/Scenes/Scene4\";\r\nimport TemplateScene5 from \"../Pages/Templates/Scenes/Scene5\";\r\nimport TemplateScene6 from \"../Pages/Templates/Scenes/Scene6\";\r\nimport TemplateScene7 from \"../Pages/Templates/Scenes/Scene7\";\r\nimport TemplateScene8 from \"../Pages/Templates/Scenes/Scene8\";\r\nimport TemplateScene9 from \"../Pages/Templates/Scenes/Scene9\";\r\nimport TemplateScene10 from \"../Pages/Templates/Scenes/Scene10\";\r\nimport TemplateScene11 from \"../Pages/Templates/Scenes/Scene11\";\r\nimport TemplateScene12 from \"../Pages/Templates/Scenes/Scene12\";\r\nimport TemplateScene13 from \"../Pages/Templates/Scenes/Scene13\";\r\nimport TemplateScene14 from \"../Pages/Templates/Scenes/Scene14\";\r\nimport TemplateScene15 from \"../Pages/Templates/Scenes/Scene15\";\r\nimport TemplateScene16 from \"../Pages/Templates/Scenes/Scene16\";\r\nimport TemplateScene17 from \"../Pages/Templates/Scenes/Scene17\";\r\nimport TemplateScene18 from \"../Pages/Templates/Scenes/Scene18\";\r\nimport TemplateScene19 from \"../Pages/Templates/Scenes/Scene19\";\r\nimport TemplateScene20 from \"../Pages/Templates/Scenes/Scene20\";\r\nimport TemplateScene21 from \"../Pages/Templates/Scenes/Scene21\";\r\nimport TemplateScene22 from \"../Pages/Templates/Scenes/Scene22\";\r\nimport TemplateScene23 from \"../Pages/Templates/Scenes/Scene23\";\r\nimport TemplateScene24 from \"../Pages/Templates/Scenes/Scene24\";\r\nimport TemplateScene25 from \"../Pages/Templates/Scenes/Scene25\";\r\nimport TemplateScene26 from \"../Pages/Templates/Scenes/Scene26\";\r\nimport TemplateScene27 from \"../Pages/Templates/Scenes/Scene27\";\r\nimport TemplateScene28 from \"../Pages/Templates/Scenes/Scene28\";\r\nimport TemplateScene29 from \"../Pages/Templates/Scenes/Scene29\";\r\nimport TemplateScene30 from \"../Pages/Templates/Scenes/Scene30\";\r\nimport TemplateScene31 from \"../Pages/Templates/Scenes/Scene31\";\r\nimport TemplateScene32 from \"../Pages/Templates/Scenes/Scene32\";\r\nimport TemplateScene33 from \"../Pages/Templates/Scenes/Scene33\";\r\nimport TemplateScene34 from \"../Pages/Templates/Scenes/Scene34\";\r\nimport TemplateScene35 from \"../Pages/Templates/Scenes/Scene35\";\r\nimport TemplateScene36 from \"../Pages/Templates/Scenes/Scene36\";\r\nimport TemplateScene37 from \"../Pages/Templates/Scenes/Scene37\";\r\nimport TemplateScene38 from \"../Pages/Templates/Scenes/Scene38\";\r\nimport TemplateScene39 from \"../Pages/Templates/Scenes/Scene39\";\r\nimport TemplateScene40 from \"../Pages/Templates/Scenes/Scene40\";\r\nimport TemplateScene41 from \"../Pages/Templates/Scenes/Scene41\";\r\nimport TemplateScene42 from \"../Pages/Templates/Scenes/Scene42\";\r\nimport TemplateScene43 from \"../Pages/Templates/Scenes/Scene43\";\r\nimport TemplateScene44 from \"../Pages/Templates/Scenes/Scene44\";\r\nimport TemplateScene45 from \"../Pages/Templates/Scenes/Scene45\";\r\nimport TemplateScene46 from \"../Pages/Templates/Scenes/Scene46\";\r\nimport TemplateScene47 from \"../Pages/Templates/Scenes/Scene47\";\r\nimport TemplateScene48 from \"../Pages/Templates/Scenes/Scene48\";\r\nimport TemplateScene49 from \"../Pages/Templates/Scenes/Scene49\";\r\nimport TemplateScene50 from \"../Pages/Templates/Scenes/Scene50\";\r\nimport TemplateScene51 from \"../Pages/Templates/Scenes/Scene51\";\r\nimport TemplateScene52 from \"../Pages/Templates/Scenes/Scene52\";\r\nimport TemplateScene53 from \"../Pages/Templates/Scenes/Scene53\";\r\nimport TemplateScene54 from \"../Pages/Templates/Scenes/Scene54\";\r\nimport TemplateScene55 from \"../Pages/Templates/Scenes/Scene55\";\r\nimport TemplateScene56 from \"../Pages/Templates/Scenes/Scene56\";\r\nimport TemplateScene57 from \"../Pages/Templates/Scenes/Scene57\";\r\nimport TemplateScene58 from \"../Pages/Templates/Scenes/Scene58\";\r\nimport TemplateScene59 from \"../Pages/Templates/Scenes/Scene59\";\r\nimport TemplateScene60 from \"../Pages/Templates/Scenes/Scene60\";\r\nimport TemplateScene61 from \"../Pages/Templates/Scenes/Scene61\";\r\nimport TemplateScene62 from \"../Pages/Templates/Scenes/Scene62\";\r\nimport TemplateScene63 from \"../Pages/Templates/Scenes/Scene63\";\r\nimport TemplateScene64 from \"../Pages/Templates/Scenes/Scene64\";\r\nimport TemplateScene65 from \"../Pages/Templates/Scenes/Scene65\";\r\nimport TemplateScene66 from \"../Pages/Templates/Scenes/Scene66\";\r\nimport TemplateScene67 from \"../Pages/Templates/Scenes/Scene67\";\r\nimport TemplateScene68 from \"../Pages/Templates/Scenes/Scene68\";\r\nimport TemplateScene69 from \"../Pages/Templates/Scenes/Scene69\";\r\nimport TemplateScene70 from \"../Pages/Templates/Scenes/Scene70\";\r\nimport TemplateScene71 from \"../Pages/Templates/Scenes/Scene71\";\r\nimport TemplateScene72 from \"../Pages/Templates/Scenes/Scene72\";\r\nimport TemplateScene73 from \"../Pages/Templates/Scenes/Scene73\"; \r\nimport TemplateScene74 from \"../Pages/Templates/Scenes/Scene74\"; \r\nimport TemplateScene75 from \"../Pages/Templates/Scenes/Scene75\"; \r\nimport TemplateScene76 from \"../Pages/Templates/Scenes/Scene76\"; \r\nimport TemplateScene77 from \"../Pages/Templates/Scenes/Scene77\"; \r\nimport TemplateScene78 from \"../Pages/Templates/Scenes/Scene78\"; \r\nimport TemplateSceneLast2 from \"../Pages/Templates/Scenes/SceneLast2\";\r\n\r\nimport TemplateSceneLast from \"../Pages/Templates/Scenes/SceneLast\";\r\nimport CreateTemplate from \"../Pages/CreateTemplate/\";\r\nimport MyTemplates from \"../Pages/Users/MyTemplates\";\r\nimport MyVideos from \"../Pages/Users/MyVideos\";\r\nimport ExportVideo from \"../Pages/ExportVideo\";\r\nimport ProfilePage from \"../Pages/Profile\";\r\nimport ChangePassword from \"../Pages/Profile/ChangePassword\";\r\nimport UpgradePlan from \"../Pages/Profile/UpgradePlan\";\r\nimport EditProfile from \"../Pages/Profile/EditProfile\";\r\nimport Billing from \"../Pages/Profile/Billing\";\r\nimport Transactions from \"../Pages/Profile/Transactions\";\r\nimport ProductMonthly from \"../Pages/Plans/ProductMonthly\";\r\nimport TeamMonthly from \"../Pages/Plans/TeamMonthly\"\r\nimport TeamAnnual from \"../Pages/Plans/TeamAnnual\"\r\nimport ProfessionalAnnual from \"../Pages/Plans/ProfessionalAnnual\"\r\nimport FreePlan from \"../Pages/Plans/FreePlan\"\r\nimport Team from \"../Pages/Team/\";\r\nimport jwt_decode from \"jwt-decode\";\r\nimport Cookies from \"universal-cookie\";\r\nimport { Home } from \"@material-ui/icons\";\r\nimport SuccessPageSignup from \"../Pages/Signup/Sucess\";\r\nconst Routes = () => {\r\n const [userToken, setUserToken] = React.useState(\"\");\r\n const cookies = new Cookies();\r\n const [userName, setUserName] = React.useState(\"\");\r\n const [redirectPath, setRedirectPath] = React.useState(false);\r\n const [processing, setProcessing] = React.useState(false);\r\n React.useEffect(() => {\r\n const tokens = localStorage.getItem('token');\r\n // if (cookies.get(\"token\")) {\r\n if (tokens != null) {\r\n setUserToken(cookies.get(\"token\"));\r\n const token = cookies.get(\"token\");\r\n const decoded = jwt_decode(tokens);\r\n setUserName(decoded.firstName);\r\n }\r\n }, [userToken, cookies]);\r\n\r\n return (\r\n \r\n \r\n \r\n {/* \r\n\r\n \r\n \r\n );\r\n};\r\n\r\nexport default Routes;\r\n","// @flow\n\nimport React from 'react';\n\nimport Routes from './SiteRoute'; \n\n const Routers = () =>{\n return \n
\n );\n}\n\nexport default App;\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.0/8 are considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl, {\n headers: { 'Service-Worker': 'script' },\n })\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready\n .then(registration => {\n registration.unregister();\n })\n .catch(error => {\n console.error(error.message);\n });\n }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(\n ,\n document.getElementById('root') \n); \n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.unregister();\n","module.exports = __webpack_public_path__ + \"static/media/close.077a02be.svg\";","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAEAYAAAD6+a2dAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAABgAAAAYADwa0LPAAAAB3RJTUUH5QkEBhgXDWq0mwAABI5JREFUeNrt3D9sG3UUB/D3oiIkhgoh/rhxQUBUupXaHUjcomYoHTqA+LMw2Z6bOrGTxokTKkVV7Dh1639SCqLCNurQYhQJIQrqlC53Bal3qtQFpQwIRIsqITAsLHkMzc+odp049u9+d2e/zxIptn93v/u++9nnewkAY4wxxhhjjDHGGHOV0Ju3/tZGFxfDTxox7eD8vN37wxQRwYdChqFpROJn8CPziO49c2a716PdE2CdCS4a72urySSuwxx4ZmdbPY9KOIpr6XQFfbWRxMxM4+NcAC7TbvCNWhUCF4BLdBp8k+dpEL49d668fMgTODs9zQXgcKHfjbL+TiYDcThA8clJWeOKFWGX3RNkjyfOeIjDAfLIC17AJKzC7VqNVwCHkbbUt7IP/8D83Fx5znds5GoyyQXgEKqDF7/mArCZ1cFjDVOwJ5EorfqqgVdSqcbH+TOATULfGF/p3lQKqvAieZqvz7u1XfD159l9IPrNI8FX7Qu+/ny7D0i/cFrw9dfZfWB6nVODr7/e7gPUq5wefH0cew9T73FL8PXx7DlMvcdtwdfHVXuYek+QzN16cmkJw7RGo/G47PGpBC9DaXa2gv5nAp8uLckenwugQ24PXuAC2KFeCV4YaHvimy1Gwa9vrWnFkyet3jHnICJCDJIxrHtzOauCx6fgQ1yJxVQFL2xbAMEpY49+cXoaf6ECVRcWcDfehX+LxdAJ40u9cuqUqh1VTwRvjtzcm81iGFaoOj4ufSubZ3xpxf/jyOVsVvUsW74FhN4y7+re06fBSzWqLi83PSEMBmhEkIan8bnx8fI1/wcjwWJR9QTkUxu86jO+UdMKEB40o9pnU1MtgxdK4IcAIsThT3qQz7t/Reiv4IX6ChD8znxCe2lyEq/Q93Alk9nxSK5dER4GHx40czcXcjk6DkfpeCQifSsOC17AUNa4qK/HYnAb3qAH5893PaJrCkFN8BCBazQ0M1P2++cPv5BO2z3rRgNwj96lzz0eaSM2vDU476pB1RlP9+HZaNSpwQsDoj0YfqJ9kPi/Vahrm4XgnKsGtWd8BQ+dCLyWy9k33/Y0XQWIPzWCIVyHZCIhbUu2vTXwUr+VlpeBlvWqKSsEi4MX89iL/8AP0Wh5yDcR+CKflz8Pa237VbD7CoGD34m27wU4vxAeBh8aN+/pQ/k8/AX34bLEzxw9Fryw45tBzisEDr4bHd8NtKwBou1C4OBl6Pp2sPpCUBM8XcWzdGxiorLi+/nwwUJB2vgOI60fIJgx39PevnAB79A8zESj0vZwMxCMwCXMRiIbH+MuGtu/Hz+hAhwdG5O9nX4JXpDeEGJ1b5x0fRq8YFlHkOMLoc+DFyxvCbO6hWrHOPhHKOsJtL0QOPjHUt4UqrwQOPgt2dAVrKbzhoNvT9tdwfIgIhJV0KcP/xqN4nW4gdclBtPw/QEHvzUH/F2ApJs3rulEchYHFIDQYSFw8F1xUAEIbRYCB9/rxHf+xm/aq4VC/Z8h3zAuaZmNDftbzJgim1cNunlESxWL4deNYd0r8R4AY4wxxhhjjDHGWJ/4DwsfQaI6fjvGAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTA5LTA0VDA2OjI0OjIzKzAwOjAwk2kI7gAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wOS0wNFQwNjoyNDoyMyswMDowMOI0sFIAAAAASUVORK5CYII=\""],"sourceRoot":""}