@playpilot/tpi 7.0.0 → 7.0.2

package/package.json

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

package/src/lib/api/participants.ts

@@ -1,10 +1,21 @@
+import { getLanguage } from '$lib/language'
 import { getApiToken } from '$lib/token'
 import type { ParticipantData } from '$lib/types/participant'
+import { paramsToString } from '$lib/url'
 import type { TitleData } from '../types/title'
 import { api } from './api'
+import { getRegionBasedOnIp } from './region'
 
 export async function fetchTitlesForParticipant(participant: ParticipantData, { page = 1 }: { page?: number } = {}): Promise<TitleData[]> {
-  const response = await api<{ results: TitleData[] }>(`/titles/browse?api-token=${getApiToken()}&participant_sid=${participant.sid}&page=${page}`)
+  const params = {
+    language: getLanguage(),
+    region: await getRegionBasedOnIp(),
+    include_count: 'false',
+    participant_sid: participant.sid,
+    page,
+  }
+
+  const response = await api<{ results: TitleData[] }>(`/titles/browse?api-token=${getApiToken()}&${paramsToString(params)}`)
 
   return response.results
 }

package/src/lib/data/translations.ts

@@ -236,6 +236,21 @@ export const translations = {
     [Language.Swedish]: 'Sök',
     [Language.Danish]: 'Søg',
   },
+  'Born On': {
+    [Language.English]: 'Born on',
+    [Language.Swedish]: 'Född den',
+    [Language.Danish]: 'Født den',
+  },
+  'Died On': {
+    [Language.English]: 'Died on',
+    [Language.Swedish]: 'Död den',
+    [Language.Danish]: 'Død den',
+  },
+  'Credits': {
+    [Language.English]: 'Credits',
+    [Language.Swedish]: 'Medverkande',
+    [Language.Danish]: 'Medvirkende',
+  },
 
   // Genres
   'All': {

package/src/main.ts

@@ -86,12 +86,13 @@ window.PlayPilotLinkInjections = {
 
     const script = document.createElement('script')
 
+    script.id = 'playpilot-mount'
     script.src = `https://cdn.jsdelivr.net/npm/@playpilot/tpi@${__SCRIPT_VERSION__}/dist/${shouldLoadEditorial ? 'editorial.' : ''}mount.js`
     // script.src = './dist/mount.js' // Use me during development of this script
 
     script.onload = () => window.PlayPilotMount?.mount()
 
-    if (process.env.NODE_ENV !== 'test') document.body.insertAdjacentElement('beforeend', script)
+    document.body.appendChild(script)
   },
 }
 

package/src/routes/components/ContextMenu.svelte

@@ -54,7 +54,7 @@
 
     &:hover {
       cursor: pointer;
-      color: white;
+      color: theme(text-color);
     }
   }
 

package/src/routes/components/Debugger.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { SplitTest } from '$lib/enums/SplitTest'
+  import { getPageTextAndElements } from '$lib/injectionElements'
   import { getFullUrlPath } from '$lib/url'
   import { onDestroy } from 'svelte'
 
@@ -160,6 +161,11 @@
 
     <hr />
 
+    <button onclick={() => console.log(getPageTextAndElements(window.PlayPilotLinkInjections.config))}>Output elements in console</button>
+    <button onclick={() => console.log(getPageTextAndElements(window.PlayPilotLinkInjections.config).pageText)}>Output text in console</button>
+
+    <hr />
+
     <button onclick={onrerender}>Re-inject</button>
 
     {#if isUsingBetaScript}
@@ -177,6 +183,7 @@
   }
 
   hr {
+    margin: margin(0.5) 0;
     border-color: theme(primary);
   }
 

package/src/routes/components/Editorial/Editor.svelte

@@ -367,9 +367,8 @@
     }
 
     &[disabled] {
-      opacity: 0.75;
+      opacity: 0.65;
       background: theme(lighter);
-      color: theme(content-light);
     }
   }
 

package/src/routes/components/Editorial/EditorItem.svelte

@@ -310,6 +310,7 @@
 
     &:hover {
       filter: brightness(1.2);
+      outline: 1px solid currentColor;
     }
   }
 

package/src/routes/components/ListTitle.svelte

@@ -4,6 +4,7 @@
   import IconArrow from './Icons/IconArrow.svelte'
   import IconIMDb from './Icons/IconIMDb.svelte'
   import TitlePoster from './TitlePoster.svelte'
