@playpilot/tpi 8.29.3 → 8.29.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.29.3",
+	"version": "8.29.5",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/api/ads.ts

@@ -8,6 +8,7 @@ import { api } from './api'
 
 export async function fetchAds(): Promise<Campaign[]> {
   if (!hasConsentedTo('ads')) return []
+  if (window.PlayPilotLinkInjections.no_affiliate) return []
 
   const apiToken = getApiToken()
 

package/src/lib/injection.ts

@@ -356,13 +356,14 @@ function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
 export function clearLinkInjections(): void {
   const elements = document.querySelectorAll(keySelector)
 
-  if (!elements.length) return
-
   elements.forEach((element) => clearLinkInjection(element.getAttribute(keyDataAttribute) || ''))
 
   clearAfterArticlePlaylinks()
   clearInTextDisclaimer()
   clearInTextWidgets()
+
+  if (!elements.length) return
+
   destroyAllModals(false)
   destroyLinkPopover(false)
 }

package/src/routes/components/Explore/Routes/ExploreModal.svelte

@@ -1,106 +1,111 @@
-<script lang="ts">
-  import { fetchParticipantBySid } from '$lib/api/participants'
-  import { fetchSimilarTitles, fetchTitleBySid } from '$lib/api/titles'
-  import { mobileBreakpoint } from '$lib/constants'
-  import { SplitTest } from '$lib/enums/SplitTest'
-  import { t } from '$lib/localization'
-  import { openModal, type ModalType } from '$lib/modal'
-  import { getSplitTestVariantName, trackSplitTestView } from '$lib/splitTest'
-  import type { TitleData } from '$lib/types/title'
-  import Modal from '../../Modals/Modal.svelte'
-
-  interface Props {
-    navigate?: (key: string, pushState?: boolean) => void
-  }
-
-  const { navigate = () => null }: Props = $props()
-
-  async function openModalViaRoute(): Promise<void> {
-    const currentUrl = new URL(document.location.toString())
-    const sid = currentUrl.searchParams.get('sid')
-
-    if (!sid) return
-
-    let type: ModalType = sid.startsWith('pr') ? 'participant' : 'title' // Sids with with `pr` for participants, `ti` for titles
-    let data: any = null
-
-    if (type === 'title') {
-      const isMobile = window.innerWidth < mobileBreakpoint
-      const isInReelSplitTest = isMobile && getSplitTestVariantName(SplitTest.Reels) === 'Reel'
-
-      if (isMobile) trackSplitTestView(SplitTest.Reels)
-
-      type = isMobile && isInReelSplitTest ? 'titles-reel' : 'titles-rail'
-
-      const [title, railTitles] = (await Promise.allSettled([fetchTitleBySid(sid), fetchSimilarTitles({ sid } as unknown as TitleData)])).map((promise) => promise.status === 'fulfilled' ? promise.value : null)
-
-      data = [title as TitleData, ...(railTitles as TitleData[])]
-    } else if (type === 'participant') {
-      data = await fetchParticipantBySid(sid)
-    }
-
-    openModal({
-      type,
-      data,
-      props: {
-        onclose: () => navigate('home'),
-        pushState: false,
-      },
-    })
-  }
-</script>
-
-{#await openModalViaRoute()}
-  <Modal blur pushState={false}>
-    {#snippet dialog()}
-      <div class="loading">
-        <div class="bar"></div>
-        <div class="bar"></div>
-        <div class="bar"></div>
-      </div>
-    {/snippet}
-  </Modal>
-{:catch}
-  <Modal blur onclose={() => navigate('home')} pushState={false}>
-    <div class="error">
-      {t('An Error Occurred')}
-    </div>
-  </Modal>
-{/await}
-
-<style lang="scss">
-  .loading {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    gap: margin(0.5);
-  }
-
-  @keyframes animate-bar {
-    to {
-      height: margin(3);
-      opacity: 0.5;
-    }
-  }
-
-  .bar {
-    height: margin(4);
-    width: margin(1);
-    border-radius: margin(0.25);
-    background: white;
-    animation: animate-bar 750ms infinite;
-
-    @for $i from 0 through 2 {
-      &:nth-child(#{$i}) {
-        animation-delay: $i * 250ms;
-      }
-    }
-  }
-
-  .error {
-    padding: margin(2);
-    font-size: 1.25em;
-    color: theme(text-color);
-  }
-</style>
+<script lang="ts">
+  import { fetchAds } from '$lib/api/ads'
+  import { fetchParticipantBySid } from '$lib/api/participants'
+  import { fetchSimilarTitles, fetchTitleBySid } from '$lib/api/titles'
+  import { mobileBreakpoint } from '$lib/constants'
+  import { SplitTest } from '$lib/enums/SplitTest'
+  import { t } from '$lib/localization'
+  import { openModal, type ModalType } from '$lib/modal'
+  import { getSplitTestVariantName, trackSplitTestView } from '$lib/splitTest'
+  import type { Campaign } from '$lib/types/campaign'
+  import type { TitleData } from '$lib/types/title'
+  import Modal from '../../Modals/Modal.svelte'
+
+  interface Props {
+    navigate?: (key: string, pushState?: boolean) => void
+  }
+
+  const { navigate = () => null }: Props = $props()
+
+  async function openModalViaRoute(): Promise<void> {
+    const currentUrl = new URL(document.location.toString())
+    const sid = currentUrl.searchParams.get('sid')
+
+    if (!sid) return
+
+    let type: ModalType = sid.startsWith('pr') ? 'participant' : 'title' // Sids with with `pr` for participants, `ti` for titles
+    let data: any = null
+
+    if (type === 'title') {
+      const isMobile = window.innerWidth < mobileBreakpoint
+      const isInReelSplitTest = isMobile && getSplitTestVariantName(SplitTest.Reels) === 'Reel'
+
+      if (isMobile) trackSplitTestView(SplitTest.Reels)
+
+      type = isMobile && isInReelSplitTest ? 'titles-reel' : 'titles-rail'
+
+      const [ads, title, railTitles] = (await Promise.allSettled([fetchAds(), fetchTitleBySid(sid), fetchSimilarTitles({ sid } as unknown as TitleData)])).map((promise) =>
+        promise.status === 'fulfilled' ? promise.value : null,
+      )
+
+      window.PlayPilotLinkInjections.ads = ads as Campaign[]
+      data = [title as TitleData, ...(railTitles as TitleData[])]
+    } else if (type === 'participant') {
+      data = await fetchParticipantBySid(sid)
+    }
+
+    openModal({
+      type,
+      data,
+      props: {
+        onclose: () => navigate('home'),
+        pushState: false,
+      },
+    })
+  }
+</script>
+
+{#await openModalViaRoute()}
+  <Modal blur pushState={false}>
+    {#snippet dialog()}
+      <div class="loading">
+        <div class="bar"></div>
+        <div class="bar"></div>
+        <div class="bar"></div>
+      </div>
+    {/snippet}
+  </Modal>
+{:catch}
+  <Modal blur onclose={() => navigate('home')} pushState={false}>
+    <div class="error">
+      {t('An Error Occurred')}
+    </div>
+  </Modal>
+{/await}
+
+<style lang="scss">
+  .loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    gap: margin(0.5);
+  }
+
+  @keyframes animate-bar {
+    to {
+      height: margin(3);
+      opacity: 0.5;
+    }
+  }
+
+  .bar {
+    height: margin(4);
+    width: margin(1);
+    border-radius: margin(0.25);
+    background: white;
+    animation: animate-bar 750ms infinite;
+
+    @for $i from 0 through 2 {
+      &:nth-child(#{$i}) {
+        animation-delay: $i * 250ms;
+      }
+    }
+  }
+
+  .error {
+    padding: margin(2);
+    font-size: 1.25em;
+    color: theme(text-color);
+  }
+</style>

package/src/tests/lib/api/ads.test.js

@@ -58,6 +58,14 @@ describe('$lib/api/ads', () => {
       expect(api).not.toHaveBeenCalled()
     })
 
+    it('Should not call api if no_affiliate is true', async () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = { no_affiliate: true }
+
+      await fetchAds()
+      expect(api).not.toHaveBeenCalled()
+    })
+
     it('Should fire track event when ads failed to fetch', async () => {
       vi.mocked(api).mockRejectedValueOnce({ ok: false, status: 505 })