From 1fb1cddb00a2bc589fa6f9ebd63c3db770510242 Mon Sep 17 00:00:00 2001 From: Vasyl Ilba Date: Mon, 18 Sep 2023 13:18:37 +0300 Subject: [PATCH] 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) => { - +