@playpilot/tpi 6.2.0 → 6.2.2

package/package.json

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

package/src/lib/api/region.ts

@@ -10,12 +10,14 @@ export async function getRegionBasedOnIp(timeout = 5000): Promise<string> {
 
     const data: { ip: string, country: string } = await response.json()
 
-    const country = data?.country?.toLowerCase()
-    if (!country) throw new Error('No country was returned by api.country.is')
+    let region = data?.country?.toLowerCase()
+    if (!region) throw new Error('No country was returned by api.country.is')
 
-    setSavedRegion(country)
+    if (region === 'gb') region = 'uk'
 
-    return country
+    setSavedRegion(region)
+
+    return region
   } catch (error: any) {
     track(TrackingEvent.RegionRequestFailed, null, { message: error.message })
 

package/src/lib/data/genres.json

@@ -1,16 +1,4 @@
 [
-  {
-    "slug": "100",
-    "name": "All",
-    "categories": {
-      "movie": 100,
-      "series": 100,
-      "documentary": 100,
-      "kids": 100,
-      "cinema": 100,
-      "podcasts": 100
-    }
-  },
   {
     "slug": "999",
     "name": "Unscripted",

package/src/routes/components/Explore/Empty.svelte

@@ -0,0 +1,23 @@
+<div class="empty">
+  <p>
+    <strong>No results were found</strong><br>
+    Sorry, we couldn't find anything matching your filter.
+  </p>
+</div>
+
+<style lang="scss">
+  p {
+    margin: 0;
+  }
+
+  strong {
+    font-size: theme(font-size-large);
+  }
+
+  .empty {
+    max-width: theme(explore-header-max-width, 600px);
+    padding: margin(2);
+    border-radius: theme(border-radius-large);
+    background: theme(lighter);
+  }
+</style>

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

@@ -16,15 +16,16 @@
   import ListTitleSkeleton from '../ListTitleSkeleton.svelte'
   import Filter from './Filter/Filter.svelte'
   import Search from './Filter/Search.svelte'
+  import Empty from './Empty.svelte'
 
   const filter: ExploreFilter = $state({})
 
   let element: HTMLElement | null = null
   let titles: TitleData[] = $state([])
-  let page = 1
-  let searchQuery = ''
+  let page = $state(1)
   let debounce: ReturnType<typeof setTimeout> | null = null
   let latestRequestId = 0
+  let searchQuery = $state('')
   let promise = $state(getTitlesForFilter())
   let height: string | null = $state(null)
   let width = $state(0)
@@ -70,8 +71,6 @@
 
     const response = await fetchTitles(params)
 
-    if (!response?.results) throw new Error('Something went wrong when fetching titles in Explore')
-
     if (requestId === latestRequestId) titles = [...titles, ...response.results]
 
     return response
@@ -129,7 +128,7 @@
 
     {#key grid}
       <Search oninput={search} />
-      <Filter {filter} limit={!grid} onchange={setFilter} />
+      <Filter {filter} limit={!grid} onchange={setFilter} showSorting={!searchQuery} />
     {/key}
   </div>
 
@@ -155,8 +154,12 @@
         <Button size="large" onclick={fetchMoreTitles}>Show more</Button>
       </div>
     {/if}
+
+    {#if !titles?.length && page === 1}
+      <Empty />
+    {/if}
   {:catch}
-    Something went wrong
+    <p>Something went wrong</p>
   {/await}
 </div>
 
@@ -165,8 +168,9 @@
     background: theme(explore-background, light);
     border-radius: theme(border-radius-large);
     max-width: theme(explore-max-width, 1200px);
+    min-height: 75vh;
     margin: 0 auto;
-    padding: theme(explore-padding, margin(1) margin(1) margin(2));
+    padding: theme(explore-padding, margin(1) margin(1) margin(6));
     overflow: auto;
     font-family: theme(font-family);
     font-family: theme(detail-font-family, font-family);

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

@@ -8,15 +8,16 @@
   import Button from '../../Button.svelte'
   import IconArrow from '../../Icons/IconArrow.svelte'
   import IconFilter from '../../Icons/IconFilter.svelte'
-  import { scale } from 'svelte/transition'
+  import {  fly, scale } from 'svelte/transition'
 
   interface Props {
     filter: ExploreFilter
     onchange?: () => void
     limit?: boolean
+    showSorting?: boolean
   }
 
-  const { filter, onchange = () => null, limit = true }: Props = $props()
+  const { filter, onchange = () => null, limit = true, showSorting = true }: Props = $props()
 
   const shownItemsLimit = 3
   const items = [{
@@ -67,9 +68,11 @@
       </Button>
     {/if}
 
-    <div class="sorting">
-      <FilterSorting {filter} {onchange} />
-    </div>
+    {#if showSorting}
+      <div class="sorting" transition:fly={{ x: 5, duration: 100 }}>
+        <FilterSorting {filter} {onchange} />
+      </div>
+    {/if}
   </div>
 </div>
 

package/src/routes/components/TitlePoster.svelte

@@ -28,6 +28,6 @@
     display: block;
     width: 100%;
     height: auto;
-    color: theme(detail-text-color, text-color-alt);
+    color: transparent;
   }
 </style>

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

@@ -87,4 +87,10 @@ describe('getRegionBasedOnIp', () => {
 
     vi.useRealTimers()
   })
+
+  it('Should use uk region when GB is returned by api endpoint', async () => {
+    fakeFetch({ response: { ip: '127.0.0.1', country: 'GB' } })
+
+    expect(await getRegionBasedOnIp()).toBe('uk')
+  })
 })

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

@@ -172,4 +172,40 @@ describe('Explore.svelte', () => {
 
     expect(fetchTitles).toHaveBeenCalledWith({ page: 1, page_size: 24, ordering: '-new' })
   })
+
+  it('Should show empty message if no titles are returned for first page', async () => {
+    vi.mocked(fetchTitles).mockResolvedValue({ results: [], next: null, previous: null })
+
+    const { getByText } = render(Explore)
+
+    await waitFor(() => {
+      expect(getByText('No results were found')).toBeTruthy()
+    })
+  })
+
+  it('Should not show empty message if no titles are returned for pages past the first page', async () => {
+    vi.mocked(fetchTitles).mockResolvedValue({ results: [title], next: 'truthy', previous: null })
+
+    const { getByText, queryByText } = render(Explore)
+
+    await waitFor(() => getByText('Show more'))
+
+    vi.mocked(fetchTitles).mockResolvedValue({ results: [], next: null, previous: null })
+
+    await fireEvent.click(getByText('Show more'))
+
+    await waitFor(() => {
+      expect(queryByText('No results were found')).not.toBeTruthy()
+    })
+  })
+
+  it('Should show error message if api responded with error', async () => {
+    vi.mocked(fetchTitles).mockRejectedValueOnce(null)
+
+    const { getByText } = render(Explore)
+
+    await waitFor(() => {
+      expect(getByText('Something went wrong')).toBeTruthy()
+    })
+  })
 })

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

@@ -55,4 +55,16 @@ describe('Filter.svelte', () => {
 
     expect(fetchProviders).toHaveBeenCalled()
   })
+
+  it('Should not show sortings when showSortings is false', () => {
+    const { container } = render(Filter, { filter: {}, showSorting: false })
+
+    expect(container.querySelector('.sorting')).not.toBeTruthy()
+  })
+
+  it('Should show sortings when showSortings is true', () => {
+    const { container } = render(Filter, { filter: {}, showSorting: true })
+
+    expect(container.querySelector('.sorting')).toBeTruthy()
+  })
 })