@playpilot/tpi 6.7.0 → 6.8.0

package/events.md

@@ -90,6 +90,9 @@ Event | Action | Info | Payload
 ### Various
 Event | Action | Info | Payload
 --- | --- | --- | ---
+`ali_share_title` | _Fires any time the share button is clicked for a title_ | | `Title`, `method` ('native', 'copy', or 'email')
+`ali_trailer_button_click` | _Fires any time the trailer button is clicked for a title_ | | `Title`
+`ali_expand_title_description` | _Fires any time the "show more" button is clicked for a title description_ | | `Title`
 `ali_region_request_failed` | _Fires when requests to external service for getting the user region fails_ | | `message` (error message as returned by the request)
 
 ### Explore

package/package.json

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

package/src/lib/enums/SplitTest.ts

@@ -4,4 +4,9 @@ export const SplitTest = {
     numberOfVariants: 2,
     variantNames: ['Separated', 'Inline'] as string[],
   },
+  TitleDescriptionPlacement: {
+    key: 'title_description_placement',
+    numberOfVariants: 2,
+    variantNames: ['Top', 'Bottom'] as string[],
+  },
 } as const

package/src/lib/enums/TrackingEvent.ts

@@ -58,6 +58,7 @@ export const TrackingEvent = {
   SaveTitle: 'ali_save_title',
   NotifyTitle: 'ali_notify_title',
   TrailerClick: 'ali_trailer_button_click',
+  ExpandTitleDescription: 'ali_expand_title_description',
   RegionRequestFailed: 'ali_region_request_failed',
 
   // Explore

package/src/routes/components/Description.svelte

@@ -3,21 +3,27 @@
     text: string
     blurb?: string
     limit?: number
+    onclick?: () => void
   }
 
-  const { text, blurb = '', limit = 200 }: Props = $props()
+  const { text, blurb = '', limit = 200, onclick = () => null }: Props = $props()
 
   let expanded = $state(false)
 
   const limitedText = $derived(text.slice(0, limit))
+
+  function expand(): void {
+    expanded = true
+    onclick()
+  }
 </script>
 
