From 22d1c404e6cb0ff370639bbb832bc40256be5fbe Mon Sep 17 00:00:00 2001 From: Vasyl Ilba Date: Mon, 14 Aug 2023 14:59:57 +0300 Subject: [PATCH 1/3] adds custom scrollbar, fixes fieldset overflow for filters, fixes html empty button appearing on banenr card controls --- src/preview/dist/js/index_bundle.js | 6 +-- src/preview/src/App.css | 49 ++++++------------------- src/preview/src/components/AdPreview.js | 2 +- src/preview/src/components/Previews.js | 2 +- 4 files changed, 17 insertions(+), 42 deletions(-) diff --git a/src/preview/dist/js/index_bundle.js b/src/preview/dist/js/index_bundle.js index 838be89..3d666f5 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/Tooltip/Tooltip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Chip/Chip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Divider/Divider.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_15__ = __webpack_require__(/*! @mui/icons-material/Done */ \"./node_modules/@mui/icons-material/Done.js\");\n/* harmony import */ var _mui_icons_material_Clear__WEBPACK_IMPORTED_MODULE_16__ = __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\nconst AdPreview = props => {\n const {\n ad,\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 adPreviewCard = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();\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 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, /*#__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_6__[\"default\"], {\n sx: {\n marginBottom: \"10px\"\n },\n noWrap: true,\n align: \"left\",\n variant: \"body2\"\n }, \"Bundle size:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n title: \"Bundle size\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"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_15__[\"default\"], null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Clear__WEBPACK_IMPORTED_MODULE_16__[\"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_17__[\"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_13__[\"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_13__[\"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]) return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_13__[\"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/Tooltip/Tooltip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Chip/Chip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Divider/Divider.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_15__ = __webpack_require__(/*! @mui/icons-material/Done */ \"./node_modules/@mui/icons-material/Done.js\");\n/* harmony import */ var _mui_icons_material_Clear__WEBPACK_IMPORTED_MODULE_16__ = __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\nconst AdPreview = props => {\n const {\n ad,\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 adPreviewCard = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();\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 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, /*#__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_6__[\"default\"], {\n sx: {\n marginBottom: \"10px\"\n },\n noWrap: true,\n align: \"left\",\n variant: \"body2\"\n }, \"Bundle size:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n title: \"Bundle size\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"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_15__[\"default\"], null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Clear__WEBPACK_IMPORTED_MODULE_16__[\"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_17__[\"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_13__[\"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_13__[\"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_13__[\"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?"); /***/ }), @@ -3426,7 +3426,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 */ \"default\": () => (/* binding */ Previews)\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 _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Previews.module.scss */ \"./src/components/Previews.module.scss\");\n/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-router-dom */ \"./node_modules/react-router-dom/dist/index.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/AppBar/AppBar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Toolbar/Toolbar.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_7__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/FormControl/FormControl.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/InputLabel/InputLabel.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Select/Select.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/OutlinedInput/OutlinedInput.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Box/Box.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Chip/Chip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/ListSubheader/ListSubheader.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/MenuItem/MenuItem.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/TablePagination/TablePagination.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Button/Button.js\");\n/* harmony import */ var _mui_icons_material_Cancel__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @mui/icons-material/Cancel */ \"./node_modules/@mui/icons-material/Cancel.js\");\n/* harmony import */ var _AdPreview__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./AdPreview */ \"./src/components/AdPreview.js\");\n\n\n\n\n\n\n\nconst paginate = (array, page_size, page_number) => {\n return array.slice((page_number - 1) * page_size, page_number * page_size);\n};\nconst getFiltersFromAds = (ads, searchParams) => {\n // returns array with all the filtergroup arrays containing all the unique filters\n // it also initially sets the filters based on the searchparams\n let filterGroups = [];\n ads.forEach(ad => {\n const bundleSplits = ad.bundleName.split(\"_\");\n bundleSplits.forEach((bundleSplit, index) => {\n if (!filterGroups[index]) filterGroups[index] = [];\n filterGroups[index].push(bundleSplit);\n });\n });\n filterGroups = filterGroups.map(filterGroup => [...new Set(filterGroup)]); // make them all unique\n\n // get the initial filter(s) from the searchParams ?filter=hk,en;friendsfamily;160x600\n const searchParamsArray = searchParams.get(\"filter\") ? searchParams.get(\"filter\").split(\";\").map(filterGroup => filterGroup.split(\",\")) : [];\n return filterGroups.map(filterGroup => {\n return filterGroup.map(filter => {\n return {\n value: filter,\n selected: searchParamsArray.flat().includes(filter)\n };\n });\n });\n};\nconst composeSearchParamsFromFilters = filters => {\n return filters.map(filterGroup => {\n return filterGroup.filter(filter => filter.selected).map(filter => filter.value).join(\",\");\n }).filter(filterGroup => filterGroup.length > 0).join(\";\");\n};\nconst getAdsListFromFilters = (adsList, filters) => {\n return adsList.filter(ad => {\n // en_friendsfamily_ill_300x250\n return ad.bundleName.split(\"_\").every((bundleSplit, index) => {\n const isFilteringOnGroup = filters[index].filter(filter => filter.selected).length > 0; // if any of the 'selected' keys are true in these objects, it means we're filtering on that group.\n\n if (isFilteringOnGroup) {\n const [filterValue] = filters[index].filter(filter => filter.value === bundleSplit).map(filter => filter.selected);\n return filterValue;\n } else {\n return true; // if we're not filtering on this group, all keys in this group are allowed (because no specific filter is selected in that group)\n }\n });\n });\n};\n\nconst getLabelFromFilterGroup = filterGroup => {\n if (filterGroup.every(filter => filter.value.match(/[0-9]+x[0-9]+/i))) return \"Dimensions\"; // if it matches dimensions, like 300x500 ;\n if (filterGroup.every(filter => filter.value.match(/^[a-z]{2}$/i))) return \"Language\"; // if string is 2 chars long and a-z or A-Z\n return \"Category\";\n};\nfunction Previews({\n data\n}) {\n const [searchParams, setSearchParams] = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_3__.useSearchParams)();\n const [ads, setAds] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n const [filters, setFilters] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(getFiltersFromAds(data.ads, searchParams));\n const [page, setPage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0);\n const [itemsPerPage, setItemsPerPage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(10);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n setAds(getAdsListFromFilters(data.ads, filters));\n setSearchParams({\n filter: decodeURI(composeSearchParamsFromFilters(filters))\n });\n setPage(0);\n }, [filters]);\n const getSelectedFilters = () => {\n // returns flat array of selected filters i.e. [\"en\",\"300x400\"] (the input element needs this as a value)\n return filters.flat().filter(filter => filter.selected).map(filter => filter.value);\n };\n const handleChangeFilter = event => {\n // make deep copy of filters state\n let updatedFilters = JSON.parse(JSON.stringify(filters));\n\n // set each filter's selected value based on the value from the event\n updatedFilters.flat().forEach(filter => {\n filter.selected = event.target.value.includes(filter.value);\n });\n setFilters(updatedFilters);\n };\n function handleFilterDelete(e, value) {\n let updatedFilters = JSON.parse(JSON.stringify(filters));\n\n // set each filter's selected value based on the value from the event\n updatedFilters.flat().forEach(filter => {\n if (filter.value === value) {\n console.log(\"found the one to be deleted\");\n console.log(filter);\n filter.selected = false;\n }\n });\n setFilters(updatedFilters);\n }\n\n // handle button(s)\n\n const handleDownloadZips = event => {\n console.log(event);\n window.open(\"all.zip\");\n };\n\n // handle pages\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n const handleChangeRowsPerPage = event => {\n setItemsPerPage(parseInt(event.target.value, 10));\n setPage(0);\n };\n const pageAds = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n return paginate(ads, itemsPerPage, page + 1);\n }, [page, itemsPerPage, ads]);\n\n // generate page\n return /*#__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_4__[\"default\"], {\n position: \"sticky\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n className: _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].toolbar\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n align: \"left\",\n variant: \"h5\",\n component: \"div\"\n }, \"Preview\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n sx: {\n m: 1,\n minWidth: 150,\n maxWidth: \"40%\"\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n id: \"demo-multiple-chip-label\"\n }, \"Filters\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n labelId: \"demo-multiple-chip-label\",\n id: \"demo-multiple-chip\",\n multiple: true,\n value: getSelectedFilters(),\n onChange: handleChangeFilter,\n input: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n id: \"select-multiple-chip\",\n label: \"Chip\"\n }),\n renderValue: selected => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {\n sx: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: 0.5\n }\n }, selected.map(value => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {\n onDelete: e => handleFilterDelete(e, value),\n key: value,\n label: value,\n deleteIcon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Cancel__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n onMouseDown: event => event.stopPropagation()\n })\n })))\n }, filters.filter(filterGroup => filterGroup.length > 1) // only show filtergroups with more than 1 filter\n .map((filterGroup, filterGroupIndex) => [/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"default\"], null, getLabelFromFilterGroup(filterGroup)), filterGroup.map((filter, filterIndex) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {\n key: filter.value,\n value: filter.value\n }, filter.value))]))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_16__[\"default\"], {\n labelRowsPerPage: \"Ads per page:\",\n component: \"div\",\n count: ads.length,\n page: page,\n onPageChange: handleChangePage,\n rowsPerPage: itemsPerPage,\n onRowsPerPageChange: handleChangeRowsPerPage\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_17__[\"default\"], {\n onClick: handleDownloadZips,\n color: \"inherit\"\n }, \"Download Zips\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].previews\n }, pageAds.length > 0 && pageAds.map(ad => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_AdPreview__WEBPACK_IMPORTED_MODULE_2__.AdPreview, {\n key: ad.bundleName,\n ad: ad,\n maxFileSize: data.maxFileSize\n })), pageAds.length < 1 && \"No ads found with the current combination of filters\"));\n}\n\n//# sourceURL=webpack://display-dev-server-preview/./src/components/Previews.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Previews)\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 _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Previews.module.scss */ \"./src/components/Previews.module.scss\");\n/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-router-dom */ \"./node_modules/react-router-dom/dist/index.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/AppBar/AppBar.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Toolbar/Toolbar.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_7__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/FormControl/FormControl.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/InputLabel/InputLabel.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Select/Select.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/OutlinedInput/OutlinedInput.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Box/Box.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Chip/Chip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/ListSubheader/ListSubheader.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/MenuItem/MenuItem.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/TablePagination/TablePagination.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Button/Button.js\");\n/* harmony import */ var _mui_icons_material_Cancel__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @mui/icons-material/Cancel */ \"./node_modules/@mui/icons-material/Cancel.js\");\n/* harmony import */ var _AdPreview__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./AdPreview */ \"./src/components/AdPreview.js\");\n\n\n\n\n\n\n\nconst paginate = (array, page_size, page_number) => {\n return array.slice((page_number - 1) * page_size, page_number * page_size);\n};\nconst getFiltersFromAds = (ads, searchParams) => {\n // returns array with all the filtergroup arrays containing all the unique filters\n // it also initially sets the filters based on the searchparams\n let filterGroups = [];\n ads.forEach(ad => {\n const bundleSplits = ad.bundleName.split(\"_\");\n bundleSplits.forEach((bundleSplit, index) => {\n if (!filterGroups[index]) filterGroups[index] = [];\n filterGroups[index].push(bundleSplit);\n });\n });\n filterGroups = filterGroups.map(filterGroup => [...new Set(filterGroup)]); // make them all unique\n\n // get the initial filter(s) from the searchParams ?filter=hk,en;friendsfamily;160x600\n const searchParamsArray = searchParams.get(\"filter\") ? searchParams.get(\"filter\").split(\";\").map(filterGroup => filterGroup.split(\",\")) : [];\n return filterGroups.map(filterGroup => {\n return filterGroup.map(filter => {\n return {\n value: filter,\n selected: searchParamsArray.flat().includes(filter)\n };\n });\n });\n};\nconst composeSearchParamsFromFilters = filters => {\n return filters.map(filterGroup => {\n return filterGroup.filter(filter => filter.selected).map(filter => filter.value).join(\",\");\n }).filter(filterGroup => filterGroup.length > 0).join(\";\");\n};\nconst getAdsListFromFilters = (adsList, filters) => {\n return adsList.filter(ad => {\n // en_friendsfamily_ill_300x250\n return ad.bundleName.split(\"_\").every((bundleSplit, index) => {\n const isFilteringOnGroup = filters[index].filter(filter => filter.selected).length > 0; // if any of the 'selected' keys are true in these objects, it means we're filtering on that group.\n\n if (isFilteringOnGroup) {\n const [filterValue] = filters[index].filter(filter => filter.value === bundleSplit).map(filter => filter.selected);\n return filterValue;\n } else {\n return true; // if we're not filtering on this group, all keys in this group are allowed (because no specific filter is selected in that group)\n }\n });\n });\n};\n\nconst getLabelFromFilterGroup = filterGroup => {\n if (filterGroup.every(filter => filter.value.match(/[0-9]+x[0-9]+/i))) return \"Dimensions\"; // if it matches dimensions, like 300x500 ;\n if (filterGroup.every(filter => filter.value.match(/^[a-z]{2}$/i))) return \"Language\"; // if string is 2 chars long and a-z or A-Z\n return \"Category\";\n};\nfunction Previews({\n data\n}) {\n const [searchParams, setSearchParams] = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_3__.useSearchParams)();\n const [ads, setAds] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);\n const [filters, setFilters] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(getFiltersFromAds(data.ads, searchParams));\n const [page, setPage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0);\n const [itemsPerPage, setItemsPerPage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(10);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n setAds(getAdsListFromFilters(data.ads, filters));\n setSearchParams({\n filter: decodeURI(composeSearchParamsFromFilters(filters))\n });\n setPage(0);\n }, [filters]);\n const getSelectedFilters = () => {\n // returns flat array of selected filters i.e. [\"en\",\"300x400\"] (the input element needs this as a value)\n return filters.flat().filter(filter => filter.selected).map(filter => filter.value);\n };\n const handleChangeFilter = event => {\n // make deep copy of filters state\n let updatedFilters = JSON.parse(JSON.stringify(filters));\n\n // set each filter's selected value based on the value from the event\n updatedFilters.flat().forEach(filter => {\n filter.selected = event.target.value.includes(filter.value);\n });\n setFilters(updatedFilters);\n };\n function handleFilterDelete(e, value) {\n let updatedFilters = JSON.parse(JSON.stringify(filters));\n\n // set each filter's selected value based on the value from the event\n updatedFilters.flat().forEach(filter => {\n if (filter.value === value) {\n console.log(\"found the one to be deleted\");\n console.log(filter);\n filter.selected = false;\n }\n });\n setFilters(updatedFilters);\n }\n\n // handle button(s)\n\n const handleDownloadZips = event => {\n console.log(event);\n window.open(\"all.zip\");\n };\n\n // handle pages\n const handleChangePage = (event, newPage) => {\n setPage(newPage);\n };\n const handleChangeRowsPerPage = event => {\n setItemsPerPage(parseInt(event.target.value, 10));\n setPage(0);\n };\n const pageAds = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n return paginate(ads, itemsPerPage, page + 1);\n }, [page, itemsPerPage, ads]);\n\n // generate page\n return /*#__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_4__[\"default\"], {\n position: \"sticky\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n className: _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].toolbar\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n align: \"left\",\n variant: \"h5\",\n component: \"div\"\n }, \"Preview\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n sx: {\n m: 1,\n minWidth: 150,\n maxWidth: \"40%\"\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n id: \"demo-multiple-chip-label\"\n }, \"Filters\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n labelId: \"demo-multiple-chip-label\",\n id: \"demo-multiple-chip\",\n multiple: true,\n value: getSelectedFilters(),\n onChange: handleChangeFilter,\n input: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_10__[\"default\"], {\n id: \"select-multiple-chip\",\n label: \"Filters\"\n }),\n renderValue: selected => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_11__[\"default\"], {\n sx: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: 0.5\n }\n }, selected.map(value => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {\n onDelete: e => handleFilterDelete(e, value),\n key: value,\n label: value,\n deleteIcon: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Cancel__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n onMouseDown: event => event.stopPropagation()\n })\n })))\n }, filters.filter(filterGroup => filterGroup.length > 1) // only show filtergroups with more than 1 filter\n .map((filterGroup, filterGroupIndex) => [/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"default\"], null, getLabelFromFilterGroup(filterGroup)), filterGroup.map((filter, filterIndex) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {\n key: filter.value,\n value: filter.value\n }, filter.value))]))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_16__[\"default\"], {\n labelRowsPerPage: \"Ads per page:\",\n component: \"div\",\n count: ads.length,\n page: page,\n onPageChange: handleChangePage,\n rowsPerPage: itemsPerPage,\n onRowsPerPageChange: handleChangeRowsPerPage\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_17__[\"default\"], {\n onClick: handleDownloadZips,\n color: \"inherit\"\n }, \"Download Zips\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: _Previews_module_scss__WEBPACK_IMPORTED_MODULE_1__[\"default\"].previews\n }, pageAds.length > 0 && pageAds.map(ad => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_AdPreview__WEBPACK_IMPORTED_MODULE_2__.AdPreview, {\n key: ad.bundleName,\n ad: ad,\n maxFileSize: data.maxFileSize\n })), pageAds.length < 1 && \"No ads found with the current combination of filters\"));\n}\n\n//# sourceURL=webpack://display-dev-server-preview/./src/components/Previews.js?"); /***/ }), @@ -3514,7 +3514,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".App {\\n /*text-align: center;*/\\n height: 100%;\\n display: flex;\\n flex-wrap: wrap;\\n color: #fff;\\n}\\n\\n.App-logo {\\n height: 40vmin;\\n pointer-events: none;\\n}\\n\\n@media (prefers-reduced-motion: no-preference) {\\n .App-logo {\\n animation: App-logo-spin infinite 20s linear;\\n }\\n}\\n.App-header {\\n background-color: #282c34;\\n min-height: 100vh;\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: center;\\n font-size: calc(10px + 2vmin);\\n color: white;\\n}\\n\\n.App-link {\\n color: #61dafb;\\n}\\n\\n@keyframes App-logo-spin {\\n from {\\n transform: rotate(0deg);\\n }\\n to {\\n transform: rotate(360deg);\\n }\\n}\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://display-dev-server-preview/./src/App.css?./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"html {\\n scrollbar-width: thin;\\n scrollbar-color: #fff #121212;\\n}\\nhtml::-webkit-scrollbar {\\n width: 1rem;\\n}\\nhtml::-webkit-scrollbar-track {\\n background-color: #121212;\\n}\\nhtml::-webkit-scrollbar-thumb {\\n background-color: #fff;\\n border-radius: 1rem;\\n border: 3px solid #121212;\\n}\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://display-dev-server-preview/./src/App.css?./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js"); /***/ }), diff --git a/src/preview/src/App.css b/src/preview/src/App.css index a196461..62ab492 100644 --- a/src/preview/src/App.css +++ b/src/preview/src/App.css @@ -1,43 +1,18 @@ -.App { - /*text-align: center;*/ - height: 100%; - display: flex; - flex-wrap: wrap; +html { + scrollbar-width: thin; + scrollbar-color: #fff #121212; - color: #fff; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; + &::-webkit-scrollbar { + width: 1rem; } -} -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); + &::-webkit-scrollbar-track { + background-color: #121212; } - to { - transform: rotate(360deg); + + &::-webkit-scrollbar-thumb { + background-color: #fff; + border-radius: 1rem; + border: 3px solid #121212; } } diff --git a/src/preview/src/components/AdPreview.js b/src/preview/src/components/AdPreview.js index bd0f685..20e8c1f 100644 --- a/src/preview/src/components/AdPreview.js +++ b/src/preview/src/components/AdPreview.js @@ -111,7 +111,7 @@ export const AdPreview = (props) => { {Object.keys(ad.output).map((extension) => { - if (ad.output[extension]) + if (ad.output[extension] && extension != 'html') return ( diff --git a/src/preview/src/components/Previews.js b/src/preview/src/components/Previews.js index c4c0a01..cb53e0a 100644 --- a/src/preview/src/components/Previews.js +++ b/src/preview/src/components/Previews.js @@ -171,7 +171,7 @@ export default function Previews({ data }) { multiple value={getSelectedFilters()} onChange={handleChangeFilter} - input={} + input={} renderValue={(selected) => ( {selected.map((value) => ( From 0fa7359969e1e16c7b7e88b44195d244296f9515 Mon Sep 17 00:00:00 2001 From: Vasyl Ilba Date: Fri, 18 Aug 2023 13:21:55 +0300 Subject: [PATCH 2/3] custom scrollbar for all elements --- src/preview/dist/js/index_bundle.js | 2 +- src/preview/src/App.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/preview/dist/js/index_bundle.js b/src/preview/dist/js/index_bundle.js index 3d666f5..3f6f61d 100644 --- a/src/preview/dist/js/index_bundle.js +++ b/src/preview/dist/js/index_bundle.js @@ -3514,7 +3514,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"html {\\n scrollbar-width: thin;\\n scrollbar-color: #fff #121212;\\n}\\nhtml::-webkit-scrollbar {\\n width: 1rem;\\n}\\nhtml::-webkit-scrollbar-track {\\n background-color: #121212;\\n}\\nhtml::-webkit-scrollbar-thumb {\\n background-color: #fff;\\n border-radius: 1rem;\\n border: 3px solid #121212;\\n}\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://display-dev-server-preview/./src/App.css?./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"* {\\n scrollbar-width: thin;\\n scrollbar-color: #fff #121212;\\n}\\n*::-webkit-scrollbar {\\n width: 1rem;\\n}\\n*::-webkit-scrollbar-track {\\n background-color: #121212;\\n}\\n*::-webkit-scrollbar-thumb {\\n background-color: #fff;\\n border-radius: 1rem;\\n border: 3px solid #121212;\\n}\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://display-dev-server-preview/./src/App.css?./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js"); /***/ }), diff --git a/src/preview/src/App.css b/src/preview/src/App.css index 62ab492..6613fc8 100644 --- a/src/preview/src/App.css +++ b/src/preview/src/App.css @@ -1,4 +1,4 @@ -html { +* { scrollbar-width: thin; scrollbar-color: #fff #121212; From 1fb1cddb00a2bc589fa6f9ebd63c3db770510242 Mon Sep 17 00:00:00 2001 From: Vasyl Ilba Date: Mon, 18 Sep 2023 13:18:37 +0300 Subject: [PATCH 3/3] adds scrolling:no for iframes to fix zoom overflow and empty scrollbars in safari --- src/preview/dist/js/index_bundle.js | 2 +- src/preview/src/components/AdPreview.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/preview/dist/js/index_bundle.js b/src/preview/dist/js/index_bundle.js index 3f6f61d..303fbaa 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/Tooltip/Tooltip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Chip/Chip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Divider/Divider.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_15__ = __webpack_require__(/*! @mui/icons-material/Done */ \"./node_modules/@mui/icons-material/Done.js\");\n/* harmony import */ var _mui_icons_material_Clear__WEBPACK_IMPORTED_MODULE_16__ = __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\nconst AdPreview = props => {\n const {\n ad,\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 adPreviewCard = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();\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 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, /*#__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_6__[\"default\"], {\n sx: {\n marginBottom: \"10px\"\n },\n noWrap: true,\n align: \"left\",\n variant: \"body2\"\n }, \"Bundle size:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n title: \"Bundle size\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"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_15__[\"default\"], null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Clear__WEBPACK_IMPORTED_MODULE_16__[\"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_17__[\"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_13__[\"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_13__[\"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_13__[\"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/Tooltip/Tooltip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Chip/Chip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Divider/Divider.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_15__ = __webpack_require__(/*! @mui/icons-material/Done */ \"./node_modules/@mui/icons-material/Done.js\");\n/* harmony import */ var _mui_icons_material_Clear__WEBPACK_IMPORTED_MODULE_16__ = __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\nconst AdPreview = props => {\n const {\n ad,\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 adPreviewCard = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();\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, /*#__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_6__[\"default\"], {\n sx: {\n marginBottom: \"10px\"\n },\n noWrap: true,\n align: \"left\",\n variant: \"body2\"\n }, \"Bundle size:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_13__[\"default\"], {\n title: \"Bundle size\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_14__[\"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_15__[\"default\"], null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Clear__WEBPACK_IMPORTED_MODULE_16__[\"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_17__[\"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_13__[\"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_13__[\"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_13__[\"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 20e8c1f..1bc1a41 100644 --- a/src/preview/src/components/AdPreview.js +++ b/src/preview/src/components/AdPreview.js @@ -63,7 +63,7 @@ export const AdPreview = (props) => { - +