@playpilot/tpi 8.35.0-beta.2 → 8.35.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.35.0-beta.2",
+	"version": "8.35.1",
 	"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',
@@ -368,36 +358,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/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,17 @@
   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 },
-  ])
+  ]
 
   const label = $derived(options.find(({ value }) => value === filter[param]?.value)?.label || 'Sort By')
 

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/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>