@playpilot/tpi 8.3.1 → 8.4.1

package/package.json

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

package/src/routes/components/Explore/ExploreCallToAction.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
   import IconArrow from '../Icons/IconArrow.svelte'
-  import { openModal } from '$lib/modal'
+
+  const src = 'https://cdn.jsdelivr.net/npm/@playpilot/tpi@latest/src/lib/images/titles-list.webp'
 </script>
 
-<button class="call-to-action" onclick={() => openModal({ type: 'explore' })}>
+<a class="call-to-action" href={window.PlayPilotLinkInjections?.config?.explore_navigation_path}>
+  <img {src} alt="" width="70" height="57" />
+
   <div>
     <strong>Looking for something else?</strong>
     <div>Use our streamingguide</div>
@@ -12,7 +15,7 @@
   <div class="arrow">
     <IconArrow />
   </div>
-</button>
+</a>
 
 <style lang="scss">
   strong {
@@ -32,8 +35,10 @@
     border-radius: theme(border-radius-large) theme(border-radius-large) 0 0;
     background: theme(light);
     font-family: theme(font-family);
-    color: theme(text-color-alt);
+    color: theme(text-color-alt) !important;
     font-size: theme(font-size-small);
+    font-style: normal !important;
+    text-decoration: none;
     line-height: 1.5;
     text-align: left;
     cursor: pointer;

package/src/routes/components/Modals/TitleModal.svelte

@@ -3,6 +3,7 @@
   import { track } from '$lib/tracking'
   import type { TitleData } from '$lib/types/title'
   import { getFirstAdOfType } from '$lib/api/ads'
+  import { exploreParentSelector } from '$lib/explore'
   import { onMount } from 'svelte'
   import Modal from './Modal.svelte'
   import Title from '../Title.svelte'
@@ -20,6 +21,7 @@
   const topScrollAd = getFirstAdOfType('top_scroll')
   const displayAd = getFirstAdOfType('card')
   const insertExploreCta = window.PlayPilotLinkInjections?.config?.explore_insert_cta_in_tpi
+  const useBubble = !!topScrollAd || (insertExploreCta && !document.querySelector(exploreParentSelector))
 
   let hasTrackedScrolling = false
 
@@ -53,6 +55,6 @@
   {/if}
 {/snippet}
 
-<Modal {onscroll} {initialScrollPosition} bubble={!!topScrollAd || insertExploreCta ? bubble : null} prepend={displayAd ? prepend : null} tall>
+<Modal {onscroll} {initialScrollPosition} bubble={useBubble ? bubble : null} prepend={displayAd ? prepend : null} tall>
   <Title {title} {...restProps} />
 </Modal>

package/src/tests/routes/components/Modals/TitleModal.test.js

@@ -95,7 +95,7 @@ describe('TitleModal.svelte', () => {
     expect(container.querySelector('.display')).not.toBeTruthy()
   })
 
-  it('Should render explore cta when config is set', () => {
+  it('Should render explore cta when config is set and explore parent element is not present', () => {
     // @ts-ignore
     window.PlayPilotLinkInjections = { config: { explore_insert_cta_in_tpi: true } }
 
@@ -113,6 +113,17 @@ describe('TitleModal.svelte', () => {
     expect(container.querySelector('.call-to-action')).not.toBeTruthy()
   })
 
+  it('Should not render explore cta when config is set but explore parent element is present', () => {
+    document.body.innerHTML = '<div data-playpilot-explore></div>'
+
+    // @ts-ignore
+    window.PlayPilotLinkInjections = { config: { explore_insert_cta_in_tpi: true } }
+
+    const { container } = render(TitleModal, { title })
+
+    expect(container.querySelector('.call-to-action')).not.toBeTruthy()
+  })
+
   it('Should not render explore cta when config is set but top scroll ad is given', () => {
     // @ts-ignore
     window.PlayPilotLinkInjections = { config: { explore_insert_cta_in_tpi: true }, ads: [{ campaign_format: 'top_scroll', content: {}, cta: {} }] }