@playpilot/tpi 8.13.0-beta.2 → 8.14.0-beta.1

package/events.md

@@ -100,11 +100,6 @@ Event | Action | Info | Payload
 `ali_display_ad_playlink_click` | _Fires any time the playlink linked to the display ad is clicked_ | | `campaign_name`
 `ali_ads_fetch_failed` | _Fires whenever ads tried to but failed to fetch_ | | `status` (Response status code)
 
-## Widgets
-Event | Action | Info | Payload
---- | --- | --- | ---
-`ali_widget_article_rail_title_click` | _Fires when a title in an tpi rail widget is clicked_ | | `Title`
-
 ### Various
 Event | Action | Info | Payload
 --- | --- | --- | ---

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.13.0-beta.2",
+	"version": "8.14.0-beta.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@@ -36,7 +36,7 @@
 		"svelte": "5.44.1",
 		"svelte-check": "^4.0.0",
 		"svelte-preprocess": "^6.0.3",
-		"svelte-tiny-slider": "^2.7.2",
+		"svelte-tiny-slider": "^2.7.1",
 		"typescript": "^5.9.3",
 		"typescript-eslint": "^8.59.2",
 		"vite": "^5.4.21",

package/src/lib/api/titles.ts

@@ -27,3 +27,13 @@ export async function fetchSimilarTitles(title: TitleData): Promise<TitleData[]>
 
   return response.results
 }
+
+export async function fetchTitleBySid(sid: string): Promise<TitleData> {
+  const data = await fetchTitles({ sids: sid })
+
+  const title = data.results[0]
+
+  if (!title) throw new Error('No title was returned')
+
+  return title
+}

package/src/lib/data/translations.ts

@@ -281,10 +281,10 @@ export const translations = {
     [Language.Swedish]: 'Utforska',
     [Language.Danish]: 'Udforsk',
   },
