@playpilot/tpi 5.18.1-beta.2 → 5.19.0

package/events.md

@@ -56,7 +56,9 @@ Event | Action | Info | Payload
 Event | Action | Info | Payload
 --- | --- | --- | ---
 `ali_injection_failed` | _Fires only inside of the Editor for each injection that failed_ | Only includes visible failures, for instance, it will ignore failures because of already existing links. If a user is shown a message about a failed injection, this event will fire. Includes data on the phrase and sentence for the injection. | `Title`, `phrase`, `sentence`
-`ali_injection_count` | _Fires the first time the Editor is shown_ | This logs the total amount of injections, the total amount of failed and manual injections, and the total amount of successful injections. | `total` (number of failed + successsful injections), `failed_automatic`, `failed_manual`, `final_injected` (number of successful injections)
+`ali_injection_count` | _Fires the first time the Editor is shown_ | This logs the total amount of injections, the total amount of failed and manual injections, and the total amount of successful injections. | `total` (number of failed + successful injections),
+`ali_injections_failed_count` | _Fires any time an article included failed injections_ | `total`, `sentence_not_found`, `already_linked`, `broken_html`, `duplicate`, `unknown` (All separate counts of failed injection categories)
+`failed_automatic`, `failed_manual`, `final_injected` (number of successful injections)
 `ali_fetch_config_failed` | _Fires whenever the config object failed to fetch_ | When this happens, injections are aborted.
 `ali_auth_failed` | _Fires whenever authentication for the Editor fails._
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "5.18.1-beta.2",
+	"version": "5.19.0",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/api/api.ts

@@ -1,4 +1,7 @@
 import { apiBaseUrl } from '$lib/constants'
