@playpilot/tpi 8.18.0 → 8.19.1-beta.1

package/package.json

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

package/src/lib/constants.ts

@@ -1,6 +1,7 @@
 export const playPilotBaseUrl = 'https://www.playpilot.com'
 export const apiBaseUrl = 'https://partner-api.playpilot.tech/1.0'
 export const imageBaseUrl = 'https://img-external.playpilot.tech'
+export const cdnBaseUrl = `https://cdn.jsdelivr.net/npm/@playpilot/tpi@${__SCRIPT_VERSION__}`
 
 export const imagePlaceholderDataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAAB+CAMAAACNgsajAAAAb1BMVEU1Q2fI1N5YZoNVYoFndI9qd5JBT3FFU3S8yNS3xNC4xNFBTnDG0t2lscJJV3e9ytaptcWToLOOm6/BzdiZprh3hJ1aaIWJlatte5VPXHx7iJ9zgZlfbYk3RWmNmq5jcY1XZIO2wtCjsMB+i6I9S25IprTeAAABqUlEQVRo3u3W2ZKCMBCF4T5ExRmRVXBfZnn/Z5wKiU5pz1AJ7ZXV/x03HxVCB0jTNE3TNE3TNO0l2rbPNxcFdk8334AINTUD5eSaWbPoQs0qw0CVN98BzNNgE4NVv+ZHsJliuNVt7UgotATAafp/5mZiG4waAB0N5k0kUeg0wMykKDfLvRTl5pxyCFFupjQVo9ykiRTlphzl5nNQNu8C9Hv2lylDT0W2NMyUoeXdLC68KUNLuM7O9HskQ0uLLAEUR2aOQjfORE5LzHP2PMehxpl2k6otM8eh2aQGkBlieyRBYbs3y5Rk6IPZn8mT65XJR6LcROGErwaoxqLm4XvkiTVsy1FoYe5n06zcjazp1Wk0umHz3k9BT6+bXjXR6PnRtKpr755PfRjx4WPz7tXW/26gGYnOvOmrM7xtiK4qYtDOrpGZtnR7JFcSi+Z1XZt7k5d4NCZmcrWxqMzkbRgqN+nAULHpx1RiylFvftJwlxjUz2bWdpPB7NnSxZih5RFrD20Vai4izGOgeenPukMSUE6hte5denI7NMyU1xrSNE3TNE3TNE17hX4ADHsS0j0OCOoAAAAASUVORK5CYII='
 export const mobileBreakpoint = 600

package/src/lib/data/translations.ts

@@ -301,6 +301,11 @@ export const translations = {
     [Language.Swedish]: 'Tyvärr stöds inte din region',
     [Language.Danish]: 'Beklager, din region understøttes ikke',
   },
+  'Show Count More': {
+    [Language.English]: 'Show [[count]] more',
+    [Language.Swedish]: 'Visa [[count]] till',
+    [Language.Danish]: 'Vis [[count]] mere',
+  },
 
   // List titles
   'List: Trending': {

package/src/lib/scss/_mixins.scss

@@ -1,3 +1,5 @@
+@use "./_functions.scss" as *;
+
 // Annoyingly, some pages include global styling to add a fill to every svg.
 // We don't want that, but we can't just apply global styling either, as that would affect their page.
 // So this mixins is to be used inside of other containers.
@@ -39,7 +41,7 @@
 }
 
 @mixin styled-scrollbar() {
-  scrollbar-color: var(--playpilot-content-light) transparent;
+  scrollbar-color: theme(content-light) transparent;
   scrollbar-width: thin;
 
   &::-webkit-scrollbar {
@@ -47,20 +49,20 @@
   }
 
   &::-webkit-scrollbar-track {
-    background: var(--playpilot-light);
+    background: theme(light);
   }
 
   &::-webkit-scrollbar-thumb {
-    border: 2px solid var(--playpilot-light);
+    border: 2px solid theme(light);
     border-radius: margin(1);
     background: transparent;
 
     &:hover {
-      background: var(--playpilot-content-light);
+      background: theme(content-light);
     }
 
     &:active {
-      background: var(--playpilot-text-color-alt);
+      background: theme(text-color-alt);
     }
   }
 }