-  'Mentioned In This Article': {
-    [Language.English]: 'Mentioned in this article',
-    [Language.Swedish]: 'Nämnda i den här artikeln',
-    [Language.Danish]: 'Nævnt i denne artikel',
+  'Page Not Found': {
+    [Language.English]: 'Page not found',
+    [Language.Swedish]: 'Sidan hittades inte',
+    [Language.Danish]: 'Siden blev ikke fundet',
   },
 
   // List titles

package/src/lib/enums/TrackingEvent.ts

@@ -55,9 +55,6 @@ export const TrackingEvent = {
   SplitTestView: 'ali_split_test_view',
   SplitTestAction: 'ali_split_test_action',
 
-  // Widgets
-  WidgetArticleRailTitleClick: 'ali_widget_article_rail_title_click',
-
   // Various
   ShareTitle: 'ali_share_title',
   SaveTitle: 'ali_save_title',

package/src/lib/fakeData.ts

@@ -49,7 +49,7 @@ export const linkInjections: LinkInjection[] = [{
   sentence: 'In an interview with Epire Magazine, Quan reveals he quested starring in Love Hurts',
   playpilot_url: 'https://playpilot.com/movie/example/',
   key: 'some-key-1',
-  title_details: { ...title, sid: '1' },
+  title_details: title,
 }, {
   sid: '2',
   title: 'The Long Kiss Goodnight',
@@ -57,7 +57,7 @@ export const linkInjections: LinkInjection[] = [{
   playpilot_url: 'https://playpilot.com/movie/example-2/',
   key: 'some-key-2',
   after_article: false,
-  title_details: { ...title, sid: '2' },
+  title_details: title,
 }, {
   sid: '3',
   title: 'Nobody',
@@ -65,7 +65,7 @@ export const linkInjections: LinkInjection[] = [{
   playpilot_url: 'https://playpilot.com/movie/example-3/',
   key: 'some-key-3',
   after_article: true,
-  title_details: { ...title, sid: '3' },
+  title_details: title,
   manual: false,
 }, {
   sid: '4',

package/src/lib/injection.ts

@@ -5,7 +5,6 @@ import { destroyAllModals, openModalForInjectedLink } from './modal'
 import { clearCurrentlyHoveredInjection, destroyLinkPopover, destroyLinkPopoverOnMouseleave, isPopoverActive, openPopoverForInjectedLink } from './popover'
 import { clearAfterArticlePlaylinks, insertAfterArticlePlaylinks } from './afterArticle'
 import { clearInTextDisclaimer, insertInTextDisclaimer } from './disclaimer'
-import { clearInTextWidgets, insertInTextWidgets } from './inTextWidgets'
 
 export const keyDataAttribute = 'data-playpilot-injection-key'
 export const keySelector = `[${keyDataAttribute}]`
@@ -169,8 +168,6 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
   // The function itself will decide whether or not it should actually insert the component based on the config.
   if (document.querySelector(keySelector)) insertInTextDisclaimer(elements)
 
-  insertInTextWidgets(foundInjections)
-
   return mergedInjections.filter(i => i.title_details).map((injection, index) => {
     const hasManualEquivalent = !injection.manual && isAvailableAsManualInjection(injection, index, mergedInjections)
     const duplicate = injection.duplicate ?? hasManualEquivalent
@@ -336,7 +333,6 @@ export function clearLinkInjections(): void {
 
   clearAfterArticlePlaylinks()
   clearInTextDisclaimer()
-  clearInTextWidgets()
   destroyAllModals(false)
   destroyLinkPopover(false)
 }

package/src/routes/+layout.svelte

@@ -70,8 +70,6 @@
         <p>De tre ’Jurassic World’-film kunne have givet indtryk af, at der ikke skal meget til, før dinosaurer igen ville kunne dominere kloden. Men det har vist sig ikke at holde stik.</p>
         <p>Het komt elk jaar voor dat films met torenhoge budgetten flink floppen aan de box-office, ongeacht de kwaliteit van de film. Dit is het geval bij een aantal films die dit jaar zijn uitgekomen. Denk aan Mickey 17, Black Bag en de onlangs uitgebrachte animatiefilm Elio. In 2015 was de superheldenfilm Fantastic Four een van de grootste flops.</p>
 
-        <div data-playpilot-widget="tpi-rail"></div>
-
         <h2>A matching link is already present</h2>
         <p>Following their post-credits scene in <a href="/">John Wick</a>, in a new John Wick spinoff.</p>
 

package/src/routes/components/Description.svelte

@@ -35,6 +35,7 @@
 <style lang="scss">
   .description:first-child {
     margin: margin(-1) 0 margin(1);
+    max-width: theme(description-max-width, 100%);
   }
 
   .paragraph {

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

@@ -7,6 +7,7 @@
   import ExploreHome from './Routes/ExploreHome.svelte'
   import ExploreResults from './Routes/ExploreResults.svelte'
   import ExploreLayout from './ExploreLayout.svelte'
+  import ExploreTitle from './Routes/ExploreTitle.svelte'
 
   const routes: ExploreRoute[] = [
     {
@@ -20,9 +21,16 @@
       key: 'home',
       component: ExploreHome,
     })
+
+    routes.push({
+      key: 'title',
+      component: ExploreTitle,
+    })
   }
 
-  let currentRoute: ExploreRoute = $state(routes[0])
+  const initialRouteKey = getCurrentRouteParam() || routes[0].key
+
+  let currentRoute: ExploreRoute = $state(routes.find(({ key }) => key === initialRouteKey) || routes[0])
   let searchQuery: string = $state('')
   let filter: ExploreFilter = $state({})
 
@@ -35,10 +43,27 @@
   function navigate(key: string): void {
     currentRoute = routes.find(route => route.key === key) || routes[0]
 
+    const currentUrl = new URL(document.location.toString())
+
+    if (key === routes[0].key) currentUrl.searchParams.delete('route')
+    else currentUrl.searchParams.set('route', currentRoute.key)
+
+    history.pushState({}, '', currentUrl)
+
     track(TrackingEvent.ExploreNavigate, null, { route: currentRoute.key })
   }
+
+  function onhashchange(): void {
+    navigate(getCurrentRouteParam())
+  }
+
+  function getCurrentRouteParam(): string {
+    return new URL(document.location.toString()).searchParams.get('route') || routes[0].key
+  }
 </script>
 
+<svelte:window on:popstate={onhashchange} />
+
 <ExploreLayout {navigate} bind:searchQuery bind:filter>
   <CurrentRouteComponent {searchQuery} {filter} {navigate} />
 </ExploreLayout>

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { onDestroy } from 'svelte'
   import { fetchTitles } from '$lib/api/titles'
   import { MetaEvent, TrackingEvent } from '$lib/enums/TrackingEvent'
   import { openModal } from '$lib/modal'
@@ -18,8 +19,7 @@
 
   interface Props {
     searchQuery?: string,
-    filter?: ExploreFilter,
-    navigate?: (key: string) => void
+    filter?: ExploreFilter
   }
 
   const { searchQuery = '', filter = {} }: Props = $props()
@@ -51,6 +51,10 @@
     if (filter) setFilter()
   })
 
+  onDestroy(() => {
+    emptyFilter()
+  })
+
   async function getTitlesForFilter(): Promise<APIPaginatedResult<TitleData>> {
     latestRequestId += 1
     const requestId = latestRequestId
@@ -108,6 +112,12 @@
     promise = getTitlesForFilter()
   }
 
+  function emptyFilter(): void {
+    for (const key of Object.keys(filter)) {
+      delete filter[key]
+    }
+  }
+
   function resetTitles(): void {
     page = 1
     titles = []

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

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import { fetchTitleBySid } from '$lib/api/titles'
+  import { mobileBreakpoint } from '$lib/constants'
+  import { t } from '$lib/localization'
+  import Button from '../../Button.svelte'
+  import IconArrow from '../../Icons/IconArrow.svelte'
+  import Title from '../../Title.svelte'
+
+  interface Props {
+    navigate?: (key: string) => void
+  }
+
+  const { navigate = () => null }: Props = $props()
+
+  let screenWidth = $state(window.innerWidth)
+
+  const isMobile = $derived(screenWidth < mobileBreakpoint)
+  const sid = new URL(document.location.toString()).searchParams.get('sid')
+</script>
+
+<svelte:window bind:innerWidth={screenWidth} />
+
+{#snippet empty()}
+  {@render back()}
+
+  <p class="empty">{t('Page Not Found')}</p>
+{/snippet}
+
+{#snippet back(offset = false)}
+  <div class="back" class:offset>
+    <Button variant="link" onclick={() => { navigate('home') }}>
+      <IconArrow direction="left" />
+      {t('Home')}
+    </Button>
+  </div>
+{/snippet}
+
+{#if sid}
+  {#await fetchTitleBySid(sid)}
+    {@render back()}
+
+    Loading...
+  {:then title}
+    {@render back(true)}
+
+    <div class="title" data-testid="title">
+      <Title {title} useVideoBackground={isMobile} />
+    </div>
+  {:catch}
+    {@render empty()}
+  {/await}
+{:else}
+  {@render empty()}
+{/if}
+
+<style lang="scss">
+  .title {
+    --playpilot-description-max-width: 600px;
+    --playpilot-playlinks-max-width: 600px;
+    position: relative;
+    border-radius: theme(border-radius);
+    overflow: hidden;
+    margin-top: margin(1);
+
+    @include desktop() {
+      --playpilot-detail-header-offset: #{margin(5)};
+      --playpilot-detail-background-height: #{margin(35)};
+      --playpilot-detail-background-opacity: 0.5;
+    }
+  }
+
+  .back {
+    --playpilot-button-text-color: white;
+    font-weight: theme(font-bold);
+
+    &.offset {
+      z-index: 1;
+      position: absolute;
+      margin-left: margin(1);
+      margin-top: margin(1);
+    }
+  }
+
+  .empty {
+    margin-top: margin(1);
+    padding: margin(1);
+    border: 1px solid theme(content);
+    max-width: margin(20);
+    border-radius: theme(border-radius);
+    font-size: theme(font-size-large);
+    font-weight: theme(font-bold);
+    color: theme(text-color);
+  }
+</style>

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

@@ -123,6 +123,7 @@
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(margin(15), 1fr));
     gap: margin(0.5);
+    max-width: theme(playlinks-max-width, 100%);
 
     &.list {
       grid-template-columns: 1fr;

package/src/routes/components/Rails/Rail.svelte

@@ -58,15 +58,15 @@
   .rail {
     --gap: var(--rail-gap, #{margin(0.5)});
     position: relative;
-    width: calc(100% + var(--rail-margin, margin(1)) * 2);
-    margin: 0 calc(var(--rail-margin, margin(1)) * -1);
+    width: calc(100% + margin(2));
+    margin: 0 margin(-1);
 
     :global(.slider) {
-      padding: 0 var(--rail-margin, margin(1));
+      padding: 0 margin(1);
     }
 
     :global(.slider-content > :last-child) {
-      margin-right: calc(var(--rail-margin, margin(1)) * 2);
+      margin-right: margin(2);
     }
   }
 

package/src/routes/components/Title.svelte

@@ -135,7 +135,7 @@
 
   .content {
     position: relative;
-    padding: margin(1);
+    padding: theme(detail-padding, margin(1));
     color: theme(detail-text-color, text-color);
     font-family: theme(detail-font-family, font-family);
     font-weight: theme(detail-font-weight, normal);
@@ -172,7 +172,7 @@
 
     @include desktop {
       display: block;
-      padding-top: margin(3);
+      padding-top: theme(title-header-offset, margin(3));
     }
 
     .small & {
@@ -217,6 +217,11 @@
     }
   }
 
+  .main {
+    z-index: 1;
+    position: relative;
+  }
+
   .imdb {
     display: flex;
     align-items: center;
@@ -234,6 +239,8 @@
   }
 
   .actions {
+    z-index: 1;
+    position: relative;
     grid-area: actions;
     display: flex;
     gap: margin(0.5);
@@ -245,14 +252,15 @@
     top: 0;
     left: 0;
     width: 100%;
-    height: margin(20);
+    height: theme(detail-background-height, margin(20));
     border-radius: theme(detail-background-border-radius, 0px);
     overflow: hidden;
     background: theme(detail-background, lighter);
     mask-image: linear-gradient(to bottom, black 40%, transparent);
+    opacity: theme(detail-background-opacity, 1);
 
     @include desktop() {
-      height: margin(12);
+      height: theme(detail-background-height, margin(12));
       mask-image: linear-gradient(to bottom, black 60%, transparent);
     }
 

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

@@ -1,7 +1,7 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 
 import { api } from '$lib/api/api'
-import { fetchSimilarTitles, fetchTitles } from '$lib/api/titles'
+import { fetchSimilarTitles, fetchTitleBySid, fetchTitles } from '$lib/api/titles'
 import { title } from '$lib/fakeData'
 import { getApiToken } from '$lib/token'
 import { fakeFetch } from '../../helpers'
@@ -74,4 +74,26 @@ describe('$lib/api/titles', () => {
       await expect(async () => await fetchSimilarTitles(title)).rejects.toThrow()
     })
   })
+
+  describe('fetchTitleBySid', () => {
+    it('Should call api with given sid and return the first result', async () => {
+      vi.mocked(api).mockResolvedValueOnce({ results: [title] })
+
+      const response = await fetchTitleBySid(title.sid)
+
+      expect(api).toHaveBeenCalledWith(`/titles/browse?api-token=some-token&sids=${title.sid}&language=en-US&include_count=false`)
+      expect(response).toEqual(title)
+    })
+
+    it('Should throw when no title is returned', async () => {
+      vi.mocked(api).mockResolvedValueOnce({ results: [] })
+
+      await expect(async () => await fetchTitleBySid(title.sid)).rejects.toThrow('No title was returned')
+    })
+
+    it('Should throw when api returns error', async () => {
+      vi.mocked(api).mockRejectedValueOnce({ error: 'message' })
+      await expect(async () => await fetchTitleBySid(title.sid)).rejects.toThrow()
+    })
+  })
 })

package/src/tests/routes/components/Explore/Routes/ExploreTitle.test.js

@@ -0,0 +1,87 @@
+import { render, waitFor, fireEvent } from '@testing-library/svelte'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import TitleDetail from '../../../../../routes/components/Explore/Routes/ExploreTitle.svelte'
+import { fetchTitleBySid } from '$lib/api/titles'
+import { title } from '$lib/fakeData'
+
+vi.mock('$lib/api/titles', () => ({
+  fetchTitleBySid: vi.fn(),
+}))
+
+vi.mock('/src/routes/components/Title.svelte', () => ({
+  default: vi.fn(),
+}))
+
+describe('ExploreTitle.svelte', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+    vi.mocked(fetchTitleBySid).mockResolvedValue(title)
+
+    history.pushState({}, '', '/')
+  })
+
+  it('Should render empty state when no sid is in the URL', async () => {
+    const { getByText } = render(TitleDetail)
+
+    await waitFor(() => {
+      expect(getByText('Page not found')).toBeTruthy()
+    })
+  })
+
+  it('Should call fetchTitleBySid with sid from URL', async () => {
+    history.pushState({}, '', '?sid=some-sid')
+
+    render(TitleDetail)
+
+    expect(fetchTitleBySid).toHaveBeenCalledWith('some-sid')
+  })
+
+  it('Should render loading state while fetching', async () => {
+    history.pushState({}, '', '?sid=some-sid')
+    vi.mocked(fetchTitleBySid).mockReturnValue(new Promise(() => {}))
+
+    const { getByText } = render(TitleDetail)
+
+    expect(getByText('Loading...')).toBeTruthy()
+  })
+
+  it('Should render the title when fetchTitleBySid resolves', async () => {
+    history.pushState({}, '', '?sid=some-sid')
+
+    const { getByTestId } = render(TitleDetail)
+
+    await waitFor(() => {
+      expect(getByTestId('title')).toBeTruthy()
+    })
+  })
+
+  it('Should render empty state when fetchTitleBySid rejects', async () => {
+    history.pushState({}, '', '?sid=some-sid')
+    vi.mocked(fetchTitleBySid).mockRejectedValue(new Error('Not found'))
+
+    const { getByText } = render(TitleDetail)
+
+    await waitFor(() => {
+      expect(getByText('Page not found')).toBeTruthy()
+    })
+  })
+
+  it('Should call navigate with "home" when back button is clicked', async () => {
+    history.pushState({}, '', '?sid=some-sid')
+
+    const navigate = vi.fn()
+
+    const { getByText } = render(TitleDetail, { navigate })
+
+    await fireEvent.click(getByText('Home'))
+
+    expect(navigate).toHaveBeenCalledWith('home')
+  })
+
+  it('Should not call fetchTitleBySid when no sid is in the URL', async () => {
+    render(TitleDetail)
+
+    expect(fetchTitleBySid).not.toHaveBeenCalled()
+  })
+})

package/src/lib/inTextWidgets.ts

@@ -1,43 +0,0 @@
-import { mount, unmount } from 'svelte'
-import type { LinkInjection } from './types/injection'
-import InjectionsWidgetRail from '../routes/components/Widgets/InjectionsWidgetRail.svelte'
-
-const widgets: Record<string, any> = {
-  'tpi-rail': InjectionsWidgetRail,
-}
-
-export const inTextWidgetSelector = '[data-playpilot-widget]'
-
-export let inTextWidgetInsertedComponents: any[] = []
-
-export function insertInTextWidgets(linkInjections: LinkInjection[]): void {
-  clearInTextWidgets()
-
-  if (!linkInjections.length) return
-
-  const targets = document.querySelectorAll<HTMLElement>(inTextWidgetSelector)
-
-  targets.forEach(target => {
-    const widget = target.dataset.playpilotWidget || ''
-
-    const component = widgets[widget]
-
-    if (!component) return
-
-    const insertedComponent = mount(component, {
-      target,
-      props: {
-        linkInjections,
-      },
-    })
-
-    inTextWidgetInsertedComponents.push(insertedComponent)
-  })
-}
-
-export function clearInTextWidgets(): void {
-  inTextWidgetInsertedComponents.forEach(component => unmount(component))
-  document.querySelectorAll('[data-playpilot-widget]').forEach(element => element.innerHTML = '')
-
-  inTextWidgetInsertedComponents = []
-}

package/src/routes/components/Widgets/InjectionsWidgetRail.svelte

@@ -1,51 +0,0 @@
-<script lang="ts">
-  import { TrackingEvent } from '$lib/enums/TrackingEvent'
-  import { t } from '$lib/localization'
-  import { track } from '$lib/tracking'
-  import type { LinkInjection } from '$lib/types/injection'
-  import type { TitleData } from '$lib/types/title'
-  import TitlesRail from '../Rails/TitlesRail.svelte'
-
-  interface Props {
-    linkInjections: LinkInjection[]
-  }
-
-  const { linkInjections }: Props = $props()
-
-  let element: HTMLElement | null = $state(null)
-
-  // @ts-ignore
-  const heading = $derived(element?.parentNode?.dataset.heading || t('Mentioned In This Article'))
-
-  const titles: TitleData[] = $derived.by(() => {
-    const uniqueTitles: TitleData[] = []
-
-    linkInjections.forEach(injection => {
-      const title = injection.title_details!
-
-      if (!title) return
-      if (uniqueTitles.some(t => t.sid === title.sid)) return
-
-      uniqueTitles.push(title)
-    })
-
-    return uniqueTitles
-  })
-</script>
-
-{#if titles.length}
-  <div class="widget" bind:this={element} data-testid="widget">
-    <TitlesRail {titles} {heading} onclick={(title) => track(TrackingEvent.WidgetArticleRailTitleClick, title)} />
-  </div>
-{/if}
-
-<style lang="scss">
-  .widget {
-    --rail-margin: 0;
-    --playpilot-rails-arrow-background: black;
-    --playpilot-detail-background-light: black;
-    --playpilot-rail-title-text-color: currentColor;
-    --playpilot-rail-text-color: currentColor;
-    margin: margin(1) 0;
-  }
-</style>