From d16f5029731a0b01e83aefc93b20ac053c4b5814 Mon Sep 17 00:00:00 2001 From: Vasyl Ilba Date: Fri, 6 Sep 2024 17:55:13 +0300 Subject: [PATCH] new custom info chips feature --- src/preview/dist/js/index_bundle.js | 13 ++++++++++++- src/preview/src/components/AdPreview.js | 17 +++++++++++++++++ src/webpack/buildPreview.js | 3 +++ src/webpack/devServer.js | 1 + src/webpack/devServerParallel.js | 1 + 5 files changed, 34 insertions(+), 1 deletion(-) diff --git a/src/preview/dist/js/index_bundle.js b/src/preview/dist/js/index_bundle.js index 6d7b604..4df7a49 100644 --- a/src/preview/dist/js/index_bundle.js +++ b/src/preview/dist/js/index_bundle.js @@ -416,6 +416,17 @@ eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/he /***/ }), +/***/ "./node_modules/@mui/icons-material/Info.js": +/*!**************************************************!*\ + !*** ./node_modules/@mui/icons-material/Info.js ***! + \**************************************************/ +/***/ ((__unused_webpack_module, exports, __webpack_require__) => { + +"use strict"; +eval("\n\nvar _interopRequireDefault = __webpack_require__(/*! @babel/runtime/helpers/interopRequireDefault */ \"./node_modules/@babel/runtime/helpers/interopRequireDefault.js\");\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n}));\nexports[\"default\"] = void 0;\nvar _createSvgIcon = _interopRequireDefault(__webpack_require__(/*! ./utils/createSvgIcon */ \"./node_modules/@mui/icons-material/utils/createSvgIcon.js\"));\nvar _jsxRuntime = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\nvar _default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)(\"path\", {\n d: \"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\"\n}), 'Info');\nexports[\"default\"] = _default;\n\n//# sourceURL=webpack://display-dev-server-preview/./node_modules/@mui/icons-material/Info.js?"); + +/***/ }), + /***/ "./node_modules/@mui/icons-material/Movie.js": /*!***************************************************!*\ !*** ./node_modules/@mui/icons-material/Movie.js ***! @@ -3426,7 +3437,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_FolderOpen__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! @mui/icons-material/FolderOpen */ \"./node_modules/@mui/icons-material/FolderOpen.js\");\n/* harmony import */ var _mui_icons_material_CameraEnhance__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! @mui/icons-material/CameraEnhance */ \"./node_modules/@mui/icons-material/CameraEnhance.js\");\n// import styles from \"./Previews.module.scss\";\n\n\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 timestamp,\n maxFileSize = 150\n } = props;\n const cachedHTML = `${ad.output.html.url}?r=${timestamp}`;\n const [mediaType, setMediaType] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"iframe\");\n const [mediaSource, setMediaSource] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(cachedHTML);\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(cachedHTML);\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 className: \"card\"\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 TabIndicatorProps: extensionTypes.filter(item => {\n const [extension, type] = item.split(\",\");\n return ad.output[extension];\n }).length ? {} : {\n style: {\n display: 'none'\n }\n }\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), ad.output?.zip?.size || ad.output?.unzip?.size || ad.quality ? /*#__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 marginBottom: \"20px\",\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"10px\",\n justifyContent: \"space-evenly\",\n className: \"chips\"\n }, ad.output?.zip?.size ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n title: `Compressed size: ${(ad.output.zip.size / 1024).toFixed(1)} KB`\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {\n icon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_FolderZip__WEBPACK_IMPORTED_MODULE_1__[\"default\"], null),\n label: `${Math.floor(ad.output.zip.size / 1024)} KB`,\n color: ad.output.zip.size / 1024 <= maxFileSize ? \"success\" : \"error\"\n })) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null), ad.output?.unzip?.size ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n title: `Uncompressed size: ${(ad.output.unzip.size / 1024).toFixed(1)} KB`\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {\n icon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_FolderOpen__WEBPACK_IMPORTED_MODULE_16__[\"default\"], null),\n label: `${Math.floor(ad.output.unzip.size / 1024)} KB`,\n color: ad.output.unzip.size / 1024 <= maxFileSize ? \"success\" : \"error\"\n })) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null), ad.quality && gsdevtools === \"true\" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n title: \"Asset quality\",\n className: \"quality\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {\n icon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_CameraEnhance__WEBPACK_IMPORTED_MODULE_17__[\"default\"], null),\n label: `${ad.quality}`,\n color: ad.quality > 85 ? \"success\" : ad.quality > 70 ? \"warning\" : \"error\"\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_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\"], {\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 = cachedHTML : 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] && ad.output[extension].url && 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_19__ = __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_20__ = __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_21__ = __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_FolderOpen__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! @mui/icons-material/FolderOpen */ \"./node_modules/@mui/icons-material/FolderOpen.js\");\n/* harmony import */ var _mui_icons_material_CameraEnhance__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! @mui/icons-material/CameraEnhance */ \"./node_modules/@mui/icons-material/CameraEnhance.js\");\n/* harmony import */ var _mui_icons_material_Info__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! @mui/icons-material/Info */ \"./node_modules/@mui/icons-material/Info.js\");\n// import styles from \"./Previews.module.scss\";\n\n\n\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 timestamp,\n maxFileSize = 150\n } = props;\n const cachedHTML = `${ad.output.html.url}?r=${timestamp}`;\n const [mediaType, setMediaType] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(\"iframe\");\n const [mediaSource, setMediaSource] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(cachedHTML);\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(cachedHTML);\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 className: \"card\"\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 TabIndicatorProps: extensionTypes.filter(item => {\n const [extension, type] = item.split(\",\");\n return ad.output[extension];\n }).length ? {} : {\n style: {\n display: 'none'\n }\n }\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), ad.output?.zip?.size || ad.output?.unzip?.size || ad.quality ? /*#__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 marginBottom: \"20px\",\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"10px\",\n justifyContent: \"space-evenly\",\n className: \"chips\"\n }, ad.output?.zip?.size ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n title: `Compressed size: ${(ad.output.zip.size / 1024).toFixed(1)} KB`\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {\n icon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_FolderZip__WEBPACK_IMPORTED_MODULE_1__[\"default\"], null),\n label: `${Math.floor(ad.output.zip.size / 1024)} KB`,\n color: ad.output.zip.size / 1024 <= maxFileSize ? \"success\" : \"error\"\n })) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null), ad.output?.unzip?.size ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n title: `Uncompressed size: ${(ad.output.unzip.size / 1024).toFixed(1)} KB`\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {\n icon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_FolderOpen__WEBPACK_IMPORTED_MODULE_16__[\"default\"], null),\n label: `${Math.floor(ad.output.unzip.size / 1024)} KB`,\n color: ad.output.unzip.size / 1024 <= maxFileSize ? \"success\" : \"error\"\n })) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null), ad.quality && gsdevtools === \"true\" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n title: \"Asset quality\",\n className: \"quality\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {\n icon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_CameraEnhance__WEBPACK_IMPORTED_MODULE_17__[\"default\"], null),\n label: `${ad.quality}`,\n color: ad.quality > 85 ? \"success\" : ad.quality > 70 ? \"warning\" : \"error\"\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_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), gsdevtools === \"true\" && ad.info ? /*#__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 marginBottom: \"20px\",\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"10px\",\n justifyContent: \"flex-start\",\n className: \"chips\"\n }, Object.entries(ad.info).map(([name, value]) => {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n title: name,\n key: name\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {\n icon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Info__WEBPACK_IMPORTED_MODULE_18__[\"default\"], null),\n label: value,\n color: \"info\"\n }));\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\"], {\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_19__[\"default\"], {\n onClick: e => {\n activeConfigTab === \"html,iframe\" ? adPreviewCard.current.src = cachedHTML : setActiveConfigTab(\"html,iframe\");\n },\n color: \"primary\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Replay__WEBPACK_IMPORTED_MODULE_20__[\"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_19__[\"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_21__[\"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] && ad.output[extension].url && 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_19__[\"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 9f9e0b4..8bf6936 100644 --- a/src/preview/src/components/AdPreview.js +++ b/src/preview/src/components/AdPreview.js @@ -16,6 +16,7 @@ import FolderIcon from "@mui/icons-material/FolderOpen"; import DoneIcon from "@mui/icons-material/Done"; import ClearIcon from "@mui/icons-material/Clear"; import Quality from "@mui/icons-material/CameraEnhance"; +import InfoIcon from '@mui/icons-material/Info'; import LoadingButton from "@mui/lab/LoadingButton"; @@ -156,6 +157,22 @@ export const AdPreview = (props) => { : <> } + { + gsdevtools === "true" && ad.info + ? <> + + { + Object.entries(ad.info).map(([name, value]) => { + return + } label={value} color={"info"} /> + + }) + } + + + + : <> + } diff --git a/src/webpack/buildPreview.js b/src/webpack/buildPreview.js index ac377a0..0fab258 100644 --- a/src/webpack/buildPreview.js +++ b/src/webpack/buildPreview.js @@ -113,6 +113,9 @@ module.exports = async function buildPreview(result, qualities, outputDir) { }, ...additionalOutputs }, + info: (result && result[bundleName]) + ? result[bundleName].settings.data.settings.info + : undefined } }) )) diff --git a/src/webpack/devServer.js b/src/webpack/devServer.js index 2775354..ba9d810 100644 --- a/src/webpack/devServer.js +++ b/src/webpack/devServer.js @@ -100,6 +100,7 @@ ${chalk.grey.bold('-------------------------------------------------------')} url, }, }, + info: e.data.settings.info } }) }) diff --git a/src/webpack/devServerParallel.js b/src/webpack/devServerParallel.js index c6c9ff3..4fa6dde 100644 --- a/src/webpack/devServerParallel.js +++ b/src/webpack/devServerParallel.js @@ -114,6 +114,7 @@ ${chalk.grey.bold('-------------------------------------------------------')} url, }, }, + info: e.data.settings.info } }) })