package/src/main.ts

@@ -2,6 +2,7 @@ import { getAuthToken, isEditorialModeEnabled } from '$lib/api/auth'
 import { fetchConfig } from '$lib/api/config'
 import { pollLinkInjections } from '$lib/api/externalPages'
 import { setConsent } from '$lib/consent'
+import { cdnBaseUrl } from '$lib/constants'
 import { isCrawler } from '$lib/crawler'
 import { isUrlExcludedViaConfig } from '$lib/url'
 
@@ -87,7 +88,7 @@ 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 = `${cdnBaseUrl}/dist/${shouldLoadEditorial ? 'editorial.' : ''}mount.js`
     // script.src = './dist/mount.js' // Use me during development of this script
 
     script.onload = () => window.PlayPilotMount?.mount()

package/src/routes/+page.svelte

@@ -15,12 +15,12 @@
   import Editor from './components/Editorial/Editor.svelte'
   import EditorTrigger from './components/Editorial/EditorTrigger.svelte'
   import Alert from './components/Editorial/Alert.svelte'
-  import TrackingPixels from './components/TrackingPixels.svelte'
+  import TrackingPixels from './components/Tracking/TrackingPixels.svelte'
+  import TrackingPixelsForTitleDataPerLink from './components/Tracking/TrackingPixelsForTitleDataPerLink.svelte'
+  import UserJourney from './components/Tracking/UserJourney.svelte'
   import Consent from './components/Consent.svelte'
   import Debugger from './components/Debugger.svelte'
-  import UserJourney from './components/UserJourney.svelte'
   import PostersScrollReveal from './components/PostersScrollReveal.svelte'
-  import TrackingPixelsForTitleDataPerLink from './components/TrackingPixelsForTitleDataPerLink.svelte'
 
   let response: LinkInjectionResponse | null = $state(null)
   let isEditorialMode = $state(isEditorialModeEnabled())

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

@@ -10,8 +10,8 @@
   import { onMount, type Snippet } from 'svelte'
   import Search from './Filter/Search.svelte'
   import Filter from './Filter/Filter.svelte'
-  import TrackAnyClick from '../TrackAnyClick.svelte'
-  import TrackScrollDistance from '../TrackScrollDistance.svelte'
+  import TrackAnyClick from '../Tracking/TrackAnyClick.svelte'
+  import TrackScrollDistance from '../Tracking/TrackScrollDistance.svelte'
 
   interface Props {
     navigate?: (key: string) => void

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

@@ -1,7 +1,6 @@
 <script lang="ts">
   import type { ExploreFilter } from '$lib/types/filter'
   import genres from '$lib/data/genres.json'
-  import countries from '$lib/data/countries.json'
   import { fetchProviders } from '$lib/api/providers'
   import { t } from '$lib/localization'
   import FilterItem from './FilterItem.svelte'
@@ -9,9 +8,10 @@
   import Button from '../../Button.svelte'
   import IconArrow from '../../Icons/IconArrow.svelte'
   import IconFilter from '../../Icons/IconFilter.svelte'
-  import {  fly, scale } from 'svelte/transition'
+  import { fly, scale } from 'svelte/transition'
   import ActiveFilterItems from './ActiveFilterItems.svelte'
   import { isFilterItemActive } from '$lib/filter'
+  import { cdnBaseUrl } from '$lib/constants'
 
   interface Props {
     filter: ExploreFilter
@@ -56,7 +56,9 @@
   }, {
     label: t('Countries'),
     param: 'country_codes',
-    data: countries,
+    fetchData: async () => import.meta.env.DEV ?
+      (await import('$lib/data/countries.json')).default :
+      (await fetch(`${cdnBaseUrl}/src/lib/data/countries.json`)).json(),
   }]
 
   let limited = $state(limit)

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

