DSW-2365: Check URL param to identify Percy

justeattakeaway · Sep 11, 2024 · 90a412d · 90a412d
1 parent 2393c4e
commit 90a412d
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 6 deletions.
diff --git a/nextjs-app-v13/src/pages/components/lottie-player.tsx b/nextjs-app-v13/src/pages/components/lottie-player.tsx
@@ -2,6 +2,7 @@ import NavigationLayout from "@/layout/navigation";
 import { PieLottiePlayer } from '@justeattakeaway/pie-lottie-player/dist/react.js';
 import { PieButton } from '@justeattakeaway/pie-button/dist/react.js';
 import { useState } from "react";
+import { isServer } from 'lit';
 
 const animations = [
     "/animations/preparing.json",
@@ -18,12 +19,14 @@ export default function Page() {
 
     const animationPath = animations[animationIndex% animations.length];
 
+    const isRunningInPercy = isServer ? false : document.location.search.indexOf('PERCY=true') > -1;
+
     return (
         <NavigationLayout title="Lottie Player">
             <div>
                 <PieButton size="xsmall" onClick={handleLoadAnimationClick}>load another animation</PieButton>
             </div>
-            <PieLottiePlayer animationSrc={animationPath} />
+            <PieLottiePlayer animationSrc={animationPath} autoPlayDisabled={isRunningInPercy} />
         </NavigationLayout>
     );
 }
diff --git a/nextjs-app-v14/src/app/components/lottie-player/lottie-player.tsx b/nextjs-app-v14/src/app/components/lottie-player/lottie-player.tsx
@@ -3,6 +3,7 @@
 import { PieLottiePlayer } from '@justeattakeaway/pie-lottie-player/dist/react.js';
 import { PieButton } from '@justeattakeaway/pie-button/dist/react.js';
 import { useState } from "react";
+import { isServer } from 'lit';
 
 const animations = [
     "/animations/preparing.json",
@@ -19,12 +20,14 @@ export default function Page() {
 
     const animationPath = animations[animationIndex% animations.length];
 
+    const isRunningInPercy = isServer ? false : document.location.search.indexOf('PERCY=true') > -1;
+
     return (
         <>
             <div>
                 <PieButton size="xsmall" onClick={handleLoadAnimationClick}>load another animation</PieButton>
             </div>
-            <PieLottiePlayer animationSrc={animationPath} />
+            <PieLottiePlayer animationSrc={animationPath} autoPlayDisabled={isRunningInPercy} />
         </>
     );
 }
diff --git a/nuxt-app/pages/components/lottie-player.vue b/nuxt-app/pages/components/lottie-player.vue
@@ -3,12 +3,15 @@
     <pie-button size="xsmall" @click="handleLoadAnimationClick">
       load another animation
     </pie-button>
-    <pie-lottie-player :animationSrc="animationPath"></pie-lottie-player>
+    <pie-lottie-player 
+      :animationSrc="animationPath"
+      :autoPlayDisabled="autoPlayDisabled"
+    ></pie-lottie-player>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import { definePageMeta } from '#imports';
 import '@justeattakeaway/pie-webc/components/button.js';
 import '@justeattakeaway/pie-lottie-player';
@@ -25,10 +28,16 @@ definePageMeta({
 
 let animationIndex = ref(0);
 let animationPath = ref(animations[animationIndex.value % animations.length]);
+const autoPlayDisabled = ref(false);
 
 function handleLoadAnimationClick () {
   animationIndex.value++;
   animationPath.value = animations[animationIndex.value % animations.length];
 }
 
+onMounted(() => {
+  const isRunningInPercy = document && document?.location?.search.indexOf('PERCY=true') > -1
+  autoPlayDisabled.value = isRunningInPercy ? true : undefined;
+});
+
 </script>
diff --git a/vanilla-app/js/lottie-player.js b/vanilla-app/js/lottie-player.js
@@ -17,13 +17,15 @@ function handleLoadAnimationClick() {
         .animationSrc = animationPath;
 }
 
+const isRunningInPercy = document.location.search.indexOf('PERCY=true') > -1;
+const autoplay = isRunningInPercy ? 'autoPlayDisabled' : '';
+
 // Set initial HTML structure
-const rowStyle = 'display:flex; margin: 1rem 0;';
 document.querySelector('#app').innerHTML = `
     <div>
         <pie-button class="load" size="xsmall">load another animation</pie-button>
     </div>
-    <pie-lottie-player animationSrc="${animations[animationIndex% animations.length]}"></pie-lottie-player>
+    <pie-lottie-player animationSrc="${animations[animationIndex% animations.length]}" ${autoplay}></pie-lottie-player>
 `;
 
 document.querySelector('.load').addEventListener('click', handleLoadAnimationClick);