@playpilot/tpi 8.14.0-beta.4 → 8.14.0

package/events.md

@@ -100,6 +100,11 @@ 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.14.0-beta.4",
+	"version": "8.14.0",
 	"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.1",
+		"svelte-tiny-slider": "^2.7.2",
 		"typescript": "^5.9.3",
 		"typescript-eslint": "^8.59.2",
 		"vite": "^5.4.21",

package/src/lib/api/titles.ts

@@ -27,13 +27,3 @@ 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, no_region_filter: true })
-
-  const title = data.results[0]
-
-  if (!title) throw new Error('No title was returned for sid: ' + sid)
-
-  return title
-}

package/src/lib/data/translations.ts

@@ -171,6 +171,11 @@ export const translations = {
     [Language.Swedish]: 'Upptäck och sök bland alla filmer och tv-serier',
     [Language.Danish]: 'Opdag og søg i alle film og tv-serier',
   },
+  'Streaming Guide Disclaimer': {
+    [Language.English]: 'In collaboration with <a href="https://www.playpilot.com/" target="_blank" rel="sponsored">PlayPilot.com</a>',
+    [Language.Swedish]: 'I samarbete med <a href="https://www.playpilot.com/" target="_blank" rel="sponsored">PlayPilot.com</a>',
+    [Language.Danish]: 'I samarbejde med <a href="https://www.playpilot.com/" target="_blank" rel="sponsored">PlayPilot.com</a>',
+  },
   'Streaming Guide Description': {
     [Language.English]: 'Find where to watch movies online - the ultimate guide that helps you find the best movies and shows across streaming services.',
     [Language.Swedish]: 'Sök bland alla filmer och serier för att ta reda på var du kan streama dem',
@@ -281,10 +286,10 @@ export const translations = {
     [Language.Swedish]: 'Utforska',
     [Language.Danish]: 'Udforsk',
   },
-  'Page Not Found': {
-    [Language.English]: 'Page not found',
-    [Language.Swedish]: 'Sidan hittades inte',
-    [Language.Danish]: 'Siden blev ikke fundet',
+  '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',
   },
 
   // List titles

package/src/lib/enums/TrackingEvent.ts

@@ -55,6 +55,9 @@ 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,
+  title_details: { ...title, sid: '1' },
 }, {
   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,
+  title_details: { ...title, sid: '2' },
 }, {
   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,
+  title_details: { ...title, sid: '3' },
   manual: false,
 }, {
   sid: '4',

package/src/lib/inTextWidgets.ts

@@ -0,0 +1,43 @@
+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/lib/injection.ts

@@ -5,7 +5,7 @@ import { destroyAllModals, openModalForInjectedLink } from './modal'
 import { clearCurrentlyHoveredInjection, destroyLinkPopover, destroyLinkPopoverOnMouseleave, isPopoverActive, openPopoverForInjectedLink } from './popover'
 import { clearAfterArticlePlaylinks, insertAfterArticlePlaylinks } from './afterArticle'
 import { clearInTextDisclaimer, insertInTextDisclaimer } from './disclaimer'
-import { exploreTitleUrl, titleUrl } from './routes'
+import { clearInTextWidgets, insertInTextWidgets } from './inTextWidgets'
 
 export const keyDataAttribute = 'data-playpilot-injection-key'
 export const keySelector = `[${keyDataAttribute}]`
@@ -169,6 +169,8 @@ 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
@@ -200,15 +202,11 @@ function createLinkInjectionElement(injection: LinkInjection): { injectionElemen
   const injectionElement = document.createElement('span')
   injectionElement.dataset.playpilotInjectionKey = injection.key
 
-  const openInExplore = !!window.PlayPilotLinkInjections?.config?.open_tpi_links_in_explore
-
-  const href = openInExplore ? exploreTitleUrl(injection.title_details!) : titleUrl(injection.title_details!)
-
   const linkElement = document.createElement('a')
   linkElement.dataset.playpilotPosterUrl = injection.title_details?.standing_poster
   linkElement.innerText = injection.title
-  linkElement.href = href
-  linkElement.target = openInExplore ? '' : '_blank'
+  linkElement.href = injection.playpilot_url
+  linkElement.target = '_blank'
   linkElement.rel = 'noopener nofollow noreferrer'
 
   injectionElement.insertAdjacentElement('beforeend', linkElement)
@@ -313,12 +311,7 @@ function addCSSVariablesToLinks(): void {
 
 function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
   window.addEventListener('mousemove', destroyLinkPopoverOnMouseleave)
-
-  window.addEventListener('click', (event) => {
-    if (window.PlayPilotLinkInjections?.config?.open_tpi_links_in_explore) return
-
-    openModalForInjectedLink(event, injections)
-  })
+  window.addEventListener('click', (event) => openModalForInjectedLink(event, injections))
 
   const createdInjectionElements = document.querySelectorAll<HTMLElement>(keySelector)
 
@@ -343,6 +336,7 @@ export function clearLinkInjections(): void {
 
   clearAfterArticlePlaylinks()
   clearInTextDisclaimer()
+  clearInTextWidgets()
   destroyAllModals(false)
   destroyLinkPopover(false)
 }

package/src/lib/routes.ts

@@ -4,11 +4,3 @@ import type { TitleData } from './types/title'
 export function titleUrl(title: TitleData): string {
   return `${playPilotBaseUrl}/${title.type}/${title.slug}/`
 }
-
-export function exploreTitleUrl(title: TitleData): string {
-  if (localStorage.getItem('tpi-open-explore-as-modal') === 'true') {
-    return window.PlayPilotLinkInjections?.config?.explore_navigation_path + `?route=modal&sid=${title.sid}`
-  }
-
-  return window.PlayPilotLinkInjections?.config?.explore_navigation_path + `?route=title&sid=${title.sid}`
-}

package/src/lib/types/config.d.ts

@@ -97,11 +97,6 @@ export type ConfigResponse = {
   in_text_disclaimer_selector?: string
   in_text_disclaimer_insert_position?: InsertPosition
 
-  /**
-   * Open TPI links in explore rather than in modals in the article
-   */
-  open_tpi_links_in_explore?: boolean
-
   /**
    * These options are all relevant for the Explore component, which can be inserted as a widget on any page or as a modal.
    * `explore_navigation_selector` is used to select the navigation element that should be copied and inserted _after_.

package/src/routes/+layout.svelte

@@ -70,6 +70,8 @@
         <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/Debugger.svelte

@@ -226,11 +226,6 @@
 
     <hr />
 
-    <button onclick={() => { localStorage.setItem('tpi-open-explore-as-modal', 'true'); onrerender() }}>Open links as modal in explore</button>
-    <button onclick={() => { localStorage.setItem('tpi-open-explore-as-modal', 'false'); onrerender() }}>Open links as separate page in explore</button>
-
-    <hr />
-
     <button onclick={() => shown = false}>Close</button>
   </div>
 {/if}

package/src/routes/components/Description.svelte

@@ -35,7 +35,6 @@
 <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/ExploreLayout.svelte

@@ -52,6 +52,11 @@
         {t('Streaming Guide Subheading')}
       </div>
 
+      <p class="disclaimer">
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        {@html t('Streaming Guide Disclaimer')}
+      </p>
+
       {#if !useExploreRouter()}
         <p class="description">
           {t('Streaming Guide Description')}
@@ -117,7 +122,7 @@
   .heading,
   .subheading {
     color: theme(text-color);
-    font-size: theme(explore-heading-size, clamp(margin(1.5), 5vw, margin(2)));
+    font-size: theme(explore-heading-font-size, clamp(margin(1.5), 5vw, margin(2)));
     font-weight: theme(explore-heading-font-weight, font-bold);
     text-transform: theme(explore-heading-text-transform, normal);
     line-height: theme(explore-heading-line-height, 1.5);
@@ -126,13 +131,25 @@
   .subheading {
     margin-top: margin(0.5);
     max-width: margin(15);
-    font-size: theme(explore-subheading-size, clamp(margin(1), 2.5vw, margin(1.25)));
+    font-size: theme(explore-subheading-font-size, clamp(margin(1), 2.5vw, margin(1.25)));
 
     @include desktop {
       max-width: 100%;
     }
   }
 
+  .disclaimer {
+    margin: theme(explore-disclaimer-margin, 0);
+    font-size: theme(explore-diclaimer-font-size, font-size-small);
+    color: theme(explore-disclaimer-color, text-color-alt);
+    opacity: 0.75;
+
+    :global(a) {
+      color: inherit;
+      font-style: inherit;
+    }
+  }
+
   .description {
     max-width: theme(explore-header-max-width, 600px);
     margin: 0;

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

@@ -7,10 +7,6 @@
   import ExploreHome from './Routes/ExploreHome.svelte'
   import ExploreResults from './Routes/ExploreResults.svelte'
   import ExploreLayout from './ExploreLayout.svelte'
-  import ExploreTitle from './Routes/ExploreTitle.svelte'
-  import { fetchSimilarTitles, fetchTitleBySid } from '$lib/api/titles'
-  import { openModal } from '$lib/modal'
-  import type { TitleData } from '$lib/types/title'
 
   const routes: ExploreRoute[] = [
     {
@@ -24,74 +20,25 @@
       key: 'home',
       component: ExploreHome,
     })
-
-    routes.push({
-      key: 'title',
-      component: ExploreTitle,
-    })
   }
 
-  const initialRouteKey = getCurrentRouteParam() || routes[0].key
-
-  let currentRoute: ExploreRoute = $state(routes.find(({ key }) => key === initialRouteKey) || routes[0])
+  let currentRoute: ExploreRoute = $state(routes[0])
   let searchQuery: string = $state('')
   let filter: ExploreFilter = $state({})
 
   const CurrentRouteComponent = $derived(currentRoute.component)
 
-  if (initialRouteKey === 'modal') openModalViaRoute()
-
   $effect(() => {
     if (searchQuery) currentRoute = routes.find(route => route.key === 'results')!
   })
 
-  function navigate(key: string, pushState: boolean = true): void {
+  function navigate(key: string): void {
     currentRoute = routes.find(route => route.key === key) || routes[0]
 
-    const currentUrl = new URL(document.location.toString())
-
-    if (key !== 'title' && key !== 'modal') currentUrl.searchParams.delete('sid')
-
-    if (key === routes[0].key) currentUrl.searchParams.delete('route')
-    else currentUrl.searchParams.set('route', currentRoute.key)
-
-    if (pushState) history.pushState({}, '', currentUrl)
-
     track(TrackingEvent.ExploreNavigate, null, { route: currentRoute.key })
   }
-
-  function onhashchange(): void {
-    navigate(getCurrentRouteParam(), false)
-  }
-
-  function getCurrentRouteParam(): string {
-    return new URL(document.location.toString()).searchParams.get('route') || routes[0].key
-  }
-
-  // This is temporary while testing, please clean me up later
-  async function openModalViaRoute(): Promise<void> {
-    const currentUrl = new URL(document.location.toString())
-    const sid = currentUrl.searchParams.get('sid')
-
-    if (!sid) return
-
-    const [title, railTitles] = (await Promise.allSettled([
-      fetchTitleBySid(sid),
-      fetchSimilarTitles({ sid } as unknown as TitleData)])
-    ).map(promise => (promise.status === 'fulfilled' ? promise.value : null))
-
-    openModal({
-      type: 'titles-rail',
-      data: [(title as TitleData), ...(railTitles as TitleData[])],
-      props: {
-        onclose: () => navigate('home'),
-      },
-    })
-  }
 </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,5 +1,4 @@
 <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'
@@ -19,7 +18,8 @@
 
   interface Props {
     searchQuery?: string,
-    filter?: ExploreFilter
+    filter?: ExploreFilter,
+    navigate?: (key: string) => void
   }
 
   const { searchQuery = '', filter = {} }: Props = $props()
@@ -51,10 +51,6 @@
     if (filter) setFilter()
   })
 
-  onDestroy(() => {
-    emptyFilter()
-  })
-
   async function getTitlesForFilter(): Promise<APIPaginatedResult<TitleData>> {
     latestRequestId += 1
     const requestId = latestRequestId
@@ -112,12 +108,6 @@
     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/Modals/RailModal.svelte

@@ -12,11 +12,10 @@
     items: Record<string, any>[]
     initialIndex?: number
     onchange?: (index: number) => void
-    onclose?: () => void
     each: Snippet<[item: any, currentIndex: number]>
   }
 
-  const { items, initialIndex = 0, onchange = () => null, onclose = () => null, each }: Props = $props()
+  const { items, initialIndex = 0, onchange = () => null, each }: Props = $props()
 
   const transitionDuration = 300
 
@@ -36,7 +35,7 @@
   }
 </script>
 
-<Modal blur {onclose}>
+<Modal blur>
   {#snippet dialog()}
     <div class="rail-modal" style:--transition-duration="{transitionDuration}ms">
       <TinySlider threshold={40} moveThreshold={40} transitionDuration={initialized ? transitionDuration : 0} bind:this={slider}>
@@ -71,7 +70,7 @@
     </div>
 
     <div class="close" transition:scale|global>
-      <RoundButton size="42px" onclick={() => { onclose(); destroyAllModals() }} aria-label="Close">
+      <RoundButton size="42px" onclick={() => destroyAllModals()} aria-label="Close">
         <IconClose size={24} />
       </RoundButton>
     </div>

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

@@ -123,7 +123,6 @@
     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% + margin(2));
-    margin: 0 margin(-1);
+    width: calc(100% + var(--rail-margin, margin(1)) * 2);
+    margin: 0 calc(var(--rail-margin, margin(1)) * -1);
 
     :global(.slider) {
-      padding: 0 margin(1);
+      padding: 0 var(--rail-margin, margin(1));
     }
 
     :global(.slider-content > :last-child) {
-      margin-right: margin(2);
+      margin-right: calc(var(--rail-margin, margin(1)) * 2);
     }
   }
 

package/src/routes/components/Title.svelte

@@ -135,7 +135,7 @@
 
   .content {
     position: relative;
-    padding: theme(detail-padding, margin(1));
+    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: theme(title-header-offset, margin(3));
+      padding-top: margin(3);
     }
 
     .small & {
@@ -217,11 +217,6 @@
     }
   }
 
-  .main {
-    z-index: 1;
-    position: relative;
-  }
-
   .imdb {
     display: flex;
     align-items: center;
@@ -239,8 +234,6 @@
   }
 
   .actions {
-    z-index: 1;
-    position: relative;
     grid-area: actions;
     display: flex;
     gap: margin(0.5);
@@ -252,15 +245,14 @@
     top: 0;
     left: 0;
     width: 100%;
-    height: theme(detail-background-height, margin(20));
+    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: theme(detail-background-height, margin(12));
+      height: margin(12);
       mask-image: linear-gradient(to bottom, black 60%, transparent);
     }
 

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

@@ -0,0 +1,51 @@
+<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>

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, fetchTitleBySid, fetchTitles } from '$lib/api/titles'
+import { fetchSimilarTitles, fetchTitles } from '$lib/api/titles'
 import { title } from '$lib/fakeData'
 import { getApiToken } from '$lib/token'
 import { fakeFetch } from '../../helpers'
@@ -74,26 +74,4 @@ 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}&no_region_filter=true&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()
-    })
-  })
 })