@playpilot/tpi 5.6.0-beta.video.7 → 5.7.0-beta.display-2

package/src/tests/routes/components/Playlinks.test.js

@@ -49,21 +49,6 @@ describe('Playlinks.svelte', () => {
     expect(queryByTestId('commission-disclaimer')).not.toBeTruthy()
   })
 
-  it('Should render category as words', () => {
-    const playlinks = [
-      { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
-      { name: 'Some buy playlink', logo_url: 'logo', extra_info: { category: 'BUY' } },
-      { name: 'Some rent playlink', logo_url: 'logo', extra_info: { category: 'RENT' } },
-      { name: 'Some other playlink', logo_url: 'logo', extra_info: { category: 'other' } },
-    ]
-    // @ts-ignore
-    const { getByText, getAllByText } = render(Playlinks, { playlinks, title })
-
-    expect(getAllByText('Stream')).toHaveLength(2)
-    expect(getByText('Buy')).toBeTruthy()
-    expect(getByText('Rent')).toBeTruthy()
-  })
-
   it('Should call track function when clicked', async () => {
     const playlinks = [
       { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
@@ -103,19 +88,4 @@ describe('Playlinks.svelte', () => {
 
     expect(getAllByText('Some playlink')).toHaveLength(1)
   })
-
-  it('Should highlight and show category text for playlinks that have highlighted as true', () => {
-    const playlinks = [
-      { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
-      { name: 'Some other playlink', logo_url: 'logo', highlighted: true, cta_text: '', extra_info: { category: 'BUY' } },
-      { name: 'Some highlighted playlink', logo_url: 'logo', highlighted: true, cta_text: 'Some CTA', extra_info: { category: 'BUY' } },
-    ]
-    // @ts-ignore
-    const { getByText } = render(Playlinks, { playlinks, title })
-
-    expect(getByText('Some playlink').closest('.playlink')?.classList).not.toContain('highlighted')
-    expect(getByText('Some other playlink').closest('.playlink')?.classList).not.toContain('highlighted')
-    expect(getByText('Some highlighted playlink').closest('.playlink')?.classList).toContain('highlighted')
-    expect(getByText('Some CTA')).toBeTruthy()
-  })
 })

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

@@ -45,4 +45,40 @@ describe('TitleModal.svelte', () => {
 
     expect(track).toHaveBeenCalledWith(TrackingEvent.TitleModalClose, title, { time_spent: 200 })
   })
+
+  it('Should render top scroll ad when given', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = { ads: [{ campaign_format: 'top_scroll', content: {}, cta: {} }] }
+
+    const { container } = render(TitleModal, { onclose, title })
+
+    expect(container.querySelector('.top-scroll')).toBeTruthy()
+  })
+
+  it('Should not render top scroll ad when not given', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = { ads: null }
+
+    const { container } = render(TitleModal, { onclose, title })
+
+    expect(container.querySelector('.top-scroll')).not.toBeTruthy()
+  })
+
+  it('Should render display ad when given', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = { ads: [{ campaign_format: 'card', content: {}, cta: {} }] }
+
+    const { container } = render(TitleModal, { onclose, title })
+
+    expect(container.querySelector('.display')).toBeTruthy()
+  })
+
+  it('Should not render top scroll ad when not given', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = { ads: null }
+
+    const { container } = render(TitleModal, { onclose, title })
+
+    expect(container.querySelector('.display')).not.toBeTruthy()
+  })
 })

package/src/tests/routes/components/TitlePopover.test.js

@@ -37,4 +37,24 @@ describe('TitlePopover.svelte', () => {
 
     expect(track).toHaveBeenCalledWith(TrackingEvent.TitlePopoverClose, title, { time_spent: 200 })
   })
+
+  it('Should render top scroll ad when given', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = { ads: [{ campaign_format: 'top_scroll', content: {}, cta: {} }] }
+
+    const event = new MouseEvent('mouseenter')
+    const { container } = render(TitlePopover, { event, title })
+
+    expect(container.querySelector('.top-scroll')).toBeTruthy()
+  })
+
+  it('Should not render top scroll ad when not given', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = { ads: null }
+
+    const event = new MouseEvent('mouseenter')
+    const { container } = render(TitlePopover, { event, title })
+
+    expect(container.querySelector('.top-scroll')).not.toBeTruthy()
+  })
 })

package/src/routes/components/Ads/FloatingPlaylink.svelte

@@ -1,62 +0,0 @@
-<script lang="ts">
-  import { removeImageUrlPrefix } from '$lib/image'
-  import type { PlaylinkData } from '$lib/types/playlink'
-  import { prefersReducedMotion } from 'svelte/motion'
-  import { fly } from 'svelte/transition'
-
-  interface Props {
-    playlink: PlaylinkData
-  }
-
-  const { playlink }: Props = $props()
-
-  const { name, url, logo_url, cta_text } = $derived(playlink)
-</script>
-
-<a href={url} target="_blank" class="floating-playlink" rel="sponsored" transition:fly|global={{ x: -100, duration: prefersReducedMotion.current ? 0 : 500, delay: 2000 }}>
-  <img src={removeImageUrlPrefix(logo_url)} alt="" height="24" width="24" />
-
-  <div>
-    <span class="name">{name}</span>
-    <div class="cta">{cta_text || 'Free trial for 30 days!'}</div>
-  </div>
-</a>
-
-<style lang="scss">
-  .floating-playlink {
-    z-index: 1;
-    position: absolute;
-    top: margin(1);
-    left: margin(1);
-    display: flex;
-    align-items: center;
-    gap: margin(0.75);
-    padding: margin(0.5) margin(0.75);
-    outline: 2px solid rgba(255, 255, 255, 0.5);
-    border-radius: margin(0.5);
-    background: linear-gradient(to right, var(--playpilot-content), transparent);
-    font-family: inherit;
-    color: var(--playpilot-text-color) !important;
-    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
-    font-size: margin(0.875);
-    font-style: normal !important;
-    line-height: 1.2;
-    text-decoration: none;
-
-    &:hover {
-      outline: 2px solid rgba(255, 255, 255, 0.75);
-    }
-
-    img {
-      border-radius: margin(0.25);
-    }
-  }
-
-  .name {
-    font-weight: 500;
-  }
-
-  .cta {
-    font-size: margin(0.75);
-  }
-</style>

package/src/routes/components/Ads/VideoBackground.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-  const sources = [
-    'https://pub-6f03bccd9247476c9b84407f45af8155.r2.dev/apple-tv-plus-the-morning-show-cropped.mp4',
-  ]
-
-  const src = sources[Math.floor(Math.random() * sources.length)]
-</script>
-
-<div class="video-background">
-  <video class="video" autoplay muted playsinline loop>
-    <source {src} type="video/mp4">
-    <track kind="captions" />
-  </video>
-</div>
-
-<style lang="scss">
-  .video-background {
-    height: 100%;
-  }
-
-  .video {
-    position: absolute;
-    object-fit: cover;
-    object-position: center;
-    height: 100%;
-    width: 100%;
-  }
-</style>