+  import { t } from '$lib/localization'
 
   interface Props {
     title: TitleData
@@ -30,7 +31,7 @@
       </div>
 
       <div>{title.year}</div>
-      <div>{title.type}</div>
+      <div>{t(`Type: ${title.type}`)}</div>
 
       {#if title.length}
         <div>{title.length} min</div>

package/src/routes/components/Participant.svelte

@@ -57,13 +57,13 @@
 
   {#if birth_date}
     <p class="dates">
-      Born on <strong>{formatDate(birth_date)}</strong>{#if death_date}, died on <strong>{formatDate(death_date)}</strong>{/if}
+      {t('Born On')} <strong>{formatDate(birth_date)}</strong>{#if death_date}, {t('Died On')} <strong>{formatDate(death_date)}</strong>{/if}
     </p>
   {/if}
 </div>
 
 <div class="content">
-  <div class="heading small" use:heading={3} id="credits">Credits</div>
+  <div class="heading small" use:heading={3} id="credits">{t('Credits')}</div>
 
   <div class="list">
     {#each titles as title}

package/src/routes/components/RoundButton.svelte

@@ -35,6 +35,7 @@
     &:hover {
       filter: brightness(1.2);
       transform: scale(1.05);
+      outline: 1px solid theme(button-hover-border-color, text-color-alt);
     }
   }
 </style>

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

@@ -0,0 +1,61 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+import { api } from '$lib/api/api'
+import { fetchTitlesForParticipant } from '$lib/api/participants'
+import { participants, title } from '$lib/fakeData'
+import { getApiToken } from '$lib/token'
+import { fakeFetch } from '../../helpers'
+
+vi.mock('$lib/token', () => ({
+  getApiToken: vi.fn(),
+}))
+
+vi.mock('$lib/api/api', () => ({
+  api: vi.fn(),
+}))
+
+describe('$lib/api/participants', () => {
+  beforeEach(() => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = {}
+
+    vi.resetAllMocks()
+    vi.mocked(getApiToken).mockReturnValue('some-token')
+    fakeFetch()
+  })
+
+  describe('fetchTitlesForParticipant', () => {
+    it('Should call api with given parameters and always include include_count=false and return titles', async () => {
+      vi.mocked(api).mockResolvedValueOnce({ results: [title] })
+
+      const response = await fetchTitlesForParticipant(participants[0])
+
+      expect(api).toHaveBeenCalledWith(`/titles/browse?api-token=some-token&language=en-US&include_count=false&participant_sid=${participants[0].sid}&page=1`)
+      expect(response).toEqual([title])
+    })
+
+    it('Should use given page number', async () => {
+      vi.mocked(api).mockResolvedValueOnce({ results: [title] })
+
+      await fetchTitlesForParticipant(participants[0], { page: 5 })
+
+      expect(api).toHaveBeenCalledWith(expect.stringContaining('page=5'))
+    })
+
+    it('Should throw when api returns error', async () => {
+      vi.mocked(api).mockRejectedValueOnce({ error: 'message' })
+
+      await expect(async () => await fetchTitlesForParticipant(participants[0])).rejects.toThrow()
+    })
+
+    it('Should include region if set', async () => {
+      vi.mocked(api).mockResolvedValueOnce({ results: [] })
+
+      window.PlayPilotLinkInjections.region = 'nl'
+
+      await fetchTitlesForParticipant(participants[0])
+
+      expect(api).toHaveBeenCalledWith(`/titles/browse?api-token=some-token&language=en-US&region=nl&include_count=false&participant_sid=${participants[0].sid}&page=1`)
+    })
+  })
+})

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

@@ -4,6 +4,7 @@ import { api } from '$lib/api/api'
 import { fetchSimilarTitles, fetchTitles } from '$lib/api/titles'
 import { title } from '$lib/fakeData'
 import { getApiToken } from '$lib/token'
+import { fakeFetch } from '../../helpers'
 
 vi.mock('$lib/token', () => ({
   getApiToken: vi.fn(),
@@ -13,10 +14,11 @@ vi.mock('$lib/api/api', () => ({
   api: vi.fn(),
 }))
 
-describe('$lib/api/ads', () => {
+describe('$lib/api/titles', () => {
   beforeEach(() => {
     vi.resetAllMocks()
     vi.mocked(getApiToken).mockReturnValue('some-token')
+    fakeFetch()
   })
 
   describe('fetchTitles', () => {

package/src/tests/main.test.js

@@ -5,6 +5,7 @@ import { fetchConfig } from '$lib/api/config'
 import { waitFor } from '@testing-library/svelte'
 import { isUrlExcludedViaConfig } from '$lib/url'
 import { pollLinkInjections } from '$lib/api/externalPages'
+import { getAuthToken, isEditorialModeEnabled } from '$lib/api/auth'
 
 vi.mock('$lib/consent', () => ({
   setConsent: vi.fn(),
@@ -23,8 +24,15 @@ vi.mock('$lib/url', () => ({
   isUrlExcludedViaConfig: vi.fn(),
 }))
 
+vi.mock('$lib/api/auth', () => ({
+  getAuthToken: vi.fn(),
+  isEditorialModeEnabled: vi.fn(),
+}))
+
 describe('main.ts', () => {
   beforeEach(async () => {
+    document.body.innerHTML = ''
+
     fakeFetch()
 
     vi.resetModules()
@@ -37,65 +45,99 @@ describe('main.ts', () => {
     vi.resetModules()
   })
 
-  it('Should not call setConsent when only a token is passed', () => {
-    window.PlayPilotLinkInjections.initialize({ token: 'a' })
+  describe('initialize', () => {
+    it('Should not call setConsent when only a token is passed', () => {
+      window.PlayPilotLinkInjections.initialize({ token: 'a' })
 
-    expect(setConsent).not.toHaveBeenCalled()
+      expect(setConsent).not.toHaveBeenCalled()
 
-    expect(window.PlayPilotLinkInjections.consents).toEqual({
-      ads: false,
-      pixels: false,
-      tracking: false,
-      split_tests: false,
-      affiliate: false,
+      expect(window.PlayPilotLinkInjections.consents).toEqual({
+        ads: false,
+        pixels: false,
+        tracking: false,
+        split_tests: false,
+        affiliate: false,
+      })
     })
-  })
 
-  it('Should call setConsent when require_consent is false', () => {
-    window.PlayPilotLinkInjections.initialize({ token: 'a', require_consent: false })
+    it('Should call setConsent when require_consent is false', () => {
+      window.PlayPilotLinkInjections.initialize({ token: 'a', require_consent: false })
 
-    expect(setConsent).toHaveBeenCalledWith({
-      ads: true,
-      pixels: true,
-      tracking: true,
-      split_tests: true,
-      affiliate: true,
+      expect(setConsent).toHaveBeenCalledWith({
+        ads: true,
+        pixels: true,
+        tracking: true,
+        split_tests: true,
+        affiliate: true,
+      })
     })
-  })
 
-  it('Should call config object and set the result to the window object', async () => {
-    vi.mocked(fetchConfig).mockResolvedValue({ html_selector: 'some_value' })
+    it('Should call config object and set the result to the window object', async () => {
+      vi.mocked(fetchConfig).mockResolvedValue({ html_selector: 'some_value' })
 
-    window.PlayPilotLinkInjections.initialize({ token: 'a' })
+      window.PlayPilotLinkInjections.initialize({ token: 'a' })
 
-    expect(fetchConfig).toHaveBeenCalled()
+      expect(fetchConfig).toHaveBeenCalled()
 
-    await waitFor(() => {
-      expect(window.PlayPilotLinkInjections.config).toEqual({ html_selector: 'some_value' })
+      await waitFor(() => {
+        expect(window.PlayPilotLinkInjections.config).toEqual({ html_selector: 'some_value' })
+      })
     })
-  })
 
-  it('Should not call pollLinkInjections if config object excludes page', async () => {
-    vi.mocked(isUrlExcludedViaConfig).mockReturnValue(true)
+    it('Should not call pollLinkInjections if config object excludes page', async () => {
+      vi.mocked(isUrlExcludedViaConfig).mockReturnValue(true)
+
+      window.PlayPilotLinkInjections.initialize({ token: 'a' })
+
+      expect(fetchConfig).toHaveBeenCalled()
+
+      await new Promise(res => setTimeout(res))
+
+      expect(pollLinkInjections).not.toHaveBeenCalled()
+    })
+
+    it('Should call pollLinkInjections if config object does not page', async () => {
+      vi.mocked(isUrlExcludedViaConfig).mockReturnValue(false)
 
-    window.PlayPilotLinkInjections.initialize({ token: 'a' })
+      window.PlayPilotLinkInjections.initialize({ token: 'a' })
 
-    expect(fetchConfig).toHaveBeenCalled()
+      expect(fetchConfig).toHaveBeenCalled()
 
-    await new Promise(res => setTimeout(res))
+      await new Promise(res => setTimeout(res))
 
-    expect(pollLinkInjections).not.toHaveBeenCalled()
+      expect(pollLinkInjections).toHaveBeenCalled()
+    })
   })
 
-  it('Should call pollLinkInjections if config object does not page', async () => {
-    vi.mocked(isUrlExcludedViaConfig).mockReturnValue(false)
+  describe('mount', () => {
+    it('Should insert script tag', () => {
+      window.PlayPilotLinkInjections.mount()
+
+      expect(document.querySelector('script#playpilot-mount')).toBeTruthy()
+    })
+
+    it('Should insert script tag with editorial mode if editiorial mode is enabled', () => {
+      vi.mocked(isEditorialModeEnabled).mockReturnValueOnce(true)
 
-    window.PlayPilotLinkInjections.initialize({ token: 'a' })
+      window.PlayPilotLinkInjections.mount()
+      expect(/** @type {HTMLScriptElement} */(document.querySelector('script#playpilot-mount')).src).toContain('editorial.mount.js')
+    })
 
-    expect(fetchConfig).toHaveBeenCalled()
+    it('Should insert script tag with editorial mode if editiorial mode is disabled but auth token is present', () => {
+      vi.mocked(isEditorialModeEnabled).mockReturnValueOnce(false)
+      vi.mocked(getAuthToken).mockReturnValueOnce('abc')
 
-    await new Promise(res => setTimeout(res))
+      window.PlayPilotLinkInjections.mount()
+      expect(/** @type {HTMLScriptElement} */(document.querySelector('script#playpilot-mount')).src).toContain('editorial.mount.js')
+    })
 
-    expect(pollLinkInjections).toHaveBeenCalled()
+    it('Should insert script tag without editorial mode if editiorial mode is disabled but auth token is present', () => {
+      vi.mocked(isEditorialModeEnabled).mockReturnValueOnce(false)
+      vi.mocked(getAuthToken).mockReturnValueOnce('')
+
+      window.PlayPilotLinkInjections.mount()
+      expect(/** @type {HTMLScriptElement} */(document.querySelector('script#playpilot-mount')).src).not.toContain('editorial.mount.js')
+      expect(/** @type {HTMLScriptElement} */(document.querySelector('script#playpilot-mount')).src).toContain('mount.js')
+    })
   })
 })

package/src/tests/mount.test.js

@@ -0,0 +1,63 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fakeFetch } from './helpers'
+import { clearLinkInjections } from '$lib/injection'
+import { mount } from 'svelte'
+
+vi.mock('$lib/injection', () => ({
+  clearLinkInjections: vi.fn(),
+}))
+
+vi.mock('svelte', () => ({
+  mount: vi.fn(),
+}))
+
+describe('mount.ts', () => {
+  beforeEach(async () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = {}
+    document.body.innerHTML = ''
+
+    fakeFetch()
+
+    vi.resetModules()
+    vi.resetAllMocks()
+
+    await import('../mount')
+  })
+
+  describe('mount', () => {
+    it('Should mount app', () => {
+      window.PlayPilotMount.mount()
+
+      expect(mount).toHaveBeenCalledWith(expect.any(Function), { target: expect.any(HTMLElement) })
+    })
+
+    it('Should assign app to window PlayPilotLinkInjections object', () => {
+      vi.mocked(mount).mockReturnValueOnce({ some_key: 'Some value' })
+
+      window.PlayPilotMount.mount()
+
+      expect(window.PlayPilotLinkInjections.app).toEqual({ some_key: 'Some value' })
+    })
+  })
+
+  describe('destroy', () => {
+    it('Should call clearLinkInjections and remove link injections element', () => {
+      document.body.innerHTML = '<div id="playpilot-link-injection"></div>'
+
+      window.PlayPilotMount.destroy()
+
+      expect(document.body.innerHTML).toBe('')
+      expect(clearLinkInjections).toHaveBeenCalled()
+    })
+
+    it('Should clear app on window PlayPilotLinkInjections object', () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = { app: {} }
+
+      window.PlayPilotMount.destroy()
+
+      expect(window.PlayPilotLinkInjections.app).toBe(null)
+    })
+  })
+})