From 79c8e9b5667736d6581c450f2291be362e8a7a07 Mon Sep 17 00:00:00 2001 From: Vasyl Ilba Date: Fri, 29 Sep 2023 18:41:47 +0300 Subject: [PATCH] removes unnecessary state 'reload'; uses mediaSource instead --- src/preview/dist/js/index_bundle.js | 2 +- src/preview/src/components/AdPreview.js | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/preview/dist/js/index_bundle.js b/src/preview/dist/js/index_bundle.js index f2ac2ba..a9be9f5 100644 --- a/src/preview/dist/js/index_bundle.js +++ b/src/preview/dist/js/index_bundle.js @@ -3415,7 +3415,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"AdPreview\": () => (/* binding */ AdPreview)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Card/Card.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Box/Box.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tab/Tab.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardMedia/CardMedia.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardContent/CardContent.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Divider/Divider.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tooltip/Tooltip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Chip/Chip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/IconButton/IconButton.js\");\n/* harmony import */ var _mui_lab_TabContext__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/lab/TabContext */ \"./node_modules/@mui/lab/TabContext/TabContext.js\");\n/* harmony import */ var _mui_lab_TabList__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @mui/lab/TabList */ \"./node_modules/@mui/lab/TabList/TabList.js\");\n/* harmony import */ var _mui_icons_material_Replay__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! @mui/icons-material/Replay */ \"./node_modules/@mui/icons-material/Replay.js\");\n/* harmony import */ var _mui_icons_material_Gif__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/icons-material/Gif */ \"./node_modules/@mui/icons-material/Gif.js\");\n/* harmony import */ var _mui_icons_material_Image__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/icons-material/Image */ \"./node_modules/@mui/icons-material/Image.js\");\n/* harmony import */ var _mui_icons_material_Movie__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/icons-material/Movie */ \"./node_modules/@mui/icons-material/Movie.js\");\n/* harmony import */ var _mui_icons_material_OpenInNew__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! @mui/icons-material/OpenInNew */ \"./node_modules/@mui/icons-material/OpenInNew.js\");\n/* harmony import */ var _mui_icons_material_FolderZip__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @mui/icons-material/FolderZip */ \"./node_modules/@mui/icons-material/FolderZip.js\");\n/* harmony import */ var _mui_icons_material_Done__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! @mui/icons-material/Done */ \"./node_modules/@mui/icons-material/Done.js\");\n/* harmony import */ var _mui_icons_material_Clear__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! @mui/icons-material/Clear */ \"./node_modules/@mui/icons-material/Clear.js\");\n// import styles from \"./Previews.module.scss\";\n\n\n\n\n\n\n\n\n\n\n\n\n\n\ngsap.registerPlugin(GSDevTools);\nconst AdPreview = props => {\n const {\n ad,\n gsdevtools,\n maxFileSize = 150\n } = props;\n const [mediaType, setMediaType] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"iframe\");\n const [mediaSource, setMediaSource] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(ad.output.html.url);\n const [activeConfigTab, setActiveConfigTab] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"html,iframe\");\n const [animation, setAnimation] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();\n const [reload, setReload] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n const adPreviewCard = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();\n const gsDevContainer = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();\n\n // add gsdevtools listeners\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n if (gsdevtools !== \"true\") return;\n gsDevContainer.current && (gsDevContainer.current.innerHTML = '');\n const ifr = adPreviewCard.current;\n\n // have to use onload in order to set events to the right element (React render thing)\n ifr.onload = () => {\n if (!ifr.contentWindow) return;\n ifr.contentWindow.addEventListener(\"getMainTimeline\", e => setAnimation(e.detail), false);\n ifr.contentWindow.dispatchEvent(new CustomEvent(\"previewReady\"));\n };\n }, [reload, mediaSource]);\n\n // create devtools box with animation\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n if (!animation) return;\n animation.pause(0);\n const tl = gsap.timeline();\n tl.to(animation, {\n duration: animation.totalDuration(),\n totalProgress: 1,\n ease: Linear.easeNone\n });\n GSDevTools.create({\n container: gsDevContainer.current,\n animation: tl,\n visibility: \"visible\",\n globalSync: false\n });\n }, [animation]);\n const extensionTypes = [\"jpg,img\", \"mp4,video\", \"gif,img\"];\n const extensionIcons = {\n html: \"\",\n zip: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_FolderZip__WEBPACK_IMPORTED_MODULE_1__[\"default\"], null),\n jpg: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Image__WEBPACK_IMPORTED_MODULE_2__[\"default\"], null),\n mp4: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Movie__WEBPACK_IMPORTED_MODULE_3__[\"default\"], null),\n gif: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Gif__WEBPACK_IMPORTED_MODULE_4__[\"default\"], null)\n };\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n const [type, mediaType] = activeConfigTab.split(\",\");\n setMediaType(mediaType);\n if (type === \"html\") {\n setMediaSource(ad.output.html.url);\n } else {\n setMediaSource(ad.output[type].url);\n }\n }, [activeConfigTab]);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n sx: {\n minWidth: `${ad.width}px`,\n maxWidth: `${ad.width}px`,\n height: \"fit-content\"\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n sx: {\n padding: \"0px 10px\",\n margin: \"10px 0\",\n wordBreak: \"break-all\"\n },\n align: \"center\",\n variant: \"body2\"\n }, ad.bundleName), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_lab_TabContext__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n value: activeConfigTab\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n sx: {\n borderColor: \"divider\"\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_lab_TabList__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n variant: \"fullWidth\",\n onChange: (event, newValue) => setActiveConfigTab(newValue)\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n wrapped: true,\n sx: {\n minWidth: \"50px\"\n },\n label: \"html\",\n value: \"html,iframe\"\n }), extensionTypes.map(item => {\n const [extension, type] = item.split(\",\");\n if (ad.output[extension]) return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n key: item,\n disabled: !ad.output[extension]?.url,\n icon: extensionIcons[extension],\n sx: {\n minWidth: \"50px\"\n },\n value: item\n });\n })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {\n ref: adPreviewCard,\n component: mediaType,\n scrolling: \"no\",\n style: {\n width: ad.width,\n height: ad.height\n },\n height: ad.height,\n width: ad.width,\n src: mediaSource,\n id: ad.bundleName,\n className: ad.bundleName,\n frameBorder: \"0\",\n autoPlay: true,\n controls: true\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_12__[\"default\"], null, gsdevtools === \"true\" && animation && activeConfigTab.split(\",\")[0] === \"html\" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n ref: gsDevContainer\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n light: true,\n sx: {\n margin: \"20px 0\"\n }\n })) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n marginBottom: \"20px\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n title: \"Bundle size\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {\n icon: Math.round(ad.output.zip.size / 1024) <= maxFileSize ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Done__WEBPACK_IMPORTED_MODULE_16__[\"default\"], null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Clear__WEBPACK_IMPORTED_MODULE_17__[\"default\"], null),\n label: `${Math.round(ad.output.zip.size / 1024)} KB`,\n color: Math.round(ad.output.zip.size / 1024) <= maxFileSize ? \"success\" : \"error\"\n })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n light: true,\n sx: {\n margin: \"20px 0\"\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n display: \"flex\",\n flexWrap: \"wrap\",\n justifyContent: \"space-between\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n title: \"Reload\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_18__[\"default\"], {\n onClick: e => {\n activeConfigTab === \"html,iframe\" ? adPreviewCard.current.src = ad.output.html.url : setActiveConfigTab(\"html,iframe\");\n setReload(v => !v);\n },\n color: \"primary\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Replay__WEBPACK_IMPORTED_MODULE_19__[\"default\"], null))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n title: \"Open in new window\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_18__[\"default\"], {\n onClick: () => window.open(ad.output.html.url),\n color: \"primary\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_OpenInNew__WEBPACK_IMPORTED_MODULE_20__[\"default\"], null)))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n display: \"flex\",\n flexWrap: \"wrap\"\n }, Object.keys(ad.output).map(extension => {\n if (ad.output[extension] && extension != 'html') return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n key: extension,\n title: `Download ${extension.toUpperCase()} ${!ad.output[extension]?.url ? \"(loading)\" : \"\"}`\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_18__[\"default\"], {\n disabled: !ad.output[extension]?.url,\n onClick: e => window.location.href = ad.output[extension]?.url,\n color: \"primary\"\n }, extensionIcons[extension])));\n }))))));\n};\n\n//# sourceURL=webpack://display-dev-server-preview/./src/components/AdPreview.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"AdPreview\": () => (/* binding */ AdPreview)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Card/Card.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Box/Box.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tab/Tab.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardMedia/CardMedia.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/CardContent/CardContent.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Divider/Divider.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tooltip/Tooltip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Chip/Chip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/IconButton/IconButton.js\");\n/* harmony import */ var _mui_lab_TabContext__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/lab/TabContext */ \"./node_modules/@mui/lab/TabContext/TabContext.js\");\n/* harmony import */ var _mui_lab_TabList__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @mui/lab/TabList */ \"./node_modules/@mui/lab/TabList/TabList.js\");\n/* harmony import */ var _mui_icons_material_Replay__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! @mui/icons-material/Replay */ \"./node_modules/@mui/icons-material/Replay.js\");\n/* harmony import */ var _mui_icons_material_Gif__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/icons-material/Gif */ \"./node_modules/@mui/icons-material/Gif.js\");\n/* harmony import */ var _mui_icons_material_Image__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @mui/icons-material/Image */ \"./node_modules/@mui/icons-material/Image.js\");\n/* harmony import */ var _mui_icons_material_Movie__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @mui/icons-material/Movie */ \"./node_modules/@mui/icons-material/Movie.js\");\n/* harmony import */ var _mui_icons_material_OpenInNew__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! @mui/icons-material/OpenInNew */ \"./node_modules/@mui/icons-material/OpenInNew.js\");\n/* harmony import */ var _mui_icons_material_FolderZip__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @mui/icons-material/FolderZip */ \"./node_modules/@mui/icons-material/FolderZip.js\");\n/* harmony import */ var _mui_icons_material_Done__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! @mui/icons-material/Done */ \"./node_modules/@mui/icons-material/Done.js\");\n/* harmony import */ var _mui_icons_material_Clear__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! @mui/icons-material/Clear */ \"./node_modules/@mui/icons-material/Clear.js\");\n// import styles from \"./Previews.module.scss\";\n\n\n\n\n\n\n\n\n\n\n\n\n\n\ngsap.registerPlugin(GSDevTools);\nconst AdPreview = props => {\n const {\n ad,\n gsdevtools,\n maxFileSize = 150\n } = props;\n const [mediaType, setMediaType] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"iframe\");\n const [mediaSource, setMediaSource] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(ad.output.html.url);\n const [activeConfigTab, setActiveConfigTab] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"html,iframe\");\n const [animation, setAnimation] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();\n const adPreviewCard = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();\n const gsDevContainer = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();\n\n // add gsdevtools listeners\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n if (gsdevtools !== \"true\") return;\n gsDevContainer.current && (gsDevContainer.current.innerHTML = '');\n const ifr = adPreviewCard.current;\n\n // have to use onload in order to set events to the right element (React render thing)\n ifr.onload = () => {\n if (!ifr.contentWindow) return;\n ifr.contentWindow.addEventListener(\"getMainTimeline\", e => setAnimation(e.detail), false);\n ifr.contentWindow.dispatchEvent(new CustomEvent(\"previewReady\"));\n };\n }, [mediaSource]);\n\n // create devtools box with animation\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n if (!animation) return;\n animation.pause(0);\n const tl = gsap.timeline();\n tl.to(animation, {\n duration: animation.totalDuration(),\n totalProgress: 1,\n ease: Linear.easeNone\n });\n gsDevContainer.current && (gsDevContainer.current.innerHTML = '');\n GSDevTools.create({\n container: gsDevContainer.current,\n animation: tl,\n visibility: \"visible\",\n globalSync: false\n });\n }, [animation]);\n const extensionTypes = [\"jpg,img\", \"mp4,video\", \"gif,img\"];\n const extensionIcons = {\n html: \"\",\n zip: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_FolderZip__WEBPACK_IMPORTED_MODULE_1__[\"default\"], null),\n jpg: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Image__WEBPACK_IMPORTED_MODULE_2__[\"default\"], null),\n mp4: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Movie__WEBPACK_IMPORTED_MODULE_3__[\"default\"], null),\n gif: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Gif__WEBPACK_IMPORTED_MODULE_4__[\"default\"], null)\n };\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n const [type, mediaType] = activeConfigTab.split(\",\");\n setMediaType(mediaType);\n if (type === \"html\") {\n setMediaSource(ad.output.html.url);\n } else {\n setMediaSource(ad.output[type].url);\n }\n }, [activeConfigTab]);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n sx: {\n minWidth: `${ad.width}px`,\n maxWidth: `${ad.width}px`,\n height: \"fit-content\"\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n sx: {\n padding: \"0px 10px\",\n margin: \"10px 0\",\n wordBreak: \"break-all\"\n },\n align: \"center\",\n variant: \"body2\"\n }, ad.bundleName), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_lab_TabContext__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n value: activeConfigTab\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n sx: {\n borderColor: \"divider\"\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_lab_TabList__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n variant: \"fullWidth\",\n onChange: (event, newValue) => setActiveConfigTab(newValue)\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n wrapped: true,\n sx: {\n minWidth: \"50px\"\n },\n label: \"html\",\n value: \"html,iframe\"\n }), extensionTypes.map(item => {\n const [extension, type] = item.split(\",\");\n if (ad.output[extension]) return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n key: item,\n disabled: !ad.output[extension]?.url,\n icon: extensionIcons[extension],\n sx: {\n minWidth: \"50px\"\n },\n value: item\n });\n })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {\n ref: adPreviewCard,\n component: mediaType,\n scrolling: \"no\",\n style: {\n width: ad.width,\n height: ad.height\n },\n height: ad.height,\n width: ad.width,\n src: mediaSource,\n id: ad.bundleName,\n className: ad.bundleName,\n frameBorder: \"0\",\n autoPlay: true,\n controls: true\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_12__[\"default\"], null, gsdevtools === \"true\" && animation && activeConfigTab.split(\",\")[0] === \"html\" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n ref: gsDevContainer\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n light: true,\n sx: {\n margin: \"20px 0\"\n }\n })) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n marginBottom: \"20px\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n title: \"Bundle size\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {\n icon: Math.round(ad.output.zip.size / 1024) <= maxFileSize ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Done__WEBPACK_IMPORTED_MODULE_16__[\"default\"], null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Clear__WEBPACK_IMPORTED_MODULE_17__[\"default\"], null),\n label: `${Math.round(ad.output.zip.size / 1024)} KB`,\n color: Math.round(ad.output.zip.size / 1024) <= maxFileSize ? \"success\" : \"error\"\n })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n light: true,\n sx: {\n margin: \"20px 0\"\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n display: \"flex\",\n flexWrap: \"wrap\",\n justifyContent: \"space-between\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n title: \"Reload\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_18__[\"default\"], {\n onClick: e => {\n activeConfigTab === \"html,iframe\" ? adPreviewCard.current.src = ad.output.html.url : setActiveConfigTab(\"html,iframe\");\n },\n color: \"primary\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Replay__WEBPACK_IMPORTED_MODULE_19__[\"default\"], null))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n title: \"Open in new window\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_18__[\"default\"], {\n onClick: () => window.open(ad.output.html.url),\n color: \"primary\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_OpenInNew__WEBPACK_IMPORTED_MODULE_20__[\"default\"], null)))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n display: \"flex\",\n flexWrap: \"wrap\"\n }, Object.keys(ad.output).map(extension => {\n if (ad.output[extension] && extension != 'html') return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n key: extension,\n title: `Download ${extension.toUpperCase()} ${!ad.output[extension]?.url ? \"(loading)\" : \"\"}`\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_18__[\"default\"], {\n disabled: !ad.output[extension]?.url,\n onClick: e => window.location.href = ad.output[extension]?.url,\n color: \"primary\"\n }, extensionIcons[extension])));\n }))))));\n};\n\n//# sourceURL=webpack://display-dev-server-preview/./src/components/AdPreview.js?"); /***/ }), diff --git a/src/preview/src/components/AdPreview.js b/src/preview/src/components/AdPreview.js index d07e2d0..3394569 100644 --- a/src/preview/src/components/AdPreview.js +++ b/src/preview/src/components/AdPreview.js @@ -27,7 +27,6 @@ export const AdPreview = (props) => { const [activeConfigTab, setActiveConfigTab] = useState("html,iframe"); const [animation, setAnimation] = useState(); - const [reload, setReload] = useState(false); const adPreviewCard = useRef(); @@ -47,7 +46,7 @@ export const AdPreview = (props) => { ifr.contentWindow.addEventListener("getMainTimeline", e => setAnimation(e.detail), false) ifr.contentWindow.dispatchEvent(new CustomEvent("previewReady")) } - }, [reload, mediaSource]) + }, [mediaSource]) // create devtools box with animation useEffect(() => { @@ -56,6 +55,7 @@ export const AdPreview = (props) => { animation.pause(0); const tl = gsap.timeline(); tl.to(animation, { duration: animation.totalDuration(), totalProgress: 1, ease: Linear.easeNone }); + gsDevContainer.current && (gsDevContainer.current.innerHTML = '') GSDevTools.create({ container: gsDevContainer.current, animation: tl, @@ -139,7 +139,6 @@ export const AdPreview = (props) => { { activeConfigTab === "html,iframe" ? (adPreviewCard.current.src = ad.output.html.url) : setActiveConfigTab("html,iframe"); - setReload(v => !v); }} color="primary" >