Merge pull request #79 from mm-vasyl/gsdevtools-on-react-preview

GSDevTools on React preview

package.json

@@ -3,7 +3,8 @@
   "version": "11.1.0",
   "description": "This is the Display.Monks development server, which handles previewing and compiling ads via webpack.",
   "scripts": {
-    "preview-dev": "cd ./src/preview && npm run dev"
+    "preview-dev": "cd ./src/preview && npm run dev",
+    "preview-build": "cd ./src/preview && npm run build"
   },
   "engines": {
     "node": ">= 16",

src/preview/dist/index.html

@@ -36,4 +36,6 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
+  <script src="static/gsap.min.js"></script>
+  <script src="static/GSDevTools.min.js"></script>
 </html>

src/preview/public/index.html

@@ -36,4 +36,6 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
+  <script src="static/gsap.min.js"></script>
+  <script src="static/GSDevTools.min.js"></script>
 </html>

src/preview/src/App.css

@@ -4,6 +4,7 @@
 
   &::-webkit-scrollbar {
     width: 1rem;
+    height: 1rem;
   }
 
   &::-webkit-scrollbar-track {
@@ -16,3 +17,151 @@
     border: 3px solid #121212;
   }
 }
+
+.gs-dev-tools {
+  container-type: inline-size;
+}
+
+.gs-dev-tools .in-point, .gs-dev-tools .out-point {
+  display: none !important;
+}
+
+.gs-dev-tools .logo {
+  display: none !important;
+}
+
+.gs-dev-tools label input, .gs-dev-tools label select {
+  display: none !important;
+}
+
+.gs-dev-tools .time-scale {
+  display: none !important;
+}
+
+.gs-dev-tools .select-animation {
+  display: none !important;
+}
+
+.gs-dev-tools {
+  position: static !important;
+}
+
+.gs-hit-area {
+  display: none !important;
+}
+
+.gs-dev-tools.minimal {
+  display: block !important;
+}
+
+.gs-dev-tools.minimal .gs-bottom {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  position: relative !important;
+}
+
+.gs-dev-tools.minimal .play-pause {
+  margin: 0 !important;
+}
+
+.gs-dev-tools .timeline {
+  margin: 0  !important;
+}
+
+.gs-dev-tools .gs-bottom-right {
+  display: flex !important;
+  line-height: 1 !important;
+}
+
+.gs-dev-tools .timeline {
+  top: unset !important;
+  transform: unset !important;
+}
+
+.gs-dev-tools .gs-bottom {
+  overflow: hidden !important;
+  border-bottom-left-radius: 8px !important;
+  border-bottom-right-radius: 8px !important;
+}
+
+.gs-dev-tools .timeline-track,
+.gs-dev-tools .progress-bar {
+  overflow: hidden !important;
+  border-top-left-radius: 8px !important;
+  border-top-right-radius: 8px !important;
+}
+
+.gs-dev-tools .timeline-track,
+.gs-dev-tools .progress-bar {
+  background-color: #90caf9 !important;
+}
+
+.gs-dev-tools .playhead {
+  background-color: #008cff !important;
+  height: 18px !important;
+  width: 18px !important;
+  border: none !important;
+}
+
+/* all */
+@container (min-width: 125px) {
+  .gs-dev-tools.minimal .rewind,
+  .gs-dev-tools.minimal .loop,
+  .gs-dev-tools.minimal .play-pause {
+    display: block !important;
+    flex-grow: 1 !important;
+    height: 18px !important;
+  }
+  .gs-dev-tools.minimal .play-pause {
+    height: 24px !important;
+  }
+  .gs-dev-tools .time-container {
+    font-size: 17px !important;
+  }
+
+  /* 160x600 */
+  @container (max-width: 265px) {
+    .gs-dev-tools .gs-bottom {
+      height: 64px !important;
+    }
+    .gs-dev-tools.minimal .rewind,
+    .gs-dev-tools.minimal .loop,
+    .gs-dev-tools.minimal .play-pause {
+      margin-bottom: 20px !important;
+    }
+    .gs-dev-tools.minimal .play-pause {
+      height: 24px !important;
+    }
+    .gs-dev-tools .gs-bottom-right {
+      width: 100% !important;
+      justify-content: center !important;
+      position: absolute !important;
+      bottom: 5px;
+    }
+    .gs-dev-tools .time-container {
+      font-size: 14px !important;
+    }
+  }
+}
+
+/* 120x600 */
+@container (max-width: 124px) {
+  .gs-dev-tools .gs-bottom {
+    height: 48px !important;
+  }
+  .gs-dev-tools .gs-bottom-right {
+    width: 100% !important;
+    justify-content: center !important;
+    position: absolute !important;
+    bottom: 5px;
+  }
+  .gs-dev-tools .time-container {
+    font-size: 9px !important;
+  }
+  .gs-dev-tools.minimal .rewind,
+  .gs-dev-tools.minimal .loop,
+  .gs-dev-tools.minimal .play-pause {
+    margin-bottom: 15px !important;
+  }
+}

src/preview/src/components/AdPreview.js

@@ -17,14 +17,52 @@ import ClearIcon from "@mui/icons-material/Clear";
 
 import LoadingButton from "@mui/lab/LoadingButton";
 
