@playpilot/tpi 8.23.0-beta.1 → 8.23.0-beta.3

package/package.json

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

package/src/lib/api/api.ts

@@ -7,9 +7,10 @@ type Options = {
   headers?: Record<string, string>
   method?: 'POST' | 'GET'
   body?: null | Record<string, any>
+  baseUrl?: string
 }
 
-export async function api<T>(path: string, { headers = {}, method = 'GET', body = null }: Options = {}): Promise<T> {
+export async function api<T>(path: string, { headers = {}, method = 'GET', body = null, baseUrl = apiBaseUrl }: Options = {}): Promise<T> {
   // For GET methods we store all results in a cache object. This cache is super simple and has no invalidation at all.
   // Once something is stored it's there forever since the page is only short lived.
   // We never use the cache for editiorial mode since in the editor requests do change.
@@ -18,7 +19,7 @@ export async function api<T>(path: string, { headers = {}, method = 'GET', body
 
   const baseHeaders: Record<string, string> = method === 'GET' ? {} : { 'Content-Type': 'application/json' }
 
-  const response = await fetch(apiBaseUrl + path, {
+  const response = await fetch(baseUrl + path, {
     method,
     headers: new Headers({ ...baseHeaders, ...headers }),
     // eslint-disable-next-line no-undef

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

@@ -1 +1 @@
-export type LanguageCode = 'en-US' | 'sv-SE' | 'dk-DK'
+export type LanguageCode = 'en-US' | 'sv-SE' | 'da-DK'

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

@@ -2,37 +2,23 @@
   import type { TitleData } from '$lib/types/title'
   import { fetchTitles } from '$lib/api/titles'
   import { t } from '$lib/localization'
-  import { Sorting } from '$lib/enums/Sorting'
   import { track } from '$lib/tracking'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import TitlesRail from '../../Rails/TitlesRail.svelte'
   import { mobileBreakpoint } from '$lib/constants'
+  import { getLanguage } from '$lib/language'
+  import type { LanguageCode } from '$lib/types/language'
+  import { api } from '$lib/api/api'
 
   let expandedTitle: TitleData | null = $state(null)
   let expandedRailKey: string | null = $state(null)
   let windowWidth: number = $state(window.innerWidth)
 
-  const rails: { heading: string, params: Record<string, any>, properties: Record<string, any> }[] = [{
-    heading: 'List: Upcoming',
-    params: { from_playlist_sid: 'li42wf', region: null, no_region_filter: true },
-    properties: { expandable: true },
-  }, {
-    heading: 'List: Trending',
-    params: { ordering: Sorting.Popular },
-    properties: { expandable: true },
-  }, {
-    heading: 'List: New',
-    params: { from_playlist_sid: 'li42WR', include_playable_types: 'SVOD,FREE' },
-    properties: { aside: true, size: 'flexible' },
-  }, {
-    heading: 'List: Cinema',
-    params: { from_playlist_sid: 'li42WS', region: null, no_region_filter: true },
-    properties: { expandable: true },
-  }, {
-    heading: 'List: Demand',
-    params: { from_playlist_sid: 'licBS' },
-    properties: { aside: true, size: 'flexible' },
-  }]
+  type Rail = { headings: Record<LanguageCode, string>, params: Record<string, any>, properties: Record<string, any> }
+
+  async function fetchRails(): Promise<Rail[]> {
+    return await api<Rail[]>('/streaming-guide/rails', { baseUrl: 'https://partner.playpilot.net/api' })
+  }
 
   async function getListTitles(params: Record<string, any> = {}): Promise<TitleData[]> {
     try {
@@ -49,20 +35,32 @@
 
 <div data-testid="explore-home"></div>
 
-{#each rails as { heading, params, properties }}
-  <div class="rail">
-    <TitlesRail
-      heading={t(heading)}
-      titles={getListTitles(params)}
-      size={windowWidth >= mobileBreakpoint ? 'flexible' : 'huge'}
-      minimumLength={7}
-      {...properties}
-      bind:expandedTitle
-      bind:expandedRailKey
-      onclick={() => track(TrackingEvent.ExploreTitleRailModalView, null, { rail: heading })}
-      onexpand={(title) => track(TrackingEvent.ExploreTitleRailExpandClick, title, { rail: heading })} />
-  </div>
-{/each}
+{#await fetchRails()}
+  {#each { length: 3 }}
+    <div class="rail">
+      <TitlesRail titles={new Promise((res) => setTimeout(res, 10000))} size={windowWidth >= mobileBreakpoint ? 'flexible' : 'huge'} />
+    </div>
+  {/each}
+{:then rails}
+  {#each rails as { headings, params, properties }}
+    {@const heading = headings[getLanguage()]}
+
+    <div class="rail">
+      <TitlesRail
+        {heading}
+        titles={getListTitles(params)}
+        size={windowWidth >= mobileBreakpoint ? (properties.size || 'flexible') : 'huge'}
+        minimumLength={7}
+        {...properties}
+        bind:expandedTitle
+        bind:expandedRailKey
+        onclick={() => track(TrackingEvent.ExploreTitleRailModalView, null, { rail: headings })}
+        onexpand={(title) => track(TrackingEvent.ExploreTitleRailExpandClick, title, { rail: headings })} />
+    </div>
+  {/each}
+{:catch}
+  {t('An Error Occurred')}
+{/await}
 
 <style lang="scss">
   .rail {

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

@@ -89,14 +89,14 @@
 </div>
 
 <style lang="scss">
-  $modal-height: 90dvh;
-  $item-height: calc(90dvh - margin(7));
+  $modal-height: calc(100dvh - margin(4.5));
+  $item-height: calc($modal-height - margin(7));
 
   .reel {
     --playpilot-detail-background-height: #{$item-height};
     --playpilot-detail-background-border-radius: 0;
     --playpilot-detail-background-width: 400%;
-    --background-mask-image: unset;
+    --playpilot-detail-backdrop: rgba(0, 0, 0, 0.85);
 
     :global(*) {
       box-sizing: border-box;
@@ -113,11 +113,9 @@
   }
 
   .slider {
-    margin-top: 10dvh;
+    margin-top: calc(100dvh - $modal-height);
     height: $modal-height;
     width: 100%;
-    border-radius: theme(border-radius-large) theme(border-radius-large) 0 0;
-    overflow: hidden;
   }
 
   .item {

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

@@ -245,6 +245,7 @@
   }
 
   .title {
+    cursor: pointer;
     width: unset;
     font-size: theme(rail-font-size, font-size-small);
     line-height: 1.2;

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

@@ -1,23 +1,34 @@
-import { render } from '@testing-library/svelte'
+import { render, waitFor } from '@testing-library/svelte'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import ExploreHome from '../../../../../routes/components/Explore/Routes/ExploreHome.svelte'
 import { fetchTitles } from '$lib/api/titles'
+import { api } from '$lib/api/api'
 
 vi.mock('$lib/api/titles', () => ({
   fetchTitles: vi.fn(),
 }))
 
+vi.mock('$lib/api/api', () => ({
+  api: vi.fn(),
+}))
+
 describe('ExploreResults.svelte', () => {
   beforeEach(() => {
     vi.resetAllMocks()
   })
 
-  it('Should fetch titles for each rail', () => {
+  it('Should fetch rails endpoint and titles for each rail', async () => {
+    const rail = { headings: {}, properties: {}, params: {} }
+
+    vi.mocked(api).mockResolvedValue([rail, rail, rail, rail, rail])
     vi.mocked(fetchTitles).mockResolvedValue({ next: null, previous: null, results: [] })
 
     render(ExploreHome)
 
-    expect(fetchTitles).toHaveBeenCalledTimes(5)
+    await waitFor(() => {
+      expect(api).toHaveBeenCalledOnce()
+      expect(fetchTitles).toHaveBeenCalledTimes(5)
+    })
   })
 })