+import { isEditorialModeEnabled } from './auth'
+
+const cache: Record<string, any> = {}
 
 type Options = {
   headers?: Record<string, string>
@@ -7,6 +10,12 @@ type Options = {
 }
 
 export async function api<T>(path: string, { headers = {}, method = 'GET', body = null }: Options = {}): Promise<T> {
+  // For GET methods we store all results in a cache object. This cache is super simple and has no invalidation at all.
+  // Once something is stored it's there forever since the page is only short lived.
+  // We never use the cache for editiorial mode since in the editor requests do change.
+  const useCache = !isEditorialModeEnabled() && method === 'GET'
+  if (useCache && (path in cache)) return cache[path]
+
   const baseHeaders = { 'Content-Type': 'application/json' }
 
   const response = await fetch(apiBaseUrl + path, {
@@ -19,9 +28,19 @@ export async function api<T>(path: string, { headers = {}, method = 'GET', body
 
   const text = await response.text()
 
+  let parsed: unknown = text
+
   try {
-    return JSON.parse(text)
+    if (text) parsed = JSON.parse(text)
   } catch {
-    return text as T
+    // Ignore
   }
+
+  if (useCache) cache[path] = parsed
+
+  return parsed as T
+}
+
+export function clearCache(): void {
+  for(const key in cache) delete cache[key]
 }

package/src/lib/enums/TrackingEvent.ts

@@ -30,6 +30,7 @@ export const TrackingEvent = Object.freeze({
   // Fails
   InjectionFailed: 'ali_injection_failed',
   TotalInjectionsCount: 'ali_injection_count',
+  FailedInjectionsCount: 'ali_failed_injection_count',
   FetchingConfigFailed: 'ali_fetch_config_failed',
   AuthFailed: 'ali_auth_failed',
 

package/src/lib/injection.ts

@@ -1,6 +1,6 @@
 import { mount, unmount } from 'svelte'
 import TitlePopover from '../routes/components/TitlePopover.svelte'
-import AfterArticlePlaylinks from '../routes/components/AfterArticlePlaylinks.svelte'
+import AfterArticlePlaylinks from '../routes/components/Playlinks/AfterArticlePlaylinks.svelte'
 import { cleanPhrase, findNumberOfMatchesInString, findShortestMatchBetweenPhrases, findTextNodeContaining, getIndexOfPhraseInElement, getNumberOfLeadingAndTrailingSpaces, isNodeInLink, replaceBetween, replaceStartingFrom } from './text'
 import type { LinkInjection, LinkInjectionTypes } from './types/injection'
 import { isHoldingSpecialKey } from './event'
@@ -322,13 +322,15 @@ function addCSSVariablesToLinks(): void {
     '--playpilot-injection-background-color-hover',
   ]
 
-  createdLinkElements.forEach(element => {
-    variables.forEach((value) => {
-      if (getComputedStyle(element).getPropertyValue(value)) {
-        element.dataset.usedCssVariables = `${element.dataset.usedCssVariables || ''} ${value}`
-      }
-    })
-  })
+  for (const element of createdLinkElements) {
+    const style = getComputedStyle(element)
+
+    for (const value of variables) {
+      if (!style.getPropertyValue(value)) continue
+
+      element.dataset.usedCssVariables = `${element.dataset.usedCssVariables || ''} ${value}`
+    }
+  }
 }
 
 /**

package/src/lib/scss/_mixins.scss

@@ -19,3 +19,15 @@
     }
   }
 }
+
+@mixin desktop() {
+  @media (min-width: 600px) {
+    @content;
+  }
+}
+
+@mixin motion() {
+  @media (prefers-reduced-motion: no-preference) {
+    @content;
+  }
+}

package/src/routes/+page.svelte

@@ -132,15 +132,7 @@
       window.PlayPilotLinkInjections.evaluated_link_injections = filteredInjections
     }
 
-    const successfulInjections = filteredInjections.filter(i => !i.failed)
-
-    if (!successfulInjections.length) return
-    if (isEditorialMode) return
-
-    track(TrackingEvent.ArticleInjected, null, {
-      manual: successfulInjections.filter(i => i.manual).length,
-      ai: successfulInjections.filter(i => !i.manual).length,
-    })
+    if (!isEditorialMode) trackInjections(filteredInjections)
   }
 
   // Set elements to be used by script, if a selector is passed from the config request we update
@@ -170,6 +162,31 @@
 
     if (!existingElement) document.body.appendChild(styleElement)
   }
+
+  function trackInjections(filteredInjections: LinkInjection[]): void {
+    const successfulInjections = filteredInjections.filter(i => !i.failed)
+    const failedInjections = filteredInjections.filter(i => i.failed)
+
+    if (successfulInjections.length) {
+      track(TrackingEvent.ArticleInjected, null, {
+        manual: successfulInjections.filter(i => i.manual).length,
+        ai: successfulInjections.filter(i => !i.manual).length,
+      })
+    }
+
+    if (failedInjections.length) {
+      const countForMessage = (message: string): number => failedInjections.filter(({ failed_message }) => failed_message?.includes(message)).length
+
+      track(TrackingEvent.FailedInjectionsCount, null, {
+        total: failedInjections.length,
+        sentence_not_found: countForMessage('sentence was not found'),
+        already_linked: countForMessage('already inside of a link'),
+        broken_html: countForMessage('broken HTML'),
+        duplicate: countForMessage('duplicate'),
+        unknown: countForMessage('unknown reasons'),
+      })
+    }
+  }
 </script>
 
 <div class="playpilot-link-injections" data-playpilot-link-injections>

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

@@ -104,7 +104,7 @@
     font-size: margin(0.75);
     text-decoration: underline;
 
-    @media (min-width: 600px) {
+    @include desktop() {
       padding: margin(1);
 
       .compact & {
@@ -127,7 +127,7 @@
     font-size: margin(0.875);
     text-decoration: none;
 
-    @media (min-width: 600px) {
+    @include desktop() {
       padding: margin(1);
 
       .compact & {

package/src/routes/components/ListTitle.svelte

@@ -7,8 +7,8 @@
   import type { TitleData } from '$lib/types/title'
   import IconArrow from './Icons/IconArrow.svelte'
   import IconIMDb from './Icons/IconIMDb.svelte'
-  import PlaylinkIcon from './PlaylinkIcon.svelte'
-  import PlaylinkLabel from './PlaylinkLabel.svelte'
+  import PlaylinkIcon from './Playlinks/PlaylinkIcon.svelte'
+  import PlaylinkLabel from './Playlinks/PlaylinkLabel.svelte'
   import TitlePoster from './TitlePoster.svelte'
 
   interface Props {
@@ -124,7 +124,7 @@
     font-size: var(--playpilot-detail-font-size, 14px);
     line-height: normal;
 
-    @media (min-width: 600px) {
+    @include desktop() {
       padding-right: margin(1);
     }
   }

package/src/routes/components/Modal.svelte

@@ -32,6 +32,7 @@
   }: Props = $props()
 
   const inlineBubble = isInSplitTestVariant(SplitTest.TopScrollFormat, 1)
+  const historyHash = '#playpilot'
 
   let windowWidth = $state(0)
   let modalElement: HTMLElement | null = $state(null)
@@ -52,9 +53,20 @@
 
     hasPreviousModal = !!getPreviousModal()
 
+    // Add modal state to the browser history. This allows us to close to modal when using the back button.
+    // Only do this for the very first modal opened in the stack. The back button always fully closes all modals.
+    if (!hasPreviousModal) window.history.pushState({ modal: true }, '', historyHash)
+
     requestAnimationFrame(setInitialScrollPosition)
 
-    return () => document.body.style.overflowY = baseOverflowStyle || ''
+    return () => {
+      document.body.style.overflowY = baseOverflowStyle || ''
+
+      // Remove the modal entry from above from the browser history. This is done only once for the entire stack.
+      // We check for getPreviousModal not because we really care about the previous modal, but to check if all
+      // modals were closed and none will open again within this stack.
+      if (!getPreviousModal() && history.state?.modal) history.back()
+    }
   })
 
   function setInitialScrollPosition(): void {
@@ -70,7 +82,10 @@
   }
 </script>
 
-<svelte:window onkeydown={({ key }) => { if (key === 'Escape') destroyAllModals() }} bind:innerWidth={windowWidth} />
+<svelte:window
+  onkeydown={({ key }) => { if (key === 'Escape') destroyAllModals() }}
+  onhashchange={() => destroyAllModals()}
+  bind:innerWidth={windowWidth} />
 
 <div class="modal" style:--dialog-offset="{dialogOffset}px" transition:fade|global={{ duration: 150 }} bind:this={modalElement} class:has-bubble={!!bubble && inlineBubble} class:has-prepend={!!prepend}>
   {#if prepend}
@@ -133,7 +148,7 @@
     left: 0;
     background: var(--playpilot-detail-backdrop, rgba(0, 0, 0, 0.65));
 
-    @media (min-width: $max-width) {
+    @include desktop() {
       padding: margin(2) 0;
     }
 
@@ -159,7 +174,7 @@
       max-height: 80dvh;
     }
 
-    @media (min-width: $max-width) {
+    @include desktop() {
       max-height: unset;
       margin-top: 0;
       padding-bottom: 0;
@@ -217,7 +232,7 @@
     top: calc(var(--dialog-offset) + margin(1));
     right: margin(1);
 
-    @media (min-width: $max-width) {
+    @include desktop() {
       position: absolute;
       top: margin(1);
     }
@@ -253,7 +268,7 @@
     padding-top: margin(3);
     margin: auto auto margin(0.5);
 
-    @media (min-width: $max-width) {
+    @include desktop() {
       padding-top: 0;
       margin-top: 0;
     }
@@ -266,7 +281,7 @@
     max-width: $max-width;
     margin: margin(0.5);
 
-    @media (min-width: $max-width) {
+    @include desktop() {
       width: 100%;
       margin: 0 0 margin(0.5);
     }
@@ -275,7 +290,7 @@
       width: 100%;
       margin: auto 0 0;
 
-      @media (min-width: $max-width) {
+      @include desktop() {
         margin-top: 0;
       }
     }

package/src/routes/components/{Playlink.svelte → Playlinks/Playlink.svelte}

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Disclaimer from './Ads/Disclaimer.svelte'
+  import Disclaimer from '../Ads/Disclaimer.svelte'
   import { hasConsentedTo } from '$lib/consent'
   import { removeImageUrlPrefix } from '$lib/image'
   import { t } from '$lib/localization'
@@ -119,7 +119,7 @@
         opacity: 0.35;
         pointer-events: none;
 
-        @media (prefers-reduced-motion: no-preference) {
+        @include motion() {
           animation: sheen 4000ms ease-in-out infinite;
         }
       }

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

@@ -1,30 +1,43 @@
 <script lang="ts">
+  import { participants } from '$lib/fakeData'
   import { openModal } from '$lib/modal'
   import type { ParticipantData } from '$lib/types/participant'
   import Rail from './Rail.svelte'
 
-  interface Props {
-    participants: ParticipantData[]
-  }
+  async function fetchParticipants(): Promise<ParticipantData[]> {
+    // This is just a fake loading state for now
+    await new Promise(res => setTimeout(res, 500))
 
-  const { participants }: Props = $props()
+    return participants
+  }
 </script>
 
-<Rail heading="Cast">
-  {#each participants.slice(0, 15) as participant}
-    <button class="participant" onclick={event => openModal({ event, type: 'participant', data: participant })}>
-      <span class="truncate">{participant.name}</span>
+{#await fetchParticipants()}
+  <Rail heading="Cast">
+    {#each { length: 5 }}
+      <div class="participant"></div>
+    {/each}
+  </Rail>
+{:then participants}
+  {#if participants?.length}
+    <Rail heading="Cast">
+      {#each participants.slice(0, 15) as participant}
+        <button class="participant" data-testid="participant" onclick={event => openModal({ event, type: 'participant', data: participant })}>
+          <span class="truncate">{participant.name}</span>
 
-      <div class="character truncate">{participant.character}</div>
-    </button>
-  {/each}
-</Rail>
+          <div class="character truncate">{participant.character}</div>
+        </button>
+      {/each}
+    </Rail>
+  {/if}
+{/await}
 
 <style lang="scss">
   .participant {
     display: block;
     flex: 0 0 10rem;
     width: 10rem;
+    min-height: margin(3.375); // Matches 54 pixels, the height of a card with both name and character
     padding: margin(0.5);
     border: 0;
     border-radius: var(--playpilot-cast-border-radius, var(--playpilot-playlink-border-radius, margin(0.5)));
@@ -36,8 +49,8 @@
     font-size: var(--playpilot-cast-font-size, var(--playpilot-playlinks-font-size, margin(0.75)));
     white-space: nowrap;
 
-    &:hover,
-    &:active {
+    &:is(button):hover,
+    &:is(button):active {
       filter: var(--playpilot-cast-hover-filter, var(--playpilot-playlink-hover-filter, brightness(1.1)));
       text-decoration: none !important;
     }

package/src/routes/components/Title.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import Genres from './Genres.svelte'
-  import Playlinks from './Playlinks.svelte'
+  import Playlinks from './Playlinks/Playlinks.svelte'
   import Description from './Description.svelte'
   import IconIMDb from './Icons/IconIMDb.svelte'
   import ParticipantsRail from './Rails/ParticipantsRail.svelte'
@@ -58,8 +58,8 @@
 
     <!-- Temporarily not available on production as there is not yet an API endpoint for either -->
     {#if process.env.NODE_ENV !== 'production'}
-      {#if true || title.participants?.length}
-        <ParticipantsRail participants={participants} />
+      {#if true}
+        <ParticipantsRail />
       {/if}
 
       <SimilarRail />

package/src/routes/elements/+page.svelte

@@ -5,11 +5,11 @@
   import Disclaimer from '../components/Ads/Disclaimer.svelte'
   import Display from '../components/Ads/Display.svelte'
   import TopScroll from '../components/Ads/TopScroll.svelte'
-  import AfterArticlePlaylinks from '../components/AfterArticlePlaylinks.svelte'
+  import AfterArticlePlaylinks from '../components/Playlinks/AfterArticlePlaylinks.svelte'
   import Description from '../components/Description.svelte'
   import Genres from '../components/Genres.svelte'
-  import Playlink from '../components/Playlink.svelte'
-  import Playlinks from '../components/Playlinks.svelte'
+  import Playlink from '../components/Playlinks/Playlink.svelte'
+  import Playlinks from '../components/Playlinks/Playlinks.svelte'
   import Popover from '../components/Popover.svelte'
   import RoundButton from '../components/RoundButton.svelte'
   import SkeletonText from '../components/SkeletonText.svelte'

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

@@ -1,9 +1,16 @@
-import { beforeEach, describe, expect, it } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
 import { fakeFetch } from '../../helpers'
-import { api } from '$lib/api/api'
+import { api, clearCache } from '$lib/api/api'
+import { isEditorialModeEnabled } from '$lib/api/auth'
+
+vi.mock('$lib/api/auth', () => ({
+  isEditorialModeEnabled: vi.fn(() => false),
+}))
 
 describe('$lib/api/api', () => {
   beforeEach(() => {
+    clearCache()
     fakeFetch()
   })
 
@@ -51,5 +58,37 @@ describe('$lib/api/api', () => {
         await expect(async () => await api('/some-path')).rejects.toThrow()
       })
     })
+
+    describe('cache', () => {
+      it('Should fetch only once if multiple requests are made for the same path', async () => {
+        await api('/some-path')
+        await api('/some-path')
+
+        expect(global.fetch).toHaveBeenCalledTimes(1)
+      })
+
+      it('Should fetch multiple times if multiple requests are made for different paths', async () => {
+        await api('/some-path')
+        await api('/some-other-path')
+
+        expect(global.fetch).toHaveBeenCalledTimes(2)
+      })
+
+      it('Should not cache POST requests', async () => {
+        await api('/some-path', { method: 'POST' })
+        await api('/some-path', { method: 'POST' })
+
+        expect(global.fetch).toHaveBeenCalledTimes(2)
+      })
+
+      it('Should not cache when in editorial mode', async () => {
+        vi.mocked(isEditorialModeEnabled).mockReturnValueOnce(true)
+
+        await api('/some-path')
+        await api('/some-path')
+
+        expect(global.fetch).toHaveBeenCalledTimes(2)
+      })
+    })
   })
 })

package/src/tests/routes/+page.test.js

@@ -344,7 +344,46 @@ describe('$routes/+page.svelte', () => {
 
     await waitFor(() => expect(injectLinksInDocument).toHaveBeenCalled())
 
-    expect(track).toHaveBeenCalledOnce()
+    expect(track).not.toHaveBeenCalledWith(TrackingEvent.ArticleInjected, null, expect.any(Object))
+  })
+
+  it('Should track failed injections event when injections are injected with failures', async () => {
+    const injections = [
+      { ...generateInjection('a', 'b'), failed: true, failed_message: 'sentence was not found' },
+      { ...generateInjection('a', 'b'), failed: true, failed_message: 'already inside of a link' },
+      { ...generateInjection('a', 'b'), failed: true, failed_message: 'already inside of a link' },
+      { ...generateInjection('a', 'b'), failed: true, failed_message: 'broken HTML' },
+      { ...generateInjection('a', 'b'), failed: true, failed_message: 'broken HTML' },
+      { ...generateInjection('a', 'b'), failed: true, failed_message: 'duplicate' },
+      { ...generateInjection('a', 'b'), failed: true, failed_message: 'unknown reasons' },
+    ]
+
+    // @ts-ignore
+    vi.mocked(pollLinkInjections).mockResolvedValueOnce({ manual_injections: injections })
+    vi.mocked(injectLinksInDocument).mockReturnValueOnce(injections)
+
+    render(page)
+
+    await waitFor(() => {
+      expect(track).toHaveBeenCalledWith(TrackingEvent.FailedInjectionsCount, null, {
+        total: injections.length,
+        sentence_not_found: 1,
+        already_linked: 2,
+        broken_html: 2,
+        duplicate: 1,
+        unknown: 1,
+      })
+    })
+  })
+
+  it('Should not track failed injection event when no injections failed', async () => {
+    // @ts-ignore
+    vi.mocked(pollLinkInjections).mockResolvedValueOnce({ ai_injections: [generateInjection('a', 'b')], manual_injections: [{ ...generateInjection('a', 'b'), manual: true }] })
+    vi.mocked(injectLinksInDocument).mockReturnValueOnce([generateInjection('a', 'b'), { ...generateInjection('a', 'b'), manual: true }])
+
+    render(page)
+
+    expect(track).not.toHaveBeenCalledWith(TrackingEvent.FailedInjectionsCount, null, expect.any(Object))
   })
 
   it('Should not initialize if isCrawler is true', async () => {

package/src/tests/routes/components/{AfterArticlePlaylinks.test.js → Playlinks/AfterArticlePlaylinks.test.js}

@@ -1,7 +1,7 @@
 import { fireEvent, render } from '@testing-library/svelte'
 import { describe, expect, it, vi } from 'vitest'
 
-import AfterArticlePlaylinks from '../../../routes/components/AfterArticlePlaylinks.svelte'
+import AfterArticlePlaylinks from '../../../../routes/components/Playlinks/AfterArticlePlaylinks.svelte'
 import { title } from '$lib/fakeData'
 import { track } from '$lib/tracking'
 import { TrackingEvent } from '$lib/enums/TrackingEvent'
@@ -69,7 +69,7 @@ describe('AfterArticlePlaylinks.svelte', () => {
   })
 
   it('Should not render "and" after final playlink when only 1 playlink is present', () => {
-    /** @type {LinkInjection} */
+    /** @type {import('$lib/types/injection').LinkInjection} */
     const injection = { ...linkInjections[0], title_details: { ...linkInjections[0].title_details, providers: [linkInjections[0].title_details.providers[0]] }}
     const { container } = render(AfterArticlePlaylinks, { linkInjections: [injection] })
 
@@ -88,6 +88,7 @@ describe('AfterArticlePlaylinks.svelte', () => {
   })
 
   it('Should render titles without playlinks as empty state', () => {
+    /** @type {import('$lib/types/injection').LinkInjection} */
     const injection = { ...linkInjections[0], title_details: { ...linkInjections[0].title_details, providers: [] }}
     const { getByText } = render(AfterArticlePlaylinks, { linkInjections: [injection] })
 
@@ -95,6 +96,7 @@ describe('AfterArticlePlaylinks.svelte', () => {
   })
 
   it('Should display as modal button if after_article_style is modal_button', () => {
+    /** @type {import('$lib/types/injection').LinkInjection} */
     const injection = { ...linkInjections[0], after_article_style: 'modal_button' }
     const { getByText } = render(AfterArticlePlaylinks, { linkInjections: [injection] })
 
@@ -104,6 +106,7 @@ describe('AfterArticlePlaylinks.svelte', () => {
 
   it('Should fire given onclickmodal function when display as modal_button', async () => {
     const onclickmodal = vi.fn()
+    /** @type {import('$lib/types/injection').LinkInjection} */
     const injection = { ...linkInjections[0], after_article_style: 'modal_button' }
     const { getByText } = render(AfterArticlePlaylinks, { linkInjections: [injection], onclickmodal })
 

package/src/tests/routes/components/{Playlink.test.js → Playlinks/Playlink.test.js}

@@ -1,7 +1,7 @@
 import { fireEvent, render } from '@testing-library/svelte'
 import { describe, expect, it, vi } from 'vitest'
 
-import Playlink from '../../../routes/components/Playlink.svelte'
+import Playlink from '../../../../routes/components/Playlinks/Playlink.svelte'
 import { hasConsentedTo } from '$lib/consent'
 
 vi.mock('$lib/tracking', () => ({

package/src/tests/routes/components/{PlaylinkIcon.test.js → Playlinks/PlaylinkIcon.test.js}

@@ -1,7 +1,7 @@
 import { fireEvent, render } from '@testing-library/svelte'
 import { describe, expect, it, vi } from 'vitest'
 
-import PlaylinkIcon from '../../../routes/components/PlaylinkIcon.svelte'
+import PlaylinkIcon from '../../../../routes/components/Playlinks/PlaylinkIcon.svelte'
 
 describe('PlaylinkIcon.svelte', () => {
   const playlink = { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } }

package/src/tests/routes/components/{PlaylinkLabel.test.js → Playlinks/PlaylinkLabel.test.js}

@@ -1,7 +1,7 @@
 import { fireEvent, render } from '@testing-library/svelte'
 import { describe, expect, it, vi } from 'vitest'
 
-import PlaylinkLabel from '../../../routes/components/PlaylinkLabel.svelte'
+import PlaylinkLabel from '../../../../routes/components/Playlinks/PlaylinkLabel.svelte'
 
 describe('PlaylinkLabel.svelte', () => {
   const playlink = { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } }

package/src/tests/routes/components/{Playlinks.test.js → Playlinks/Playlinks.test.js}

@@ -1,7 +1,7 @@
 import { fireEvent, render } from '@testing-library/svelte'
 import { describe, expect, it, vi } from 'vitest'
 
-import Playlinks from '../../../routes/components/Playlinks.svelte'
+import Playlinks from '../../../../routes/components/Playlinks/Playlinks.svelte'
 import { title } from '$lib/fakeData'
 import { track } from '$lib/tracking'
 import { TrackingEvent } from '$lib/enums/TrackingEvent'