@playpilot/tpi 8.1.4 → 8.2.0

package/package.json

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

package/src/lib/api/titles.ts

@@ -6,7 +6,7 @@ import type { TitleData } from '../types/title'
 import { api } from './api'
 import { getRegionBasedOnIp } from './region'
 
-export async function fetchTitles(params: Record<string, string | number> = {}): Promise<APIPaginatedResult<TitleData>> {
+export async function fetchTitles(params: Record<string, any> = {}): Promise<APIPaginatedResult<TitleData>> {
   const apiToken = getApiToken()
 
   if (!apiToken) throw new Error('No token was provided')
@@ -14,10 +14,11 @@ export async function fetchTitles(params: Record<string, string | number> = {}):
   params = {
     ...params,
     language: getLanguage(),
-    region: await getRegionBasedOnIp(),
     include_count: 'false',
   }
 
+  if (params.region !== null) params.region = params.region || await getRegionBasedOnIp()
+
   const response = await api<APIPaginatedResult<TitleData>>(`/titles/browse?api-token=${apiToken}&` + paramsToString(params))
 
   return response

package/src/lib/data/translations.ts

@@ -252,6 +252,33 @@ export const translations = {
     [Language.Danish]: 'Medvirkende',
   },
 
+  // List titles
+  'List: Trending': {
+    [Language.English]: 'Trending Movies & Shows',
+    [Language.Swedish]: 'Trendande Titlar',
+    [Language.Danish]: 'Populære film og serier',
+  },
+  'List: Upcoming': {
+    [Language.English]: 'Upcoming Releases',
+    [Language.Swedish]: 'Kommande Premiärer',
+    [Language.Danish]: 'Mest ventede film',
+  },
+  'List: New': {
+    [Language.English]: 'New Releases',
+    [Language.Swedish]: 'Nya Filmer & Serier',
+    [Language.Danish]: 'Nye film og serier',
+  },
+  'List: Demand': {
+    [Language.English]: 'Always in Demand',
+    [Language.Swedish]: 'Tidlösa Favoriter',
+    [Language.Danish]: 'Tidløse favoritter',
+  },
+  'List: Cinema': {
+    [Language.English]: 'Coming to Cinemas',
+    [Language.Swedish]: 'Snart på Bio',
+    [Language.Danish]: 'Kommende film',
+  },
+
   // Genres
   'All': {
     [Language.English]: 'All',

package/src/lib/enums/Sorting.ts

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

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

@@ -4,6 +4,7 @@
   import type { ExploreFilter } from '$lib/types/filter'
   import { t } from '$lib/localization'
   import Dropdown from './Dropdown.svelte'
+  import { Sorting } from '$lib/enums/Sorting'
 
   interface Props {
     filter: ExploreFilter
@@ -15,9 +16,9 @@
   const param = 'ordering'
 
   const options = [
-    { label: 'Popularity', value: '-popularity' },
-    { label: 'New', value: '-new' },
-    { label: 'Top Rated', value: '-best' },
+    { 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/ExploreHome.svelte

@@ -1,30 +1,42 @@
 <script lang="ts">
   import type { TitleData } from '$lib/types/title'
-  import { fetchSimilarTitles } from '$lib/api/titles'
-  import { title } from '$lib/fakeData'
+  import { fetchTitles } from '$lib/api/titles'
   import TitlesRail from '../../Rails/TitlesRail.svelte'
+  import { t } from '$lib/localization'
+  import { Sorting } from '$lib/enums/Sorting'
 
   let expandedTitle: TitleData | null = $state(null)
   let expandedRailKey: string | null = $state(null)
-</script>
-
-<div data-testid="explore-home"></div>
 
-{#await fetchSimilarTitles(title)}
-  Loading...
-{:then titles}
-  {#if titles}
-    <TitlesRail heading="Some titles" {titles} expandable bind:expandedTitle bind:expandedRailKey />
+  const rails: { heading: string, params: Record<string, any>, properties: Record<string, any> }[] = [{
+    heading: t('List: Trending'),
+    params: { ordering: Sorting.Popular },
+    properties: { expandable: true },
+  }, {
+    heading: t('List: Upcoming'),
+    params: { region: null },
+    properties: { expandable: true },
+  }, {
+    heading: t('List: New'),
+    params: { ordering: Sorting.New },
+    properties: { aside: true, size: 'large' },
+  }, {
+    heading: t('List: Demand'),
+    params: { ordering: Sorting.Best },
+    properties: {},
+  }, {
+    heading: t('List: Cinema'),
+    params: { region: null, include_cinema: true },
+    properties: {},
+  }]
 
-    {#if titles[1]}
-      <TitlesRail heading="Some other titles" titles={fetchSimilarTitles(titles[1])} expandable bind:expandedTitle bind:expandedRailKey />
-    {/if}
+  async function getListTitles(params: Record<string, any> = {}): Promise<TitleData[]> {
+    return (await fetchTitles(params))?.results
+  }
+</script>
 
-    {#if titles[5]}
-      <TitlesRail heading="Some more titles" titles={fetchSimilarTitles(titles[5])} expandable bind:expandedTitle bind:expandedRailKey />
-    {/if}
-  {/if}
-{/await}
+<div data-testid="explore-home"></div>
 
-<!-- TODO: Remove me. This is just a placeholder element to make scrolling easier -->
-<div style="height: 1000px"></div>
+{#each rails as { heading, params, properties }}
+  <TitlesRail {heading} titles={getListTitles(params)} {...properties} bind:expandedTitle bind:expandedRailKey />
+{/each}

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

@@ -56,7 +56,7 @@
   }
 
   .rail {
-    --gap: #{margin(0.5)};
+    --gap: var(--rail-gap, #{margin(0.5)});
     position: relative;
     width: calc(100% + margin(2));
     margin: 0 margin(-1);

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

@@ -15,6 +15,8 @@
   interface Props {
     titles: Promise<TitleData[]> | TitleData[]
     heading?: string,
+    size?: 'small' | 'large'
+    aside?: boolean,
     expandable?: boolean,
     expandedTitle?: TitleData | null,
     expandedRailKey?: string | null,
@@ -24,6 +26,8 @@
   let {
     titles,
     heading = '',
+    size = 'small',
+    aside = false,
     expandable = false,
     expandedTitle = $bindable(null),
     expandedRailKey = $bindable(null),
@@ -100,7 +104,7 @@
 
 <svelte:window onscroll={expandWhenFirstInView} />
 
-<div class="titles" bind:this={element} data-role="{expandable ? 'expandable-rail' : null}">
+<div class="titles {size}" class:with-aside={aside} bind:this={element} data-role="{expandable ? 'expandable-rail' : null}">
   {#await titles}
     <Rail {heading}>
       {#each { length: 12 }}
@@ -148,6 +152,14 @@
             <a class="heading" {href} {onclick} data-testid="heading">
               {title.title}
             </a>
+
+            {#if aside}
+              <!-- svelte-ignore a11y_click_events_have_key_events -->
+              <!-- svelte-ignore a11y_no_static_element_interactions -->
+              <div class="aside" {onclick} data-testid="aside">
+                {title.description}
+              </div>
+            {/if}
           </div>
         {/each}
       </Rail>
@@ -156,29 +168,55 @@
 </div>
 
 <style lang="scss">
-  $width: margin(6);
-  $image-height: #{calc($width * 3 / 2)};
-  $expanded-width: #{calc($image-height / 9 * 16)};
-  $border-radius: #{theme(rail-border-radius, border-radius)};
+  .titles {
+    --width: #{margin(6)};
+    --image-height: #{calc(var(--width) * 3 / 2)};
+    --expanded-width: #{calc(var(--image-height) / 9 * 16)};
+    --border-radius: #{theme(rail-border-radius, border-radius)};
+
+    &.with-aside {
+      --rail-gap: #{margin(1)};
+    }
+
+    &.large {
+      --width: #{margin(7.5)};
+    }
+  }
 
   .title {
     width: unset;
+    font-size: theme(rail-font-size, font-size-small);
+    line-height: 1.2;
 
     &:hover,
     &:active {
       filter: brightness(1.1);
     }
+
+    .with-aside & {
+      display: grid;
+      grid-template:
+        "media heading"
+        "media aside";
+      grid-template-rows: 1lh auto;
+      align-items: flex-start;
+      gap: margin(0.25) margin(0.5);
+      width: calc(var(--width) * 2);
+      height: var(--image-height);
+      overflow: hidden;
+    }
   }
 
   .media {
-    width: $width;
-    border-radius: $border-radius;
+    grid-area: media;
+    width: var(--width);
+    border-radius: var(--border-radius);
     transition: width 200ms;
     transition-delay: 1ms;
     overflow: hidden;
 
     .expanded & {
-      width: $expanded-width;
+      width: var(--expanded-width);
       transition-delay: 0ms;
     }
   }
@@ -191,10 +229,10 @@
 
   .video {
     position: relative;
-    height: $image-height;
-    width: $expanded-width;
+    height: var(--image-height);
+    width: var(--expanded-width);
     aspect-ratio: 16/9;
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
     overflow: hidden;
     background: black;
     z-index: 1;
@@ -222,35 +260,52 @@
   .video-fallback {
     position: absolute;
     object-fit: cover;
-    height: $image-height;
-    width: $expanded-width;
+    height: var(--image-height);
+    width: var(--expanded-width);
   }
 
   .poster {
     display: block;
-    height: $image-height;
-    width: $width;
+    height: var(--image-height);
+    width: var(--width);
     aspect-ratio: 2 / 3;
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
     background: theme(detail-background-light, lighter);
     text-decoration: none;
     overflow: hidden;
   }
 
   .heading {
+    grid-area: heading;
     display: -webkit-box;
     padding-top: margin(0.5);
     overflow: hidden;
-    max-width: $width;
+    max-width: var(--width);
     text-decoration: none;
     color: theme(rail-text-color, text-color-alt) !important;
-    font-size: theme(rail-font-size, font-size-small);
     font-style: normal !important;
-    line-height: 1.2;
     line-clamp: 2;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     text-overflow: ellipsis;
+
+    .with-aside & {
+      padding-top: 0;
+      font-weight: theme(rail-aside-heading-font-weight, font-bold);
+      line-clamp: 1;
+      -webkit-line-clamp: 1;
+    }
+  }
+
+  .aside {
+    grid-area: aside;
+    display: -webkit-box;
+    height: 100%;
+    mask-image: linear-gradient(to top, transparent 0.5lh, white 1.5lh);
+    overflow: hidden;
+    color: theme(rail-text-color, text-color-alt) !important;
+    font-size: theme(rail-aside-font-size, 11px);
+    line-height: 1.2;
   }
 
   .skeleton {

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

@@ -129,6 +129,8 @@
 
 {#key renderKey}
   <TitlesRail titles={fetchSimilarTitles(title)} expandable />
+  <br>
+  <TitlesRail titles={fetchSimilarTitles(title)} aside size="large" />
 {/key}
 
 <h2>TitlesRailModal</h2>

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

@@ -42,7 +42,19 @@ describe('$lib/api/titles', () => {
 
       await fetchTitles()
 
-      expect(api).toHaveBeenCalledWith('/titles/browse?api-token=some-token&language=en-US&region=nl&include_count=false')
+      expect(api).toHaveBeenCalledWith('/titles/browse?api-token=some-token&language=en-US&include_count=false&region=nl')
+    })
+
+    it('Should not set region if region is given as null in params', async () => {
+      await fetchTitles({ region: null })
+
+      expect(api).toHaveBeenCalledWith('/titles/browse?api-token=some-token&language=en-US&include_count=false')
+    })
+
+    it('Should use region given as param', async () => {
+      await fetchTitles({ region: 'be' })
+
+      expect(api).toHaveBeenCalledWith('/titles/browse?api-token=some-token&region=be&language=en-US&include_count=false')
     })
   })
 

package/src/tests/routes/components/Explore/ExploreRouter.test.js

@@ -2,6 +2,7 @@ import { fireEvent, render } from '@testing-library/svelte'
 import { expect, describe, it, beforeEach, vi } from 'vitest'
 
 import ExploreRouter from '../../../../routes/components/Explore/ExploreRouter.svelte'
+import { fetchTitles } from '$lib/api/titles'
 
 vi.mock('$lib/api/titles', () => ({
   fetchTitles: vi.fn(),
@@ -10,6 +11,8 @@ vi.mock('$lib/api/titles', () => ({
 
 describe('ExploreRouter.svelte', () => {
   beforeEach(() => {
+    vi.mocked(fetchTitles).mockResolvedValue({ next: null, previous: null, results: [] })
+
     // @ts-ignore
     window.PlayPilotLinkInjections = { config: { explore_use_router: true } }
   })

package/src/tests/routes/components/Explore/Routes/ExploreHome.test.js

@@ -1,10 +1,11 @@
 import { render } from '@testing-library/svelte'
-import { beforeEach, describe, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import ExploreHome from '../../../../../routes/components/Explore/Routes/ExploreHome.svelte'
+import { fetchTitles } from '$lib/api/titles'
 
 vi.mock('$lib/api/titles', () => ({
-  fetchSimilarTitles: vi.fn(),
+  fetchTitles: vi.fn(),
 }))
 
 describe('ExploreResults.svelte', () => {
@@ -12,7 +13,11 @@ describe('ExploreResults.svelte', () => {
     vi.resetAllMocks()
   })
 
-  it('Should do nothing yet, this is a placeholder', () => {
+  it('Should fetch titles for each rail', () => {
+    vi.mocked(fetchTitles).mockResolvedValue({ next: null, previous: null, results: [] })
+
     render(ExploreHome)
+
+    expect(fetchTitles).toHaveBeenCalledTimes(5)
   })
 })

package/src/tests/routes/components/Rails/TitlesRail.test.js

@@ -167,4 +167,31 @@ describe('TitlesRail.svelte', () => {
 
     expect(openModal).not.toHaveBeenCalled()
   })
+
+  it('Should not contain with-aside class or show aside by default', async () => {
+    const { container, queryByTestId } = render(TitlesRail, { titles: [title] })
+
+    expect(/** @type {HTMLElement} */ (container.querySelector('.with-aside'))).not.toBeTruthy()
+    expect(queryByTestId('aside')).not.toBeTruthy()
+  })
+
+  it('Should contain with-aside class and show aside when aside is given as true', async () => {
+    const { container, getByTestId } = render(TitlesRail, { titles: [title], aside: true })
+
+    expect(/** @type {HTMLElement} */ (container.querySelector('.with-aside'))).toBeTruthy()
+    expect(getByTestId('aside')).toBeTruthy()
+  })
+
+  it('Should contain small class by default', async () => {
+    const { container } = render(TitlesRail, { titles: [title] })
+
+    expect(/** @type {HTMLElement} */ (container.querySelector('.titles.small'))).toBeTruthy()
+  })
+
+  it('Should contain large class when size is given as large', async () => {
+    const { container } = render(TitlesRail, { titles: [title], size: 'large' })
+
+    expect(/** @type {HTMLElement} */ (container.querySelector('.titles.small'))).not.toBeTruthy()
+    expect(/** @type {HTMLElement} */ (container.querySelector('.titles.large'))).toBeTruthy()
+  })
 })

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

@@ -60,13 +60,13 @@ describe('Title.svelte', () => {
   it('Should not have small class by default', () => {
     const { container } = render(Title, { title })
 
-    expect(container.querySelector('.small')).not.toBeTruthy()
+    expect(container.querySelector('.content.small')).not.toBeTruthy()
   })
 
   it('Should have small class when prop is given', () => {
     const { container } = render(Title, { title, small: true })
 
-    expect(container.querySelector('.small')).toBeTruthy()
+    expect(container.querySelector('.content.small')).toBeTruthy()
   })
 
   it('Should truncate title when small prop is given', () => {