+gsap.registerPlugin(GSDevTools);
+
 export const AdPreview = (props) => {
-  const {ad, maxFileSize = 150} = props;
+  const {ad, gsdevtools, maxFileSize = 150} = props;
 
   const [mediaType, setMediaType] = useState("iframe");
   const [mediaSource, setMediaSource] = useState(ad.output.html.url);
   const [activeConfigTab, setActiveConfigTab] = useState("html,iframe");
 
+  const [animation, setAnimation] = useState();
+
   const adPreviewCard = useRef();
+
+  const gsDevContainer = useRef();
+
+  // add gsdevtools listeners
+  useEffect(() => {
+    if (gsdevtools !== "true") return;
+
+    gsDevContainer.current && (gsDevContainer.current.innerHTML = '')
+
+    const ifr = adPreviewCard.current
+
+    // have to use onload in order to set events to the right element (React render thing)
+    ifr.onload = () => {
+      if (!ifr.contentWindow) return
+      ifr.contentWindow.addEventListener("getMainTimeline", e => setAnimation(e.detail), false)
+      ifr.contentWindow.dispatchEvent(new CustomEvent("previewReady"))
+    }
+  }, [mediaSource])
+
+  // create devtools box with animation
+  useEffect(() => {
+    if (!animation) return
+
+    animation.pause(0);
+    const tl = gsap.timeline();
+    tl.to(animation, { duration: animation.totalDuration(), totalProgress: 1, ease: Linear.easeNone });
+    gsDevContainer.current && (gsDevContainer.current.innerHTML = '')
+    GSDevTools.create({
+      container: gsDevContainer.current,
+      animation: tl,
+      visibility: "visible",
+      globalSync: false
+    });
+  }, [animation])
 
   const extensionTypes = ["jpg,img", "mp4,video", "gif,img"];
   const extensionIcons = {
@@ -65,11 +103,16 @@ export const AdPreview = (props) => {
 
       <CardMedia ref={adPreviewCard} component={mediaType} scrolling="no" style={{width: ad.width, height: ad.height}} height={ad.height} width={ad.width} src={mediaSource} id={ad.bundleName} className={ad.bundleName} frameBorder="0" autoPlay controls />
       <CardContent>
+        {
+          gsdevtools === "true" && animation && activeConfigTab.split(",")[0] === "html"
+          ? <>
+              <Box ref={gsDevContainer}></Box>
+              <Divider light sx={{margin: "20px 0"}} />
+            </>
+          : <></>
+        }
         <Box>
           <Box marginBottom="20px">
-            <Typography sx={{marginBottom: "10px"}} noWrap align="left" variant="body2">
-              Bundle size:
-            </Typography>
             <Tooltip title="Bundle size">
               <Chip icon={Math.round(ad.output.zip.size / 1024) <= maxFileSize ? <DoneIcon /> : <ClearIcon />} label={`${Math.round(ad.output.zip.size / 1024)} KB`} color={Math.round(ad.output.zip.size / 1024) <= maxFileSize ? "success" : "error"} />
             </Tooltip>

src/preview/src/components/Previews.js

@@ -81,6 +81,8 @@ const getLabelFromFilterGroup = (filterGroup) => {
 
 export default function Previews({ data }) {
   const [searchParams, setSearchParams] = useSearchParams();
+
+  const gsdevtools = useMemo(() => searchParams.get('gsdevtools'), []);
 
   const [ads, setAds] = useState([]);
   const [filters, setFilters] = useState(getFiltersFromAds(data.ads, searchParams));
@@ -90,11 +92,23 @@ export default function Previews({ data }) {
 
   useEffect(() => {
     setAds(getAdsListFromFilters(data.ads, filters));
-    setSearchParams({
-      filter: decodeURI(composeSearchParamsFromFilters(filters)),
-    });
+    const filter = decodeURI(composeSearchParamsFromFilters(filters))
+    const collectFilters = {}
+    filter && (collectFilters.filter = filter)
+    gsdevtools && (collectFilters.gsdevtools = gsdevtools)
+    setSearchParams(collectFilters)
     setPage(0);
   }, [filters]);
+
+  useEffect(() => {
+    if (gsdevtools !== "true") return
+    window.addEventListener('keydown', (e) => {
+      if (e.defaultPrevented) return;
+      if (e.key === " ") {
+        e.preventDefault();
+      }
+    })
+  }, [])
 
   const getSelectedFilters = () => {
     // returns flat array of selected filters i.e. ["en","300x400"] (the input element needs this as a value)
@@ -200,7 +214,7 @@ export default function Previews({ data }) {
       </AppBar>
 
       <div className={styles.previews}>
-        {pageAds.length > 0 && pageAds.map((ad) => <AdPreview key={ad.bundleName} ad={ad} maxFileSize={data.maxFileSize} />)}
+        {pageAds.length > 0 && pageAds.map((ad) => <AdPreview gsdevtools={gsdevtools} key={ad.bundleName} ad={ad} maxFileSize={data.maxFileSize} />)}
         {pageAds.length < 1 && "No ads found with the current combination of filters"}
       </div>
     </>