@playpilot/tpi 8.35.0-beta.2 → 8.36.0-beta.1

package/package.json

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

package/src/lib/api/providers.ts

@@ -15,7 +15,9 @@ export async function fetchProviders(): Promise<PlaylinkData[]> {
     include_count: false,
   }
 
-  const response = await api<PlaylinkData[]>(`/providers/?api-token=${apiToken}&` + paramsToString(params))
+  let response = await api<PlaylinkData[]>(`/providers/?api-token=${apiToken}&` + paramsToString(params))
+
+  response = response.filter((a, i, providers) => providers.findIndex(b => (b.slug === a.slug)) === i)
 
   return response
 }

package/src/main.ts

@@ -83,17 +83,38 @@ window.PlayPilotLinkInjections ||= {
   },
 
   mount(): void {
+    const scriptId = 'playpilot-mount'
+    const styleId =  'playpilot-mount-style'
+
+    const ondoubleload = (event: Event): void => {
+      if (!event.target) return
+
+      (event.target as HTMLElement).dataset.loaded = 'true'
+
+      if (document.getElementById(scriptId)?.dataset.loaded !== 'true' || document.getElementById(styleId)?.dataset.loaded !== 'true') return
+
+      window.PlayPilotMount?.mount()
+    }
+
     const shouldLoadEditorial = isEditorialModeEnabled() || getAuthToken()
 
     const script = document.createElement('script')
-
-    script.id = 'playpilot-mount'
+    script.id = scriptId
     script.src = `${cdnBaseUrl}/dist/${shouldLoadEditorial ? 'editorial.' : ''}mount.js`
     // script.src = './dist/mount.js' // Use me during development of this script
+    script.defer = true
+    script.onload = ondoubleload
 
-    script.onload = () => window.PlayPilotMount?.mount()
+    const style = document.createElement('link')
+    style.id = styleId
+    style.rel = 'stylesheet'
+    style.type = 'text/css'
+    style.href = `${cdnBaseUrl}/dist/mount.css`
+    // style.href = './dist/mount.css' // Use me during development of this script
+    style.onload = ondoubleload
 
     document.body.appendChild(script)
+    document.head.appendChild(style)
   },
 }
 

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