-<div>
+<div class="description">
   <span class="paragraph" role="paragraph">
     {expanded ? text : limitedText}{#if !expanded && text.length > limit}...{/if}
 
     {#if !expanded && (text.length > limit || blurb)}
-      <button class="show-more" onclick={() => expanded = true}>Show more</button>
+      <button class="show-more" onclick={() => expand()}>Show more</button>
     {/if}
   </span>
 
@@ -27,6 +33,10 @@
 </div>
 
 <style lang="scss">
+  .description:first-child {
+    margin: margin(-1) 0 margin(1);
+  }
+
   .paragraph {
     display: block;
     margin: margin(1) 0 0;

package/src/routes/components/Playlinks/Playlinks.svelte

@@ -9,7 +9,6 @@
   import { campaignToPlaylink, getFirstAdOfType } from '$lib/api/ads'
   import { getContext } from 'svelte'
   import Playlink from './Playlink.svelte'
-  import Notify from '../Notify.svelte'
 
   interface Props {
     playlinks: PlaylinkData[]
@@ -36,27 +35,31 @@
 </script>
 
 
-{#if mergedPlaylinks.length}
-  <div class="heading" use:heading={3}>{t('Where To Stream Online')}</div>
+<div class="heading" use:heading={3}>{t('Where To Stream Online')}</div>
 
+{#if mergedPlaylinks.length}
   <div class="disclaimer" data-testid="commission-disclaimer">
     {window?.PlayPilotLinkInjections?.config?.playlinks_disclaimer_text || t('Commission Disclaimer')}
     <a href="https://playpilot.com/" target="_blank" rel="sponsored">PlayPilot.com</a>
   </div>
+{/if}
 
-  <div class="playlinks" class:list bind:clientWidth={outerWidth}>
-    {#each mergedPlaylinks as playlink, index}
-      <Playlink {playlink} onclick={() => onclick(playlink.name)} />
+<div class="playlinks" class:list bind:clientWidth={outerWidth}>
+  {#each mergedPlaylinks as playlink, index}
+    <Playlink {playlink} onclick={() => onclick(playlink.name)} />
 
-      <!-- A fake highlighted playlink as part of the display ad, to be shown after the first playlink -->
-      {#if displayAd && (index === 0)}
-        <Playlink playlink={campaignToPlaylink(displayAd)} onclick={() => track(TrackingEvent.DisplayedAdPlaylickClick, title, { campaign_name: displayAd.campaign_name })} hideCategory disclaimer={displayAd.disclaimer || ''} />
-      {/if}
-    {/each}
-  </div>
-{:else}
-  <Notify {title} />
-{/if}
+    <!-- A fake highlighted playlink as part of the display ad, to be shown after the first playlink -->
+    {#if displayAd && (index === 0)}
+      <Playlink playlink={campaignToPlaylink(displayAd)} onclick={() => track(TrackingEvent.DisplayedAdPlaylickClick, title, { campaign_name: displayAd.campaign_name })} hideCategory disclaimer={displayAd.disclaimer || ''} />
+    {/if}
+  {/each}
+
+  {#if !mergedPlaylinks.length}
+    <div class="empty" data-testid="playlinks-empty">
+      {t('Title Unavailable')}
+    </div>
+  {/if}
+</div>
 
 <style lang="scss">
   .heading {
@@ -100,4 +103,19 @@
       }
     }
   }
+
+  .empty {
+    grid-column: span 2;
+    padding: margin(0.75);
+    margin-top: margin(0.5);
+    background: theme(playlink-background, lighter);
+    box-shadow: theme(playlink-shadow, shadow);
+    border-radius: theme(playlink-border-radius, border-radius);
+    white-space: initial;
+    line-height: 1.35;
+
+    .list & {
+      grid-column: 1;
+    }
+  }
 </style>

package/src/routes/components/Share.svelte

@@ -49,8 +49,8 @@
 
 <ContextMenu>
   {#snippet button({ toggle })}
-    <Button onclick={(event) => shareApiOrToggle(event, toggle)} size="wide" label={t('Share')}>
-      <IconShare />
+    <Button onclick={(event) => shareApiOrToggle(event, toggle)}>
+      <IconShare /> {t('Share')}
     </Button>
   {/snippet}
 

package/src/routes/components/Title.svelte

@@ -6,7 +6,6 @@
   import ParticipantsRail from './Rails/ParticipantsRail.svelte'
   import SimilarRail from './Rails/SimilarRail.svelte'
   import TitlePoster from './TitlePoster.svelte'
-  import Save from './Save.svelte'
   import Share from './Share.svelte'
   import Trailer from './Trailer.svelte'
   import { t } from '$lib/localization'
@@ -14,7 +13,11 @@
   import { heading } from '$lib/actions/heading'
   import { removeImageUrlPrefix } from '$lib/image'
   import { titleUrl } from '$lib/routes'
-  import { setContext } from 'svelte'
+  import { isInSplitTestVariant, trackSplitTestView } from '$lib/splitTest'
+  import { onMount, setContext } from 'svelte'
+  import { SplitTest } from '$lib/enums/SplitTest'
+  import { track } from '$lib/tracking'
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
 
   interface Props {
     title: TitleData
@@ -25,11 +28,23 @@
 
   setContext('title', title)
 
+  const showDescription = $derived(!small && title.description)
+
   let posterLoaded = $state(false)
   let backgroundLoaded = $state(false)
   let useBackgroundFallback = $state(false)
+
+  onMount(() => {
+    if (showDescription) trackSplitTestView(SplitTest.TitleDescriptionPlacement)
+  })
 </script>
 
+{#snippet description()}
+  {#if showDescription}
+    <Description text={title.description!} blurb={title.blurb} onclick={() => track(TrackingEvent.ExpandTitleDescription, title)} />
+  {/if}
+{/snippet}
+
 <div class="content" class:small>
   <div class="header">
     <div class="poster" class:loaded={posterLoaded}>
@@ -59,18 +74,19 @@
         <Trailer {title} />
       {/if}
 
-      <div class="right">
-        <Save {title} />
-        <Share title={title.title} url={titleUrl(title)} />
-      </div>
+      <Share title={title.title} url={titleUrl(title)} />
     </div>
   </div>
 
   <div class="main">
+    {#if isInSplitTestVariant(SplitTest.TitleDescriptionPlacement, 0)}
+      {@render description()}
+    {/if}
+
     <Playlinks playlinks={title.providers} {title} />
 
-    {#if !small && title.description}
-      <Description text={title.description} blurb={title.blurb} />
+    {#if isInSplitTestVariant(SplitTest.TitleDescriptionPlacement, 1)}
+      {@render description()}
     {/if}
 
     <ParticipantsRail {title} />

package/src/routes/components/TitleModal.svelte

@@ -9,6 +9,8 @@
   import TopScroll from './Ads/TopScroll.svelte'
   import Display from './Ads/Display.svelte'
   import ExploreCallToAction from './Explore/ExploreCallToAction.svelte'
+  import { getSplitTestVariantName } from '$lib/splitTest'
+  import { SplitTest } from '$lib/enums/SplitTest'
 
   interface Props {
     title: TitleData
@@ -28,7 +30,7 @@
   onMount(() => {
     const openTimestamp = Date.now()
 
-    return () => track(TrackingEvent.TitleModalClose, title, { time_spent: Date.now() - openTimestamp })
+    return () => track(TrackingEvent.TitleModalClose, title, { time_spent: Date.now() - openTimestamp, split_test: getSplitTestVariantName(SplitTest.TitleDescriptionPlacement) })
   })
 
   function onscroll(): void {

package/src/routes/components/TitlePopover.svelte

@@ -8,6 +8,8 @@
   import Title from './Title.svelte'
   import TopScroll from './Ads/TopScroll.svelte'
   import Display from './Ads/Display.svelte'
+  import { getSplitTestVariantName } from '$lib/splitTest'
+  import { SplitTest } from '$lib/enums/SplitTest'
 
   interface Props {
     event: MouseEvent
@@ -27,7 +29,7 @@
     setOffset()
 
     const openTimestamp = Date.now()
-    return () => track(TrackingEvent.TitlePopoverClose, title, { time_spent: Date.now() - openTimestamp })
+    return () => track(TrackingEvent.TitlePopoverClose, title, { time_spent: Date.now() - openTimestamp, split_test: getSplitTestVariantName(SplitTest.TitleDescriptionPlacement) })
   })
 
   /**

package/src/routes/components/Trailer.svelte

@@ -19,6 +19,6 @@
   }
 </script>
 
-<Button {onclick} size="wide" label={t('Watch Trailer')}>
-  <IconPlay />
+<Button {onclick}>
+  <IconPlay /> {t('Watch Trailer')}
 </Button>

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

@@ -1,5 +1,5 @@
 import { fireEvent, render  } from '@testing-library/svelte'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 
 import Description from '../../../routes/components/Description.svelte'
 
@@ -55,4 +55,13 @@ describe('Description.svelte', () => {
 
     expect(queryByText('Show more')).not.toBeTruthy()
   })
+
+  it('Should fire given onclick function after expanding if given', async () => {
+    const onclick = vi.fn()
+    const { queryByRole } = render(Description, { text: 'Some test description', limit: 5, onclick })
+
+    await fireEvent.click(/** @type {Node} **/(queryByRole('button')))
+
+    expect(onclick).toHaveBeenCalled()
+  })
 })

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

@@ -68,8 +68,7 @@ describe('Playlinks.svelte', () => {
     const playlinks = []
     const { queryByTestId, getByText } = render(Playlinks, { playlinks, title })
 
-    expect(getByText(`${title.title} is currently not available to stream.`)).toBeTruthy()
-    expect(getByText('Notify me when available')).toBeTruthy()
+    expect(getByText('This title is not currently available to stream.')).toBeTruthy()
     expect(queryByTestId('commission-disclaimer')).not.toBeTruthy()
   })
 

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

@@ -21,57 +21,57 @@ describe('Share.svelte', () => {
   })
 
   it('Should open context menu on click', async () => {
-    const { getByLabelText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
     expect(queryByText('Copy URL')).not.toBeTruthy()
     expect(queryByText('Email')).not.toBeTruthy()
 
-    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(getByText('Share'))
 
     expect(queryByText('Copy URL')).toBeTruthy()
     expect(queryByText('Email')).toBeTruthy()
   })
 
   it('Should close context menu on click of items', async () => {
-    const { getByLabelText, getByText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
-    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(getByText('Share'))
     await fireEvent.click(getByText('Copy URL'))
 
     expect(queryByText('Copy URL')).not.toBeTruthy()
   })
 
   it('Should close context menu on click of body', async () => {
-    const { getByLabelText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
-    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(getByText('Share'))
     await fireEvent.click(document.body)
 
     expect(queryByText('Copy URL')).not.toBeTruthy()
   })
 
   it('Should fire copyToClipboard on click of button', async () => {
-    const { getByLabelText, getByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
-    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(getByText('Share'))
     await fireEvent.click(getByText('Copy URL'))
 
     expect(copyToClipboard).toHaveBeenCalledWith('some-url?utm_source=tpi')
   })
 
   it('Should fire track function on click of copy URL button', async () => {
-    const { getByLabelText, getByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
-    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(getByText('Share'))
     await fireEvent.click(getByText('Copy URL'))
 
     expect(track).toHaveBeenCalledWith(TrackingEvent.ShareTitle, null, { title: 'Some title', url: 'http://localhost:3000/', method: 'copy' })
   })
 
   it('Should fire track function on click of email button', async () => {
-    const { getByLabelText, getByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
-    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(getByText('Share'))
     await fireEvent.click(getByText('Email'))
 
     expect(track).toHaveBeenCalledWith(TrackingEvent.ShareTitle, null, { title: 'Some title', url: 'http://localhost:3000/', method: 'email' })

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

@@ -94,14 +94,14 @@ describe('Title.svelte', () => {
   })
 
   it('Should show trailer button when embeddable_url is given', () => {
-    const { getByLabelText } = render(Title, { title: { ...title, embeddable_url: 'some-url' } })
+    const { getByText } = render(Title, { title: { ...title, embeddable_url: 'some-url' } })
 
-    expect(getByLabelText('Watch trailer')).toBeTruthy()
+    expect(getByText('Watch trailer')).toBeTruthy()
   })
 
   it('Should not show trailer button when embeddable_url is not given', () => {
-    const { queryByLabelText } = render(Title, { title })
+    const { queryByText } = render(Title, { title })
 
-    expect(queryByLabelText('Watch trailer')).not.toBeTruthy()
+    expect(queryByText('Watch trailer')).not.toBeTruthy()
   })
 })

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

@@ -56,7 +56,7 @@ describe('TitleModal.svelte', () => {
     vi.advanceTimersByTime(200)
     unmount()
 
-    expect(track).toHaveBeenCalledWith(TrackingEvent.TitleModalClose, title, { time_spent: 200 })
+    expect(track).toHaveBeenCalledWith(TrackingEvent.TitleModalClose, title, expect.objectContaining({ time_spent: 200 }))
   })
 
   it('Should render top scroll ad when given', () => {

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

@@ -50,7 +50,7 @@ describe('TitlePopover.svelte', () => {
     vi.advanceTimersByTime(200)
     unmount()
 
-    expect(track).toHaveBeenCalledWith(TrackingEvent.TitlePopoverClose, title, { time_spent: 200 })
+    expect(track).toHaveBeenCalledWith(TrackingEvent.TitlePopoverClose, title, expect.objectContaining({ time_spent: 200 }))
   })
 
   it('Should render top scroll ad when given', () => {