@@ -13,6 +13,10 @@
   let windowWidth: number = $state(window.innerWidth)
 
   const rails: { heading: string, params: Record<string, any>, properties: Record<string, any> }[] = [{
+    heading: 'List: Upcoming',
+    params: { from_playlist_sid: 'li42wf', region: null, no_region_filter: true },
+    properties: {},
+  }, {
     heading: 'List: Trending',
     params: { ordering: Sorting.Popular },
     properties: { expandable: true },
@@ -20,10 +24,6 @@
     heading: 'List: New',
     params: { from_playlist_sid: 'li42WR', include_playable_types: 'SVOD,FREE' },
     properties: { aside: true, size: 'flexible' },
-  }, {
-    heading: 'List: Upcoming',
-    params: { from_playlist_sid: 'li42wf', region: null, no_region_filter: true },
-    properties: {},
   }, {
     heading: 'List: Cinema',
     params: { from_playlist_sid: 'li42WS', region: null, no_region_filter: true },

package/src/routes/components/Modals/RailModal.svelte

@@ -45,6 +45,7 @@
             <!-- svelte-ignore a11y_click_events_have_key_events -->
             <!-- svelte-ignore a11y_no_static_element_interactions -->
             <div class="item" class:active={index === currentIndex} onclick={() => setSliderIndex(index)}>
+              <span style="color:white">{currentIndex}</span>
               {#if Math.abs(index - currentIndex) === 1 || currentIndex === index}
                 <div class="content" transition:fade={{ duration: initialized ? transitionDuration : 0 }}>
                   {@render each(item, currentIndex)}
@@ -79,7 +80,7 @@
 </Modal>
 
 <style lang="scss">
-  $size: min(600px, 85vw);
+  $size: min(800px, 85vw);
 
   .rail-modal {
     --gap: #{margin(0.25)};
@@ -132,13 +133,17 @@
     border-radius: theme(rail-modal-item-border-radius, border-radius-huge) theme(rail-modal-item-border-radius, border-radius-huge) 0 0;
     background: theme(rail-modal-item-background, light);
     box-shadow: none;
-    height: 90vh;
+    height: calc(90vh - env(safe-area-inset-top));
     overflow: auto;
     overscroll-behavior: contain;
     transition: box-shadow var(--transition-duration);
 
     @include styled-scrollbar;
 
+    @supports (height: 1dvh) {
+      height: calc(90dvh - env(safe-area-inset-top));
+    }
+
     @include desktop {
       height: auto;
       max-height: 90vh;

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import Disclaimer from '../Ads/Disclaimer.svelte'
-  import TrackingPixels from '../TrackingPixels.svelte'
+  import TrackingPixels from '../Tracking/TrackingPixels.svelte'
   import { hasConsentedTo } from '$lib/consent'
   import { removeImageUrlPrefix } from '$lib/image'
   import { t } from '$lib/localization'

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import TrackingPixels from '../TrackingPixels.svelte'
+  import TrackingPixels from '../Tracking/TrackingPixels.svelte'
   import { removeImageUrlPrefix } from '$lib/image'
   import type { PlaylinkData } from '$lib/types/playlink'
 

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

@@ -9,6 +9,7 @@
   import { campaignToPlaylink, getFirstAdOfType } from '$lib/api/ads'
   import { getContext } from 'svelte'
   import Playlink from './Playlink.svelte'
+  import Button from '../Button.svelte'
 
   type Category = PlaylinkCategory | '' | 'Other'
   type CategorizedPlaylinks = Partial<Record<Category, PlaylinkData[]>>
@@ -17,9 +18,10 @@
   interface Props {
     playlinks: PlaylinkData[]
     title: TitleData
+    limit?: number
   }
 
-  const { playlinks, title }: Props = $props()
+  const { playlinks, title, limit = 3 }: Props = $props()
 
   const isModal = getContext('scope') === 'modal'
   const type = getContext('type')
@@ -27,10 +29,11 @@
   const categorize = !!window.PlayPilotLinkInjections?.config?.categorize_playlinks
 
   let outerWidth = $state(0)
+  let limited = $state(!categorize)
 
   const mergedPlaylinks = $derived(mergePlaylinks(playlinks))
   const categorizedPlaylinks = $derived(categorizePlaylinks(playlinks))
-  const shownPlaylinks: SortedPlaylinks = $derived(categorize ? sortCategories(categorizedPlaylinks) : [['' as Category, mergedPlaylinks]])
+  const sortedPlaylinks: SortedPlaylinks = $derived(categorize ? sortCategories(categorizedPlaylinks) : [['' as Category, mergedPlaylinks]])
 
   // Grid turns into a list when the playlinks container is small enough
   // It is also a list by default if a display ad is present, as that would
@@ -87,13 +90,13 @@
   </div>
 {/if}
 
-{#each shownPlaylinks as [category, playlinks]}
+{#each sortedPlaylinks as [category, playlinks]}
   {#if category && playlinks.length}
     <div class="heading category" use:heading={4}>{t(`Category: ${category}`)}</div>
   {/if}
 
   <div class="playlinks" data-testid="category-{category}" class:list bind:clientWidth={outerWidth}>
-    {#each playlinks as playlink, index}
+    {#each playlinks.slice(0, limited ? limit : playlinks.length) as playlink, index}
       <Playlink {playlink} onclick={() => onclick(playlink.name)} />
 
       <!-- A fake highlighted playlink as part of the display ad, to be shown after the first playlink -->
@@ -102,6 +105,14 @@
       {/if}
     {/each}
   </div>
+
+  {#if playlinks.length > limit && limited}
+    <div class="show-more" data-testid="show-more">
+      <Button onclick={() => limited = !limited} size="large">
+        {t('Show Count More').replace('[[count]]', (playlinks.length - limit).toString())}
+      </Button>
+    </div>
+  {/if}
 {/each}
 
 <style lang="scss">
@@ -153,6 +164,10 @@
     }
   }
 
+  .show-more {
+    margin-top: margin(0.5);
+  }
+
   .empty {
     padding: margin(0.75);
     margin-top: margin(0.5);

package/src/tests/routes/components/Playlinks/Playlinks.test.js

@@ -176,4 +176,54 @@ describe('Playlinks.svelte', () => {
     expect(getByText('Streaming services'))
     expect(getByTestId('category-SVOD').querySelectorAll('[data-playlink]')).toHaveLength(1)
   })
+
+  it('Should limit number of shown playlinks and shown all playlinks after click of show more button', async () => {
+    const playlinks = [
+      { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
+      { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
+      { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
+      { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
+    ]
+
+    // @ts-ignore
+    const { getAllByText, getByText, getByTestId } = render(Playlinks, { playlinks, title, limit: 3 })
+
+    expect(getAllByText('Some playlink')).toHaveLength(3)
+    expect(getByTestId('show-more')).toBeTruthy()
+
+    await fireEvent.click(getByText('Show 1 more'))
+
+    expect(getAllByText('Some playlink')).toHaveLength(4)
+  })
+
+  it('Should not render show more button if fewer playlinks than limit are given', () => {
+    const playlinks = [
+      { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
+      { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
+    ]
+
+    // @ts-ignore
+    const { queryByTestId } = render(Playlinks, { playlinks, title, limit: 3 })
+
+    expect(queryByTestId('show-more')).not.toBeTruthy()
+  })
+
+  it('Should not render show more button if playlinks are categorized', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = {
+      config: { categorize_playlinks: true },
+    }
+
+    const playlinks = [
+      { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
+      { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
+      { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
+      { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
+    ]
+
+    // @ts-ignore
+    const { queryByTestId } = render(Playlinks, { playlinks, title, limit: 3 })
+
+    expect(queryByTestId('show-more')).not.toBeTruthy()
+  })
 })

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

@@ -2,7 +2,7 @@ import { render, fireEvent } from '@testing-library/svelte'
 import { describe, expect, it, vi, beforeEach } from 'vitest'
 import { track } from '$lib/tracking'
 import { TrackingEvent } from '$lib/enums/TrackingEvent'
-import ClickTracking from '../../../routes/components/TrackAnyClick.svelte'
+import ClickTracking from '../../../../routes/components/Tracking/TrackAnyClick.svelte'
 
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),

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

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