@@ -101,7 +101,7 @@
     {#if limit}
       <Button variant="link" onclick={() => limited = !limited}>
         <IconFilter />
-        {t('All Filters')}
+        {limited ? t('Show More') : t('Show Less')}
         <IconArrow direction={limited ? 'down' : 'up'} />
       </Button>
     {/if}

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

@@ -170,7 +170,7 @@
 {#await promise then { next }}
   {#if next}
     <div class="show-more" class:grid>
-      <Button size="large" onclick={fetchMoreTitles}>{t('Show More')}</Button>
+      <Button size="large" onclick={fetchMoreTitles} label="Show more movies & shows">{t('Show More')}</Button>
     </div>
   {/if}
 

package/src/routes/components/Icons/IconAttribution.svelte

@@ -1,3 +1,3 @@
-<svg height="24px" viewBox="0 -960 960 960" width="24px">
+<svg width="21px" height="21px" viewBox="0 -960 960 960">
   <path fill="currentColor" d="M430-200h100v-180h60v-184q0-27-28.5-41.5T480-620q-53 0-81.5 14.5T370-564v184h60v180Zm-105 88.5q-73-31.5-127.5-86t-86-127.5Q80-398 80-480.5t31.5-155q31.5-72.5 86-127t127.5-86Q398-880 480.5-880t155 31.5q72.5 31.5 127 86t86 127Q880-563 880-480.5T848.5-325q-31.5 73-86 127.5t-127 86Q563-80 480.5-80T325-111.5Zm381.5-142Q800-347 800-480t-93.5-226.5Q613-800 480-800t-226.5 93.5Q160-613 160-480t93.5 226.5Q347-160 480-160t226.5-93.5ZM523-657q17-17 17-43t-17-43q-17-17-43-17t-43 17q-17 17-17 43t17 43q17 17 43 17t43-17Zm-43 177Z"/>
 </svg>

package/src/routes/components/Icons/IconFilter.svelte

@@ -1,5 +1,3 @@
-<svg width="11" height="13" viewBox="0 0 11 13">
-  <path d="M9.77037 6.86774C9.68778 7.21645 9.48992 7.52709 9.20883 7.74937C8.92774 7.97166 8.57987 8.09259 8.22151 8.09259C7.86315 8.09259 7.51528 7.97166 7.23419 7.74937C6.9531 7.52709 6.75525 7.21645 6.67265 6.86774L0.385491 6.86774C0.335766 6.87014 0.286069 6.86243 0.239415 6.84505C0.192761 6.82768 0.150121 6.80101 0.114079 6.76667C0.0780373 6.73233 0.0493441 6.69103 0.0297394 6.64527C0.0101337 6.5995 2.67029e-05 6.55024 2.67029e-05 6.50045C2.67029e-05 6.45067 0.0101337 6.40141 0.0297394 6.35565C0.0493441 6.30989 0.0780373 6.26858 0.114079 6.23424C0.150121 6.1999 0.192761 6.17323 0.239415 6.15586C0.286069 6.13849 0.335766 6.13077 0.385491 6.13317L6.67265 6.13317C6.75525 5.78446 6.9531 5.47382 7.23419 5.25154C7.51528 5.02925 7.86315 4.90833 8.22151 4.90833C8.57987 4.90833 8.92774 5.02925 9.20883 5.25154C9.48992 5.47382 9.68778 5.78446 9.77037 6.13317H10.1801C10.2298 6.13077 10.2795 6.13849 10.3262 6.15586C10.3728 6.17323 10.4155 6.1999 10.4515 6.23424C10.4875 6.26858 10.5162 6.30989 10.5358 6.35565C10.5554 6.40141 10.5656 6.45067 10.5656 6.50045C10.5656 6.55024 10.5554 6.5995 10.5358 6.64527C10.5162 6.69103 10.4875 6.73233 10.4515 6.76667C10.4155 6.80101 10.3728 6.82768 10.3262 6.84505C10.2795 6.86243 10.2298 6.87014 10.1801 6.86774H9.77037ZM8.22151 5.64374C8.05198 5.64374 7.88626 5.69401 7.74531 5.7882C7.60435 5.88238 7.49449 6.01625 7.42961 6.17287C7.36474 6.32949 7.34776 6.50183 7.38084 6.6681C7.41391 6.83437 7.49554 6.9871 7.61542 7.10698C7.73529 7.22685 7.88802 7.30849 8.05429 7.34156C8.22056 7.37463 8.3929 7.35766 8.54953 7.29278C8.70615 7.22791 8.84002 7.11805 8.9342 6.97709C9.02839 6.83613 9.07866 6.67041 9.07866 6.50089C9.07877 6.38825 9.05668 6.2767 9.01366 6.17261C8.97063 6.06851 8.90751 5.97392 8.82791 5.89424C8.7483 5.81455 8.65377 5.75134 8.54973 5.70821C8.44568 5.66508 8.33415 5.64288 8.22151 5.64288V5.64374Z" fill="currentColor"/>
-  <path d="M3.8929 2.45945C3.8103 2.80816 3.61245 3.11879 3.33136 3.34108C3.05027 3.56336 2.7024 3.68429 2.34404 3.68429C1.98568 3.68429 1.63781 3.56336 1.35672 3.34108C1.07563 3.11879 0.87778 2.80816 0.795181 2.45945H0.385466C0.291124 2.45489 0.202153 2.4142 0.136997 2.34582C0.0718422 2.27744 0.0354977 2.18661 0.0354977 2.09216C0.0354977 1.99771 0.0718422 1.90688 0.136997 1.8385C0.202153 1.77012 0.291124 1.72943 0.385466 1.72488H0.795181C0.87778 1.37617 1.07563 1.06553 1.35672 0.843245C1.63781 0.620959 1.98568 0.500031 2.34404 0.500031C2.7024 0.500031 3.05027 0.620959 3.33136 0.843245C3.61245 1.06553 3.8103 1.37617 3.8929 1.72488L10.1801 1.72488C10.2744 1.72943 10.3634 1.77012 10.4285 1.8385C10.4937 1.90688 10.53 1.99771 10.53 2.09216C10.53 2.18661 10.4937 2.27744 10.4285 2.34582C10.3634 2.4142 10.2744 2.45489 10.1801 2.45945L3.8929 2.45945ZM2.34404 1.23544C2.17451 1.23544 2.00879 1.28572 1.86784 1.3799C1.72688 1.47408 1.61702 1.60795 1.55214 1.76458C1.48727 1.9212 1.47029 2.09354 1.50337 2.25981C1.53644 2.42608 1.61807 2.57881 1.73795 2.69868C1.85782 2.81856 2.01055 2.90019 2.17682 2.93327C2.34309 2.96634 2.51543 2.94936 2.67206 2.88449C2.82868 2.81961 2.96255 2.70975 3.05673 2.56879C3.15092 2.42784 3.20119 2.26212 3.20119 2.09259C3.2013 1.97996 3.17921 1.8684 3.13619 1.76431C3.09316 1.66022 3.03004 1.56563 2.95044 1.48594C2.87083 1.40626 2.77631 1.34304 2.67226 1.29992C2.56821 1.25679 2.45668 1.23459 2.34404 1.23459V1.23544Z" fill="currentColor"/>
-  <path d="M6.0975 11.2752C6.01491 11.6239 5.81705 11.9345 5.53596 12.1568C5.25488 12.3791 4.907 12.5 4.54864 12.5C4.19028 12.5 3.84241 12.3791 3.56132 12.1568C3.28024 11.9345 3.08238 11.6239 2.99978 11.2752H0.385491C0.335766 11.2776 0.286069 11.2699 0.239415 11.2525C0.192761 11.2351 0.150121 11.2085 0.114079 11.1741C0.0780373 11.1398 0.0493441 11.0985 0.0297394 11.0527C0.0101337 11.0069 2.67029e-05 10.9577 2.67029e-05 10.9079C2.67029e-05 10.8581 0.0101337 10.8088 0.0297394 10.7631C0.0493441 10.7173 0.0780373 10.676 0.114079 10.6417C0.150121 10.6073 0.192761 10.5807 0.239415 10.5633C0.286069 10.5459 0.335766 10.5382 0.385491 10.5406H2.99978C3.08238 10.1919 3.28024 9.88126 3.56132 9.65898C3.84241 9.43669 4.19028 9.31577 4.54864 9.31577C4.907 9.31577 5.25488 9.43669 5.53596 9.65898C5.81705 9.88126 6.01491 10.1919 6.0975 10.5406H10.1801C10.2298 10.5382 10.2795 10.5459 10.3262 10.5633C10.3728 10.5807 10.4155 10.6073 10.4515 10.6417C10.4875 10.676 10.5162 10.7173 10.5358 10.7631C10.5554 10.8088 10.5656 10.8581 10.5656 10.9079C10.5656 10.9577 10.5554 11.0069 10.5358 11.0527C10.5162 11.0985 10.4875 11.1398 10.4515 11.1741C10.4155 11.2085 10.3728 11.2351 10.3262 11.2525C10.2795 11.2699 10.2298 11.2776 10.1801 11.2752H6.0975ZM4.54779 10.0503C4.37826 10.0503 4.21254 10.1006 4.07158 10.1948C3.93063 10.289 3.82077 10.4228 3.75589 10.5795C3.69101 10.7361 3.67404 10.9084 3.70711 11.0747C3.74018 11.241 3.82182 11.3937 3.94169 11.5136C4.06157 11.6334 4.2143 11.7151 4.38057 11.7481C4.54684 11.7812 4.71918 11.7642 4.8758 11.6994C5.03242 11.6345 5.16629 11.5246 5.26048 11.3837C5.35466 11.2427 5.40493 11.077 5.40493 10.9075C5.40493 10.6801 5.31463 10.4621 5.15388 10.3014C4.99313 10.1406 4.77512 10.0503 4.54779 10.0503Z" fill="currentColor"/>
+<svg height="24px" viewBox="0 -960 960 960" width="24px">
+  <path fill="currentColor" transform="scale(1.2) translate(0, 75)" scale="1.2" d="M440-120v-240h80v80h320v80H520v80h-80Zm-320-80v-80h240v80H120Zm160-160v-80H120v-80h160v-80h80v240h-80Zm160-80v-80h400v80H440Zm160-160v-240h80v80h160v80H680v80h-80Zm-480-80v-80h400v80H120Z" />
 </svg>

package/src/routes/components/Participants/Participant.svelte

@@ -30,6 +30,7 @@
     { label: 'Year', value: Sorting.Chronological },
   ]
 
+  let clientWidth = $state(0)
   let currentJob: 'all' | Job = $state('all')
   let descriptionExpanded: boolean = $state(false)
 
@@ -66,7 +67,7 @@
   </div>
 </div>
 
-<div class="content" class:small>
+<div class="content" class:small bind:clientWidth>
   {#if !small}
     <div class="list-header">
       <div class="heading subheading" use:heading={3} id="credits">{t('Credits')}</div>
@@ -80,7 +81,7 @@
       {/each}
     </div>
 
-    <Filter {filter} {sortings} hideActive />
+    <Filter {filter} {sortings} limit={clientWidth < 700} hideActive />
   {/if}
 
   <ExploreResults forceGrid hidePlaylinks filter={filterWithParticipant} {onTitleClick} />

package/src/routes/components/Participants/ParticipantImage.svelte

@@ -98,7 +98,8 @@
     margin: 0;
     border: 0;
     background: transparent;
-    color: rgba(255, 255, 255, 0.75);
+    color: rgba(255, 255, 255, 0.65);
+    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
 
     &:hover {
       color: white;

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

@@ -3,6 +3,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { api } from '$lib/api/api'
 import { fetchProviders } from '$lib/api/providers'
 import { getApiToken } from '$lib/token'
+import { title } from '$lib/fakeData'
 
 vi.mock('$lib/token', () => ({
   getApiToken: vi.fn(),
@@ -33,5 +34,13 @@ describe('$lib/api/ads', () => {
 
       await expect(async () => await fetchProviders()).rejects.toThrow()
     })
+
+    it('Should remove duplicates', async () => {
+      vi.mocked(api).mockResolvedValueOnce([title.providers[0], title.providers[0]])
+
+      const response = await fetchProviders()
+
+      expect(response).toEqual([title.providers[0]])
+    })
   })
 })

package/src/tests/main.test.js

@@ -113,10 +113,11 @@ describe('main.ts', () => {
   })
 
   describe('mount', () => {
-    it('Should insert script tag', () => {
+    it('Should insert both script and style tags', () => {
       window.PlayPilotLinkInjections.mount()
 
       expect(document.querySelector('script#playpilot-mount')).toBeTruthy()
+      expect(document.querySelector('link#playpilot-mount-style')).toBeTruthy()
     })
 
     it('Should insert script tag with editorial mode if editiorial mode is enabled', () => {

package/src/tests/routes/components/Explore/Filter/Filter.test.js

@@ -25,8 +25,9 @@ describe('Filter.svelte', () => {
   it('Should not limit the number of filter items shown after pressing expand button', async () => {
     const { getByText, getAllByTestId } = render(Filter, { filter: {} })
 
-    await fireEvent.click(getByText('All filters'))
+    await fireEvent.click(getByText('Show more'))
 
+    expect(getByText('Show less')).toBeTruthy()
     expect(getAllByTestId('filter-item')).toHaveLength(7)
   })
 

package/src/tests/routes/components/Participants/Participant.test.js

@@ -40,27 +40,27 @@ describe('Participant.svelte', () => {
   })
 
   it('Should not show load more button while loading and when fewer than page size of titles are fetched', async () => {
-    vi.mocked(fetchTitles).mockResolvedValueOnce({ results: [title, title], next: 'next', previous: 'previous' })
+    vi.mocked(fetchTitles).mockResolvedValueOnce({ results: [title, title], next: null, previous: 'previous' })
 
-    const { queryByText, getAllByTestId } = render(Participant, { participant: participants[0] })
+    const { queryByLabelText, getAllByTestId } = render(Participant, { participant: participants[0] })
 
-    expect(queryByText('Show More')).not.toBeTruthy()
+    expect(queryByLabelText('Show more movies & shows')).not.toBeTruthy()
 
     await waitFor(() => {
       expect(getAllByTestId('title')).toHaveLength(2)
     })
 
-    expect(queryByText('Show More')).not.toBeTruthy()
+    expect(queryByLabelText('Show more movies & shows')).not.toBeTruthy()
   })
 
   it('Should show load more button after loading and if more than page size of titles are fetched', async () => {
     const resolved = ({ results: Array(30).fill(title), next: 'next', previous: 'previous' })
     vi.mocked(fetchTitles).mockResolvedValueOnce(resolved)
 
-    const { getByText } = render(Participant, { participant: participants[0] })
+    const { getByLabelText } = render(Participant, { participant: participants[0] })
 
     await waitFor(() => {
-      expect(getByText('Show more')).toBeTruthy()
+      expect(getByLabelText('Show more movies & shows')).toBeTruthy()
     })
   })
 
@@ -68,11 +68,11 @@ describe('Participant.svelte', () => {
     const resolved = ({ results: Array(30).fill(title), next: 'next', previous: 'previous' })
     vi.mocked(fetchTitles).mockResolvedValueOnce(resolved)
 
-    const { getByText } = render(Participant, { participant: participants[0] })
+    const { getByLabelText } = render(Participant, { participant: participants[0] })
 
-    await waitFor(() => getByText('Show more'))
+    await waitFor(() => getByLabelText('Show more movies & shows'))
 
-    await fireEvent.click(getByText('Show more'))
+    await fireEvent.click(getByLabelText('Show more movies & shows'))
 
     expect(fetchTitles).toHaveBeenCalledWith({ page: 2, page_size: expect.any(Number), participant_job: null, participant_sid: participants[0].sid })
   })

package/vite._mount.config.js

@@ -2,7 +2,6 @@ import path from 'path'
 import * as dotenv from 'dotenv'
 import { defineConfig } from 'vitest/config'
 import { svelte } from '@sveltejs/vite-plugin-svelte'
-import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
 import packageJson from './package.json'
 
 dotenv.config({ path: '.env' })
@@ -13,7 +12,6 @@ export default defineConfig(({ mode }) => {
   return {
     plugins: [
       svelte(),
-      cssInjectedByJsPlugin(),
       injectEnvVariables,
     ],
 
@@ -22,9 +20,9 @@ export default defineConfig(({ mode }) => {
       rollupOptions: {
         input: './src/mount.ts',
         output: {
-          format: 'iife',
           name: 'PlayPilotMount',
           entryFileNames: isEditiorial ? 'editorial.mount.js' : 'mount.js',
+          assetFileNames: (assetInfo) => assetInfo.name,
         },
       },
     },