@playpilot/tpi 8.35.0-beta.2 → 8.35.2

package/package.json

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

package/src/lib/data/translations.ts

@@ -151,16 +151,6 @@ export const translations = {
     [Language.Swedish]: 'Visa mindre',
     [Language.Danish]: 'Vis mindre',
   },
-  'Read More': {
-    [Language.English]: 'Read more',
-    [Language.Swedish]: 'Läs mer',
-    [Language.Danish]: 'Læs mere',
-  },
-  'Read Less': {
-    [Language.English]: 'Read less',
-    [Language.Swedish]: 'Läs mindre',
-    [Language.Danish]: 'Læs mindre',
-  },
   'Cast': {
     [Language.English]: 'Cast',
     [Language.Swedish]: 'Rollista',
@@ -256,6 +246,11 @@ export const translations = {
     [Language.Swedish]: 'Toppbetyg',
     [Language.Danish]: 'Højst vurderet',
   },
+  'IMDb Rating': {
+    [Language.English]: 'IMDb Rating',
+    [Language.Swedish]: 'IMDb-betyg',
+    [Language.Danish]: 'IMDb-vurdering',
+  },
   '-popularity': {
     [Language.English]: 'Popularity',
     [Language.Swedish]: 'Popularitet',
@@ -271,6 +266,11 @@ export const translations = {
     [Language.Swedish]: 'Toppbetyg',
     [Language.Danish]: 'Højst vurderet',
   },
+  '-imdb_score': {
+    [Language.English]: 'IMDb Rating',
+    [Language.Swedish]: 'IMDb-betyg',
+    [Language.Danish]: 'IMDb-vurdering',
+  },
   'Search': {
     [Language.English]: 'Search',
     [Language.Swedish]: 'Sök',
@@ -368,36 +368,6 @@ export const translations = {
     [Language.Swedish]: 'Utforska alla filmer och tv-serier',
     [Language.Danish]: 'Udforsk alle film og tv-serier',
   },
-  'Job: all': {
-    [Language.English]: 'All',
-    [Language.Swedish]: 'Alla',
-    [Language.Danish]: 'Alle',
-  },
-  'Job: actor': {
-    [Language.English]: 'Actor',
-    [Language.Swedish]: 'Skådespelare',
-    [Language.Danish]: 'Skuespiller',
-  },
-  'Job: producer': {
-    [Language.English]: 'Producer',
-    [Language.Swedish]: 'Producent',
-    [Language.Danish]: 'Producer',
-  },
-  'Job: executive-producer': {
-    [Language.English]: 'Executive Producer',
-    [Language.Swedish]: 'Verkställande producent',
-    [Language.Danish]: 'Administrerende producer',
-  },
-  'Job: writer': {
-    [Language.English]: 'Writer',
-    [Language.Swedish]: 'Manusförfattare',
-    [Language.Danish]: 'Manuskriptforfatter',
-  },
-  'Job: director': {
-    [Language.English]: 'Director',
-    [Language.Swedish]: 'Regissör',
-    [Language.Danish]: 'Instruktør',
-  },
 
   // Genres
   'All': {

package/src/lib/enums/Sorting.ts

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

package/src/lib/fakeData.ts

@@ -54,7 +54,6 @@ export const participants: ParticipantData[] = [
     image_uuid: null,
     gender: 'Male',
     character: 'Will Rodman (archive footage) (uncredited)',
-    description: 'Some description',
   },
   {
     sid: 'pr8bZm',
@@ -66,7 +65,6 @@ export const participants: ParticipantData[] = [
     image_uuid: null,
     gender: 'Male',
     character: 'Old Man',
-    description: 'Some description',
   },
   {
     sid: 'pr45Dp',
@@ -78,7 +76,6 @@ export const participants: ParticipantData[] = [
     image_uuid: null,
     gender: 'Male',
     character: 'Self (archive footage) (uncredited)',
-    description: 'Some description',
   },
   {
     sid: 'pr6DnN',
@@ -90,7 +87,6 @@ export const participants: ParticipantData[] = [
     image_uuid: null,
     gender: 'Male',
     character: 'Dreyfus',
-    description: 'Some description',
   },
   {
     sid: 'pr7GK8',
@@ -102,7 +98,6 @@ export const participants: ParticipantData[] = [
     image_uuid: null,
     gender: 'Male',
     character: 'Cannon-Gunner',
-    description: 'Some description',
   },
   {
     sid: 'pr88KG',
@@ -114,7 +109,6 @@ export const participants: ParticipantData[] = [
     image_uuid: null,
     gender: 'Female',
     character: 'Cornelia',
-    description: 'Some description',
   },
 ]
 

package/src/lib/types/filter.d.ts

@@ -1,7 +1,4 @@
-import type { Sorting } from '$lib/enums/Sorting'
-
 export type ExploreFilterType = 'array' | 'range' | 'string'
-export type ExploreFilterItem = { type: ExploreFilterType; value: unknown }
+export type ExploreFilterItem = { type: ExploreFilterType, value: unknown }
 export type ExploreFilter = Record<string, ExploreFilterItem>
-export type ExploreFilterItemArrayValue = { label: string; value: string }
-export type ExploreTitleSorting = { label: string; value: (typeof Sorting)[keyof typeof Sorting] }
+export type ExploreFilterItemArrayValue = { label: string, value: string }

package/src/lib/types/participant.d.ts

@@ -1,7 +1,6 @@
 export type ParticipantData = {
   sid: string
   name: string
-  description: string
   birth_date: string
   death_date: string | null
   jobs: Job[]
@@ -17,6 +16,7 @@ export type ParticipantData = {
   }
   gender: string
   character?: string | null
+  bio?: string | null
 }
 
 export type Job = 'actor' | 'writer' | 'director'

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ExploreFilter, ExploreTitleSorting } from '$lib/types/filter'
+  import type { ExploreFilter } from '$lib/types/filter'
   import genres from '$lib/data/genres.json'
   import { fetchProviders } from '$lib/api/providers'
   import { t } from '$lib/localization'
@@ -16,9 +16,7 @@
   interface Props {
     filter: ExploreFilter
     limit?: boolean
-    hideActive?: boolean
     showSorting?: boolean
-    sortings?: null | ExploreTitleSorting[]
     searchQuery?: string
     onchange?: () => void
     onempty?: () => void
@@ -27,9 +25,7 @@
   const {
     filter,
     limit = true,
-    hideActive = false,
     showSorting = true,
-    sortings = null,
     searchQuery = '',
     onchange = () => null,
     onempty = () => null,
@@ -69,7 +65,7 @@
     data: [{ label: t('Movies'), value: 'movie' }, { label: t('Shows'), value: 'series' }, { label: t('Kids'), value: 'kids' }, { label: t('Documentary'), value: 'documentary' }],
   }]
 
-  let limited = $derived(limit)
+  let limited = $state(limit)
   let wasPreviouslyActive = false
 
   $effect(() => {
@@ -108,15 +104,13 @@
 
     {#if showSorting}
       <div class="sorting" transition:fly={{ x: 5, duration: 100 }}>
-        <FilterSorting {filter} {onchange} {sortings} />
+        <FilterSorting {filter} {onchange} />
       </div>
     {/if}
   </div>
 </div>
 
-{#if !hideActive}
-  <ActiveFilterItems {filter} {items} />
-{/if}
+<ActiveFilterItems {filter} {items} />
 
 <style lang="scss">
   .filter {

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Button from '../../Button.svelte'
   import IconArrow from '../../Icons/IconArrow.svelte'
-  import type { ExploreFilter, ExploreTitleSorting } from '$lib/types/filter'
+  import type { ExploreFilter } from '$lib/types/filter'
   import { t } from '$lib/localization'
   import Dropdown from './Dropdown.svelte'
   import { Sorting } from '$lib/enums/Sorting'
@@ -9,18 +9,18 @@
   interface Props {
     filter: ExploreFilter
     onchange?: () => void
-    sortings?: null | ExploreTitleSorting[]
   }
 
-  const { filter, onchange = () => null, sortings = null }: Props = $props()
+  const { filter, onchange = () => null }: Props = $props()
 
   const param = 'ordering'
 
-  const options = $derived(sortings || [
+  const options = [
     { label: 'Popularity', value: Sorting.Popular },
     { label: 'New', value: Sorting.New },
     { label: 'Top Rated', value: Sorting.Best },
-  ])
+    { label: 'IMDb Rating', value: Sorting.IMDb },
+  ]
 
   const label = $derived(options.find(({ value }) => value === filter[param]?.value)?.label || 'Sort By')
 
@@ -41,7 +41,7 @@
   {/snippet}
 
   {#snippet content()}
-    <div class="content" data-testid="content">
+    <div data-testid="content">
       {#each options as { label, value }}
         {@const active = value === filter[param]?.value}
         <button class="option" class:active onclick={() => setFilter(value)}>{t(label)}</button>
@@ -51,10 +51,6 @@
 </Dropdown>
 
 <style lang="scss">
-  .content {
-    width: margin(7);
-  }
-
   .option {
     appearance: none;
     padding: margin(0.75) margin(1);
@@ -65,6 +61,7 @@
     font-family: inherit;
     font-size: inherit;
     color: theme(text-color-alt);
+    white-space: nowrap;
     cursor: pointer;
 
     &:hover,

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

@@ -21,11 +21,9 @@
     searchQuery?: string,
     filter?: ExploreFilter
     forceGrid?: boolean
-    hidePlaylinks?: boolean
-    onTitleClick?: null | ((event: MouseEvent, titles: TitleData[], index: number) => void)
   }
 
-  const { searchQuery = '', filter = {}, forceGrid = false, hidePlaylinks = false, onTitleClick = null }: Props = $props()
+  const { searchQuery = '', filter = {}, forceGrid = false }: Props = $props()
 
   // svelte-ignore non_reactive_update
   let page = 1
@@ -55,7 +53,9 @@
     if (filter) setFilter()
   })
 
-  onDestroy(emptyFilter)
+  onDestroy(() => {
+    emptyFilter()
+  })
 
   async function getTitlesForFilter(): Promise<APIPaginatedResult<TitleData>> {
     latestRequestId += 1
@@ -132,12 +132,7 @@
     track(TrackingEvent.ExploreShowMore, null, { page })
   }
 
-  function openTitle(event: MouseEvent, title: TitleData, index: number): void {
-    if (onTitleClick) {
-      onTitleClick(event, titles, index)
-      return
-    }
-
+  function openTitle(event: MouseEvent, title: TitleData): void {
     openModal({ event, data: title })
     track(TrackingEvent.ExploreTitleClick, title)
   }
@@ -152,9 +147,9 @@
 </script>
 
 <div class="titles" class:grid role="main" style:--grid-columns={gridColumns} bind:clientWidth={width} data-testid="explore-results">
-  {#each titles as title, index}
+  {#each titles as title}
     {#key title.sid}
-      <TitleComponent {title} {hidePlaylinks} onclick={(event: MouseEvent) => openTitle(event, title, index)} />
+      <TitleComponent {title} onclick={(event: MouseEvent) => openTitle(event, title)} />
     {/key}
   {/each}
 

package/src/routes/components/GridTitle.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { TitleData } from '$lib/types/title'
-  import { getContext } from 'svelte'
   import IconIMDb from './Icons/IconIMDb.svelte'
   import PlaylinksCompact from './Playlinks/PlaylinksCompact.svelte'
   import TitlePoster from './TitlePoster.svelte'
@@ -8,10 +7,9 @@
   interface Props {
     title: TitleData
     onclick?: (event: MouseEvent) => void
-    hidePlaylinks?: boolean
   }
 
-  const { title, onclick = () => null, hidePlaylinks = false }: Props = $props()
+  const { title, onclick = () => null }: Props = $props()
 </script>
 
 <button class="title" {onclick} data-testid="title">
@@ -35,11 +33,9 @@
   </div>
 
   <div class="content">
-    <div class="heading" class:margin={!hidePlaylinks}>{title.title}</div>
+    <div class="heading">{title.title}</div>
 
-    {#if !hidePlaylinks}
-      <PlaylinksCompact playlinks={title.providers} size={20} />
-    {/if}
+    <PlaylinksCompact playlinks={title.providers} size={20} />
   </div>
 </button>
 
@@ -85,6 +81,7 @@
   }
 
   .heading {
+    margin-bottom: margin(0.5);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -99,10 +96,6 @@
       color: theme(grid-item-title-hover-text-color, text-color);
       text-decoration: theme(grid-item-title-hover-text-decoration, none);
     }
-
-    &.margin {
-      margin-bottom: margin(0.5);
-    }
   }
 
   .meta {

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/Modals/Modal.svelte

@@ -227,7 +227,7 @@
     max-width: 600px;
 
     .wide & {
-      max-width: 1200px;
+      max-width: 900px;
     }
   }
 

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

@@ -14,6 +14,8 @@
 
   const { participant, initialScrollPosition = 0, ...restProps }: Props = $props()
 
+  let windowWidth = $state(0)
+
   track(TrackingEvent.ParticipantModalView, null, { participant: participant.name })
 
   onMount(() => {
@@ -23,6 +25,8 @@
   })
 </script>
 
-<Modal {initialScrollPosition} {...restProps} closeButtonStyle="flat" tall wide blur>
+<svelte:window bind:innerWidth={windowWidth} />
+
+<Modal {initialScrollPosition} {...restProps} closeButtonStyle="flat" tall>
   <Participant {participant} />
 </Modal>