From 7120d13d478aebf0fac9b8f5ea8cfdfa48911e10 Mon Sep 17 00:00:00 2001 From: Vasyl Ilba Date: Thu, 12 Sep 2024 23:17:20 +0300 Subject: [PATCH] add support for local logos; remove remote logos --- src/preview/dist/js/index_bundle.js | 2 +- src/preview/src/components/Previews.js | 4 ++-- src/webpack/buildPreview.js | 13 +++++++++++++ src/webpack/devServer.js | 9 ++++++++- src/webpack/devServerParallel.js | 9 ++++++++- 5 files changed, 32 insertions(+), 5 deletions(-) diff --git a/src/preview/dist/js/index_bundle.js b/src/preview/dist/js/index_bundle.js index 63676ff..d5c974e 100644 --- a/src/preview/dist/js/index_bundle.js +++ b/src/preview/dist/js/index_bundle.js @@ -3448,7 +3448,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/Box/Box.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tooltip/Tooltip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Button/Button.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/FormControl/FormControl.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/InputLabel/InputLabel.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Select/Select.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/OutlinedInput/OutlinedInput.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Chip/Chip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/ListSubheader/ListSubheader.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/MenuItem/MenuItem.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/TablePagination/TablePagination.js\");\n/* harmony import */ var _mui_icons_material_Cancel__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! @mui/icons-material/Cancel */ \"./node_modules/@mui/icons-material/Cancel.js\");\n/* harmony import */ var _mui_icons_material_Cached__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @mui/icons-material/Cached */ \"./node_modules/@mui/icons-material/Cached.js\");\n/* harmony import */ var _AdPreview__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./AdPreview */ \"./src/components/AdPreview.js\");\n\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 [gsdevtools, setGSDevTools] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(searchParams.get('gsdevtools'));\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)(+searchParams.get('page') || 0);\n const [itemsPerPage, setItemsPerPage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(+searchParams.get('perpage') || 10);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n setAds(getAdsListFromFilters(data.ads, filters));\n const filter = decodeURI(composeSearchParamsFromFilters(filters));\n const collectFilters = {};\n filter && (collectFilters.filter = filter);\n gsdevtools && (collectFilters.gsdevtools = gsdevtools);\n page && (collectFilters.page = page);\n itemsPerPage && itemsPerPage != 10 && (collectFilters.perpage = itemsPerPage);\n setSearchParams(collectFilters);\n }, [filters, page, itemsPerPage, gsdevtools]);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n if (gsdevtools !== \"true\") return;\n window.addEventListener('keydown', e => {\n if (e.defaultPrevented) return;\n if (e.key === \" \") {\n e.preventDefault();\n }\n });\n }, []);\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 setPage(0);\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 filter.selected = false;\n }\n });\n setFilters(updatedFilters);\n setPage(0);\n }\n\n // handle button(s)\n\n const handleDownloadZips = event => {\n // console.log(event);\n window.open(\"all.zip\");\n };\n const handleReloadDynamicData = async e => {\n const res = await fetch('reload_dynamic_data');\n if (res.status === 200) location.reload();\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 // toggle devtools\n let GSKeySequence = [];\n document.addEventListener('keydown', event => {\n GSKeySequence.push(event.key);\n if (GSKeySequence.includes('g') && GSKeySequence.includes('s')) {\n setGSDevTools(!gsdevtools);\n window.location.reload();\n }\n });\n document.addEventListener('keyup', event => {\n GSKeySequence = GSKeySequence.filter(key => key !== event.key);\n });\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 sx: {\n display: 'flex',\n alignItems: 'center'\n }\n }, data.isGoogleSpreadsheetBanner ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n title: \"Reload dynamic data\",\n sx: {\n marginRight: \"10px\"\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n className: \"dynamic-reload\",\n onClick: handleReloadDynamicData,\n color: \"inherit\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Cached__WEBPACK_IMPORTED_MODULE_9__[\"default\"], null))) : /*#__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_6__[\"default\"], {\n className: \"logos\",\n display: \"flex\",\n gap: \"0px\",\n alignItems: \"center\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"img\", {\n src: \"Monks-Logo_Small_White.png\"\n }), pageAds.length > 0 && pageAds[0].client && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n display: \"flex\",\n gap: \"10px\",\n alignItems: \"center\",\n sx: {\n marginRight: \"10px\"\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, \"\\xD7\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"img\", {\n src: pageAds[0].client\n }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n title: new Date(data.timestamp).toLocaleString(),\n sx: {\n marginLeft: \"10px\"\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_10__[\"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_11__[\"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_12__[\"default\"], {\n id: \"demo-multiple-chip-label\"\n }, \"Filters\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_13__[\"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_14__[\"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_6__[\"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_15__[\"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_16__[\"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_17__[\"default\"], null, getLabelFromFilterGroup(filterGroup)), filterGroup.map((filter, filterIndex) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_18__[\"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_19__[\"default\"], {\n labelRowsPerPage: \"Ads per page:\",\n component: \"div\",\n count: ads.length,\n page: ads.length ? page : 0,\n onPageChange: handleChangePage,\n rowsPerPage: itemsPerPage,\n onRowsPerPageChange: handleChangeRowsPerPage\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"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 gsdevtools: gsdevtools,\n key: ad.bundleName,\n ad: ad,\n maxFileSize: ad.maxFileSize,\n timestamp: data.timestamp\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/Box/Box.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Tooltip/Tooltip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Button/Button.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Typography/Typography.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/FormControl/FormControl.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/InputLabel/InputLabel.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Select/Select.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/OutlinedInput/OutlinedInput.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/Chip/Chip.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/ListSubheader/ListSubheader.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/MenuItem/MenuItem.js\");\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! @mui/material */ \"./node_modules/@mui/material/TablePagination/TablePagination.js\");\n/* harmony import */ var _mui_icons_material_Cancel__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! @mui/icons-material/Cancel */ \"./node_modules/@mui/icons-material/Cancel.js\");\n/* harmony import */ var _mui_icons_material_Cached__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @mui/icons-material/Cached */ \"./node_modules/@mui/icons-material/Cached.js\");\n/* harmony import */ var _AdPreview__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./AdPreview */ \"./src/components/AdPreview.js\");\n\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 [gsdevtools, setGSDevTools] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(searchParams.get('gsdevtools'));\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)(+searchParams.get('page') || 0);\n const [itemsPerPage, setItemsPerPage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(+searchParams.get('perpage') || 10);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n setAds(getAdsListFromFilters(data.ads, filters));\n const filter = decodeURI(composeSearchParamsFromFilters(filters));\n const collectFilters = {};\n filter && (collectFilters.filter = filter);\n gsdevtools && (collectFilters.gsdevtools = gsdevtools);\n page && (collectFilters.page = page);\n itemsPerPage && itemsPerPage != 10 && (collectFilters.perpage = itemsPerPage);\n setSearchParams(collectFilters);\n }, [filters, page, itemsPerPage, gsdevtools]);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n if (gsdevtools !== \"true\") return;\n window.addEventListener('keydown', e => {\n if (e.defaultPrevented) return;\n if (e.key === \" \") {\n e.preventDefault();\n }\n });\n }, []);\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 setPage(0);\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 filter.selected = false;\n }\n });\n setFilters(updatedFilters);\n setPage(0);\n }\n\n // handle button(s)\n\n const handleDownloadZips = event => {\n // console.log(event);\n window.open(\"all.zip\");\n };\n const handleReloadDynamicData = async e => {\n const res = await fetch('reload_dynamic_data');\n if (res.status === 200) location.reload();\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 // toggle devtools\n let GSKeySequence = [];\n document.addEventListener('keydown', event => {\n GSKeySequence.push(event.key);\n if (GSKeySequence.includes('g') && GSKeySequence.includes('s')) {\n setGSDevTools(!gsdevtools);\n window.location.reload();\n }\n });\n document.addEventListener('keyup', event => {\n GSKeySequence = GSKeySequence.filter(key => key !== event.key);\n });\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 sx: {\n display: 'flex',\n alignItems: 'center'\n }\n }, data.isGoogleSpreadsheetBanner ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n title: \"Reload dynamic data\",\n sx: {\n marginRight: \"10px\"\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n className: \"dynamic-reload\",\n onClick: handleReloadDynamicData,\n color: \"inherit\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_icons_material_Cached__WEBPACK_IMPORTED_MODULE_9__[\"default\"], null))) : /*#__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_6__[\"default\"], {\n className: \"logos\",\n display: \"flex\",\n gap: \"0px\",\n alignItems: \"center\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"img\", {\n src: \"Monks-Logo_Small_White.png\"\n }), data.client && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n display: \"flex\",\n gap: \"10px\",\n alignItems: \"center\",\n sx: {\n marginRight: \"10px\"\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"span\", null, \"\\xD7\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"img\", {\n src: data.client\n }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n title: new Date(data.timestamp).toLocaleString(),\n sx: {\n marginLeft: \"10px\"\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_10__[\"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_11__[\"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_12__[\"default\"], {\n id: \"demo-multiple-chip-label\"\n }, \"Filters\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_13__[\"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_14__[\"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_6__[\"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_15__[\"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_16__[\"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_17__[\"default\"], null, getLabelFromFilterGroup(filterGroup)), filterGroup.map((filter, filterIndex) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_18__[\"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_19__[\"default\"], {\n labelRowsPerPage: \"Ads per page:\",\n component: \"div\",\n count: ads.length,\n page: ads.length ? page : 0,\n onPageChange: handleChangePage,\n rowsPerPage: itemsPerPage,\n onRowsPerPageChange: handleChangeRowsPerPage\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_mui_material__WEBPACK_IMPORTED_MODULE_8__[\"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 gsdevtools: gsdevtools,\n key: ad.bundleName,\n ad: ad,\n maxFileSize: ad.maxFileSize,\n timestamp: data.timestamp\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?"); /***/ }), diff --git a/src/preview/src/components/Previews.js b/src/preview/src/components/Previews.js index 29c1dac..b15dbb5 100644 --- a/src/preview/src/components/Previews.js +++ b/src/preview/src/components/Previews.js @@ -205,10 +205,10 @@ export default function Previews({ data }) { { - (pageAds.length > 0 && pageAds[0].client) && + data.client && × - + } diff --git a/src/webpack/buildPreview.js b/src/webpack/buildPreview.js index 7df729d..f02644a 100644 --- a/src/webpack/buildPreview.js +++ b/src/webpack/buildPreview.js @@ -124,8 +124,13 @@ module.exports = async function buildPreview(result, qualities, outputDir) { )) .filter(ad => ad != undefined) + const client = result[Object.keys(result)[0]]?.settings.data.settings.client + const adsList = { timestamp: Date.now(), + client: client + ? `client.${client.split('.').at(-1)}` + : undefined, ads: allAds }; @@ -136,6 +141,14 @@ module.exports = async function buildPreview(result, qualities, outputDir) { await fs.copy(path.join(__dirname, `../preview/dist`), outputDir, { overwrite: true, }); + + // copy client logo + if (client) { + console.log("copying client logo..."); + await fs.copy(client, path.join(outputDir, `client.${client.split('.').at(-1)}`), { + overwrite: true, + }); + } // write the result to ads.json in the preview dir console.log(`creating ${outputDir}/data/ads.json`) diff --git a/src/webpack/devServer.js b/src/webpack/devServer.js index 70b0ef0..ada1cdf 100644 --- a/src/webpack/devServer.js +++ b/src/webpack/devServer.js @@ -84,9 +84,17 @@ ${chalk.grey.bold('-------------------------------------------------------')} openLocation && open(`${httpLocation}?gsdevtools=true`); + const client = configs[0].settings.data.settings.client + if (client) { + app.get(`/client.${client.split('.').at(-1)}`, (req, res) => { + res.sendFile(configs[0].settings.data.settings.client) + }) + } + app.get('/data/ads.json', (req, res) => { res.json({ isGoogleSpreadsheetBanner: typeof configs[0].settings.data.settings.contentSource !== 'undefined', + client: client ? `client.${client.split('.').at(-1)}` : undefined, ads: settingsList.map(e => { const assetName = getNameFromLocation(e.location) const bundleName = e.data.settings.bundleName || getNameFromLocation(e.location) @@ -101,7 +109,6 @@ ${chalk.grey.bold('-------------------------------------------------------')} }, }, info: e.data.settings.info, - client: e.data.settings.client, } }) }) diff --git a/src/webpack/devServerParallel.js b/src/webpack/devServerParallel.js index c57b2e7..7475945 100644 --- a/src/webpack/devServerParallel.js +++ b/src/webpack/devServerParallel.js @@ -98,9 +98,17 @@ ${chalk.grey.bold('-------------------------------------------------------')} openLocation && open(httpLocation); + const client = configs[0].settings.data.settings.client + if (client) { + app.get(`/client.${client.split('.').at(-1)}`, (req, res) => { + res.sendFile(configs[0].settings.data.settings.client) + }) + } + app.get('/data/ads.json', (req, res) => { res.json({ isGoogleSpreadsheetBanner: typeof configs[0].settings.data.settings.contentSource !== 'undefined', + client: client ? `client.${client.split('.').at(-1)}` : undefined, ads: settingsList.map(e => { const assetName = getNameFromLocation(e.location) const bundleName = e.data.settings.bundleName || getNameFromLocation(e.location) @@ -115,7 +123,6 @@ ${chalk.grey.bold('-------------------------------------------------------')} }, }, info: e.data.settings.info, - client: e.data.settings.client, } }) })