@playpilot/tpi 8.36.0-beta.1 → 8.36.1

package/package.json

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

package/src/lib/data/translations.ts

@@ -256,6 +256,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 +276,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',

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/routes/components/Explore/Filter/FilterSorting.svelte

@@ -20,6 +20,7 @@
     { 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 +42,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 +52,6 @@
 </Dropdown>
 
 <style lang="scss">
-  .content {
-    width: margin(7);
-  }
-
   .option {
     appearance: none;
     padding: margin(0.75) margin(1);
@@ -65,6 +62,7 @@
     font-family: inherit;
     font-size: inherit;
     color: theme(text-color-alt);
+    white-space: nowrap;
     cursor: pointer;
 
     &:hover,

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

@@ -27,6 +27,7 @@
   const sortings: ExploreTitleSorting[] = [
     { label: 'Popularity', value: Sorting.Popular },
     { label: 'Top Rated', value: Sorting.Best },
+    { label: 'IMDb Rating', value: Sorting.IMDb },
     { label: 'Year', value: Sorting.Chronological },
   ]
 

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { fetchParticipantsForTitle } from '$lib/api/participants'
+  import { fetchParticipantBySid, fetchParticipantsForTitle } from '$lib/api/participants'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { getLinkInjectionElements, getLinkInjectionsParentElement, getPageText } from '$lib/injectionElements'
   import { t } from '$lib/localization'
@@ -42,11 +42,13 @@
     return participantsSortedByCount.map(({ participant }) => participant)
   }
 
-  function onclick(event: MouseEvent, participant: ParticipantData): void {
+  async function onclick(event: MouseEvent, participant: ParticipantData): Promise<void> {
     track(TrackingEvent.ParticipantClick, null, { title_source: title.original_title || title.title, participant: participant.name })
 
     if (!window.PlayPilotLinkInjections?.config?.open_tpi_links_in_explore || window.location.href.includes(window.PlayPilotLinkInjections.config.explore_navigation_path || '')) {
-      openModal({ event, type: 'participant', data: participant })
+      const fetchedParticipant = await fetchParticipantBySid(participant.sid)
+
+      openModal({ event, type: 'participant', data: fetchedParticipant })
       return
     }