@playpilot/tpi 8.31.0 → 8.33.0

package/package.json

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

package/src/lib/api/participants.ts

@@ -1,3 +1,4 @@
+import { Sorting } from '$lib/enums/Sorting'
 import { getLanguage } from '$lib/language'
 import { getApiToken } from '$lib/token'
 import type { ParticipantData } from '$lib/types/participant'
@@ -6,8 +7,8 @@ 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 params = {
+export async function fetchTitlesForParticipant(participant: ParticipantData, { page = 1, sorting = null }: { page?: number, sorting?: (typeof Sorting)[keyof typeof Sorting] | null } = {}): Promise<TitleData[]> {
+  const params: Record<string, any> = {
     language: getLanguage(),
     region: await getRegionBasedOnIp(),
     include_count: false,
@@ -15,6 +16,8 @@ export async function fetchTitlesForParticipant(participant: ParticipantData, {
     page,
   }
 
+  if (sorting) params.ordering = sorting
+
   const response = await api<{ results: TitleData[] }>(`/titles/browse?api-token=${getApiToken()}&${paramsToString(params)}`)
 
   return response.results

package/src/lib/enums/Sorting.ts

@@ -2,4 +2,5 @@ export const Sorting = Object.freeze({
   Popular: '-popularity',
   New: '-new',
   Best: '-best',
+  Chronological: '-year',
 })

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

@@ -0,0 +1,3 @@
+<svg width="32px" height="32px" viewBox="0 -960 960 960">
+  <path fill="currentColor" d="M120-120v-200h80v120h120v80H120Zm520 0v-80h120v-120h80v200H640ZM120-640v-200h200v80H200v120h-80Zm640 0v-120H640v-80h200v200h-80Z" />
+</svg>

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

@@ -5,28 +5,40 @@
   import { openModal } from '$lib/modal'
   import type { ParticipantData } from '$lib/types/participant'
   import type { TitleData } from '$lib/types/title'
+  import { Sorting } from '$lib/enums/Sorting'
   import { t } from '$lib/localization'
   import { isRetargetingAllowed } from '$lib/retargeting'
   import { trackViaPixel } from '@playpilot/retargeting-tracking'
   import { MetaEvent } from '$lib/enums/TrackingEvent'
   import ParticipantImage from './ParticipantImage.svelte'
   import ListTitle from '../ListTitle.svelte'
+  import Dropdown from '../Explore/Filter/Dropdown.svelte'
+  import Button from '../Button.svelte'
 
   interface Props {
     participant: ParticipantData
     small?: boolean
   }
 
+  type TitleSorting = { label: string; value: (typeof Sorting)[keyof typeof Sorting] }
+
   const { participant, small = false }: Props = $props()
 
   const { name, birth_date, death_date } = $derived(participant)
 
+  const sortings: TitleSorting[] = [
+    { label: 'Popularity', value: Sorting.Popular },
+    { label: 'Top Rated', value: Sorting.Best },
+    { label: 'Year', value: Sorting.Chronological },
+  ]
+
   const pageSize = 30
 
   let titles: TitleData[] = $state([])
   let page = $state(1)
   let hasMorePages = $state(true)
   let loading = $state(true)
+  let currentSorting = $state(sortings[0])
 
   onMount(loadMore)
 
@@ -41,7 +53,7 @@
     loading = true
 
     try {
-      const results = await fetchTitlesForParticipant(participant, { page })
+      const results = await fetchTitlesForParticipant(participant, { page, sorting: currentSorting.value })
 
       titles = [...titles, ...results]
       hasMorePages = results?.length >= pageSize
@@ -52,6 +64,14 @@
       page += 1
     }
   }
+
+  function setSorting(sorting: TitleSorting): void {
+    currentSorting = sorting
+    titles = []
+    page = 1
+
+    loadMore()
+  }
 </script>
 
 <div class="header" class:small>
@@ -69,8 +89,28 @@
 </div>
 
 <div class="content">
-  {#if !small}
-    <div class="heading subheading" use:heading={3} id="credits">{t('Credits')}</div>
+  {#if !small && (titles.length && !loading)}
+    <div class="list-header">
+      <div class="heading subheading" use:heading={3} id="credits">{t('Credits')}</div>
+
+      <div class="sort">
+        {t('Sort By')}:
+
+        <Dropdown>
+          {#snippet button({ toggle })}
+            <Button variant="border" onclick={toggle}>{t(currentSorting.label)}</Button>
+          {/snippet}
+
+          {#snippet content()}
+            <div class="sortings">
+              {#each sortings as sorting}
+                <Button variant="link" onclick={() => setSorting(sorting)}>{t(sorting.label)}</Button>
+              {/each}
+            </div>
+          {/snippet}
+        </Dropdown>
+      </div>
+    </div>
   {/if}
 
   <div class="list">
@@ -121,7 +161,7 @@
     font-style: theme(detail-title-font-style, normal);
 
     &.subheading {
-      margin: 0 0 margin(0.5);
+      margin: 0;
       font-size: theme(detail-title-small-font-size, margin(1.25));
     }
 
@@ -155,6 +195,13 @@
     gap: margin(0.5);
   }
 
+  .list-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: margin(0.5);
+  }
+
   .skeleton {
     min-height: margin(7.25);
     border-radius: theme(playlink-border-radius, border-radius);
@@ -176,4 +223,26 @@
       filter: brightness(1.2);
     }
   }
+
+  .sort {
+    display: flex;
+    align-items: center;
+    gap: margin(0.25);
+    color: theme(text-color-alt);
+  }
+
+  .sortings {
+    :global(.button) {
+      display: block;
+      width: 100%;
+      padding: margin(0.5) margin(1);
+      text-align: left;
+      white-space: nowrap;
+    }
+
+    :global(.button:hover) {
+      background: theme(content-light);
+      border-radius: 0;
+    }
+  }
 </style>

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

@@ -188,7 +188,7 @@
                   <div class="video-overlay" title="" {onclick}></div>
 
                   {#if !!title.embeddable_url}
-                    <YouTubeEmbed bind:this={embed} embeddable_url={title.embeddable_url!} muted loop captions showMuteControls />
+                    <YouTubeEmbed bind:this={embed} embeddable_url={title.embeddable_url!} muted loop captions showActions />
                   {:else}
                     <img class="video-fallback" src={title.medium_poster} alt="" />
                   {/if}

package/src/routes/components/YouTubeEmbed.svelte

@@ -2,6 +2,7 @@
   import { getVideoId } from '$lib/trailer'
   import { onMount } from 'svelte'
   import IconMute from './Icons/IconMute.svelte'
+  import IconFullscreen from './Icons/IconFullscreen.svelte'
 
   interface Props {
     embeddable_url: string
@@ -10,17 +11,18 @@
     loop?: boolean
     captions?: boolean
     autoplay?: boolean
-    showMuteControls?: boolean
+    showActions?: boolean
     fallbackStartTime?: number
   }
 
-  let { embeddable_url = '', controls = [], muted = false, loop = false, captions = false, autoplay = true, showMuteControls = false, fallbackStartTime = 0 }: Props = $props()
+  let { embeddable_url = '', controls = [], muted = false, loop = false, captions = false, autoplay = true, showActions = false, fallbackStartTime = 0 }: Props = $props()
 
   const videoId = $derived(getVideoId(embeddable_url))
   const startTime = $derived((window?.PlayPilotLinkInjections?.video_playtimes?.[videoId || ''] || (fallbackStartTime + 1)) - 1)
   const color = window?.getComputedStyle(document.body).getPropertyValue('--playpilot-primary')?.replace('#', '') || 'fa548a'
 
   let element: HTMLElement | null = $state(null)
+  let fullscreen: boolean = $state(false)
   let player: any
 
   onMount(() => {
@@ -45,11 +47,12 @@
     element.style.setProperty('--plyr-color-main', '#' + color)
 
     player = new window.Plyr(element, {
-      controls,
+      controls: controls.length === 0 ? ['play', 'mute', 'fullscreen', 'progress', 'current-time'] : controls,
       playsinline: true,
       autoplay,
       muted,
       clickToPlay: false,
+      storage: { enabled: false },
       youtube: {
         noCookie: true,
         cc_load_policy: captions ? 1 : 0,
@@ -62,6 +65,16 @@
       toggleMute(muted)
     })
 
+    player.on('enterfullscreen', () => {
+      fullscreen = true
+      toggleMute(false)
+    })
+
+    player.on('exitfullscreen', () => {
+      fullscreen = false
+      toggleMute(true)
+    })
+
     if (!loop) return
 
     player.on('statechange', (event: { detail: { code: number } }) => {
@@ -75,10 +88,9 @@
   }
 
   export function toggleMute(state = !muted): void {
-    player.muted = state
-    player.volume = muted ? 0 : 1
-
     muted = state
+    player.muted = state
+    player.volume = state ? 0 : 1
   }
 
   export function play(event: CustomEvent): void {
@@ -100,13 +112,19 @@
 </svelte:head>
 
 {#if videoId}
-  <div bind:this={element} class="player" data-plyr-provider="youtube" data-plyr-embed-id data-testid={embeddable_url}></div>
-
-  {#if showMuteControls}
-    <button class="mute" onclick={() => toggleMute()} aria-label="Mute">
-      <IconMute {muted} />
-    </button>
-  {/if}
+  <div class:fullscreen class:hide-controls={controls.length === 0 && !fullscreen}>
+    <div bind:this={element} class="player" data-plyr-provider="youtube" data-plyr-embed-id data-testid={embeddable_url}></div>
+
+    {#if showActions}
+      <button class="action" onclick={() => toggleMute()} aria-label="Mute">
+        <IconMute {muted} />
+      </button>
+
+      <button class="action secondary" onclick={() => player.fullscreen.enter()} aria-label="Fullscreen">
+        <IconFullscreen />
+      </button>
+    {/if}
+  </div>
 {:else}
   Something went wrong
 {/if}
@@ -123,7 +141,20 @@
     height: 100%;
   }
 
-  .mute {
+  .fullscreen :global(iframe) {
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    transform: none;
+  }
+
+  .hide-controls :global(.plyr__controls) {
+    display: none;
+    opacity: 0;
+  }
+
+  .action {
     z-index: 10;
     display: flex;
     align-items: center;
@@ -148,5 +179,9 @@
     &:active {
       transform: scale(0.95);
     }
+
+    &.secondary {
+      top: calc(margin(3) + var(--mute-top, 0px));
+    }
   }
 </style>

package/src/routes/components/YouTubeEmbedBackground.svelte

@@ -15,7 +15,7 @@
 </script>
 
 <div class="video-background" style="--height: {height}px; --width: {clientWidth}px;" bind:clientWidth bind:clientHeight data-testid="video-background">
-  <YouTubeEmbed {embeddable_url} {autoplay} fallbackStartTime={5} muted loop showMuteControls />
+  <YouTubeEmbed {embeddable_url} {autoplay} fallbackStartTime={5} muted loop showActions />
 </div>
 
 <style lang="scss">

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

@@ -23,6 +23,7 @@
   import ParticipantsRail from '../components/Rails/ParticipantsRail.svelte'
   import InfiniteTitlesRail from '../components/Rails/InfiniteTitlesRail.svelte'
   import YouTubeEmbed from '../components/YouTubeEmbed.svelte'
+  import Participant from '../components/Participants/Participant.svelte'
 
   if (browser) {
     // @ts-ignore
@@ -47,7 +48,7 @@
 <h2>Youtube Embed</h2>
 
 <div class="video">
-  <YouTubeEmbed embeddable_url="https://www.youtube.com/watch?v=bBMajXwi6Cs" controls={['progress', 'play']} loop showMuteControls muted />
+  <YouTubeEmbed embeddable_url="https://www.youtube.com/watch?v=bBMajXwi6Cs" controls={['progress', 'play']} loop showActions muted />
 </div>
 
 <h2>Title</h2>
@@ -137,6 +138,11 @@
 <h2>Participants</h2>
 
 <div class="group">
+  <div>
+    <h3>Participant.svelte</h3>
+    <div class="item"><Participant participant={participants[0]} /></div>
+  </div>
+
   <div>
     <h3>Participants.svelte</h3>
     <div class="item"><ParticipantsRail {title} /></div>

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

@@ -5,6 +5,7 @@ import { fetchTitlesForParticipant } from '$lib/api/participants'
 import { participants, title } from '$lib/fakeData'
 import { getApiToken } from '$lib/token'
 import { fakeFetch } from '../../helpers'
+import { Sorting } from '$lib/enums/Sorting'
 
 vi.mock('$lib/token', () => ({
   getApiToken: vi.fn(),
@@ -57,5 +58,21 @@ describe('$lib/api/participants', () => {
 
       expect(api).toHaveBeenCalledWith(`/titles/browse?api-token=some-token&language=en-US&region=nl&include_count=false&participant_sid=${participants[0].sid}&page=1`)
     })
+
+    it('Should use given sorting', async () => {
+      vi.mocked(api).mockResolvedValueOnce({ results: [title] })
+
+      await fetchTitlesForParticipant(participants[0], { page: 5, sorting: Sorting.New })
+
+      expect(api).toHaveBeenCalledWith(expect.stringContaining(`ordering=${Sorting.New}`))
+    })
+
+    it('Should not add ordering when not sorting is given', async () => {
+      vi.mocked(api).mockResolvedValueOnce({ results: [title] })
+
+      await fetchTitlesForParticipant(participants[0], { page: 5 })
+
+      expect(api).toHaveBeenCalledWith(expect.not.stringContaining('ordering'))
+    })
   })
 })

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

@@ -4,6 +4,7 @@ import { describe, expect, it, vi, beforeEach } from 'vitest'
 import Participant from '../../../../routes/components/Participants/Participant.svelte'
 import { participants, title } from '$lib/fakeData'
 import { fetchTitlesForParticipant } from '$lib/api/participants'
+import { Sorting } from '$lib/enums/Sorting'
 
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
@@ -21,7 +22,7 @@ describe('Participant.svelte', () => {
   it('Should call fetchTitlesForParticipant on mount', () => {
     render(Participant, { participant: participants[0] })
 
-    expect(fetchTitlesForParticipant).toHaveBeenCalledWith(participants[0], { page: 1 })
+    expect(fetchTitlesForParticipant).toHaveBeenCalledWith(participants[0], { page: 1, sorting: Sorting.Popular })
   })
 
   it('Should render fetched titles after showing skeletons', async () => {
@@ -71,7 +72,7 @@ describe('Participant.svelte', () => {
 
     await fireEvent.click(getByText('Show more'))
 
-    expect(fetchTitlesForParticipant).toHaveBeenCalledWith(participants[0], { page: 2 })
+    expect(fetchTitlesForParticipant).toHaveBeenCalledWith(participants[0], { page: 2, sorting: Sorting.Popular })
   })
 
   it('Should render as small variant when given', () => {

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

@@ -54,7 +54,7 @@ describe('YouTubeEmbed.svelte', () => {
     expect(Plyr).toHaveBeenCalledWith(
       playerElement,
       expect.objectContaining({
-        controls: [],
+        controls: ['play', 'mute', 'fullscreen', 'progress', 'current-time'],
         autoplay: true,
         muted: false,
         clickToPlay: false,
@@ -145,4 +145,11 @@ describe('YouTubeEmbed.svelte', () => {
     expect(container.querySelector('.player')).not.toBeTruthy()
     expect(getByText('Something went wrong')).toBeTruthy()
   })
+
+  it('Should render actions when showActions is true', () => {
+    const { getByLabelText } = render(YouTubeEmbed, { embeddable_url: 'youtube.com/watch?v=abc', showActions: true })
+
+    expect(getByLabelText('Mute')).toBeTruthy()
+    expect(getByLabelText('Fullscreen')).toBeTruthy()
+  })
 })