@playpilot/tpi 8.21.7 → 8.21.8

package/package.json

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

package/src/lib/api/youtubeAvailability.ts

@@ -1,7 +1,8 @@
 import { PUBLIC_YOUTUBE_AVAILABILITY_URL } from '$env/static/public'
+import { getRegionBasedOnIp } from './region'
 
 export async function isYouTubeVideoAvailableInRegion(videoId: string): Promise<boolean> {
-  const region = window.PlayPilotLinkInjections?.region?.toUpperCase()
+  const region = (await getRegionBasedOnIp())?.toUpperCase()
 
   if (!region) return true
 

package/src/routes/+page.svelte

@@ -215,7 +215,7 @@
           }} />
 
         {#snippet failed()}
-          <Alert fixed>An error has occured in the PlayPilot Linkinjections editor view. We've been notified and will investigate!</Alert>
+          <Alert fixed>An error has occurred in the PlayPilot Linkinjections editor view. We've been notified and will investigate!</Alert>
         {/snippet}
       </svelte:boundary>
     {/if}

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

@@ -74,7 +74,13 @@
 
 <svelte:window on:popstate={onhashchange} />
 
-<ExploreLayout {navigate} bind:searchQuery bind:filter>
-  <CurrentRouteComponent {searchQuery} {filter} {navigate} />
-  <CurrentAppendComponent {navigate} />
-</ExploreLayout>
+<svelte:boundary onerror={(error) => console.error(error)}>
+  <ExploreLayout {navigate} bind:searchQuery bind:filter>
+    <CurrentRouteComponent {searchQuery} {filter} {navigate} />
+    <CurrentAppendComponent {navigate} />
+  </ExploreLayout>
+
+  {#snippet failed()}
+    <p>An error occurred.</p>
+  {/snippet}
+</svelte:boundary>

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

@@ -5,7 +5,7 @@
   import Rail from './Rail.svelte'
   import type { TitleData } from '$lib/types/title'
   import { openModal } from '$lib/modal'
-  import { exploreTitleUrl, titleUrl } from '$lib/routes'
+  import { exploreTitleUrl } from '$lib/routes'
   import { generateRandomHash } from '$lib/hash'
   import { getFirstTitleWithAvailableTrailer } from '$lib/trailer'
   import { useExploreRouter } from '$lib/explore'
@@ -174,14 +174,15 @@
         onresize={() => slider?.reposition()}>
         {#each titles as title, index}
           {@const expanded = isExpanded(title)}
-          {@const href = navigateToExplore ? exploreTitleUrl(title) : titleUrl(title)}
           {@const onclick = (event: MouseEvent): void => openTitle(event, titles, index)}
 
           <div class="title" class:expanded data-testid="title">
             <div class="media">
               {#if expanded}
                 <div class="video" out:fade={{ delay: 200, duration: 200 }}>
-                  <a class="video-overlay" title="" {href} {onclick}></a>
+                  <!-- svelte-ignore a11y_click_events_have_key_events -->
+                  <!-- svelte-ignore a11y_no_static_element_interactions -->
+                  <div class="video-overlay" title="" {onclick}></div>
 
                   {#if !!title.embeddable_url}
                     <YouTubeEmbed bind:this={embed} embeddable_url={title.embeddable_url!} muted loop captions showMuteControls />
@@ -190,15 +191,19 @@
                   {/if}
                 </div>
               {:else}
-                <a class="poster" {href} {onclick}>
+                <!-- svelte-ignore a11y_click_events_have_key_events -->
+                <!-- svelte-ignore a11y_no_static_element_interactions -->
+                <div class="poster" {onclick}>
                   <TitlePoster {title} width={96} height={144} />
-                </a>
+                </div>
               {/if}
             </div>
 
-            <a class="heading" {href} {onclick} data-testid="heading">
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <span class="heading" {onclick} data-testid="heading">
               {title.title}
-            </a>
+            </span>
 
             {#if aside}
               <!-- svelte-ignore a11y_click_events_have_key_events -->

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

@@ -1,6 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { isYouTubeVideoAvailableInRegion } from '$lib/api/youtubeAvailability'
 import { fakeFetch } from '../../helpers'
+import { getRegionBasedOnIp } from '$lib/api/region'
 
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
@@ -10,6 +11,10 @@ vi.mock('$env/static/public', () => ({
   PUBLIC_YOUTUBE_AVAILABILITY_URL: 'https://some-path.com',
 }))
 
+vi.mock('$lib/api/region', () => ({
+  getRegionBasedOnIp: vi.fn(),
+}))
+
 describe('youtubeAvailability', () => {
   beforeEach(() => {
     vi.resetAllMocks()
@@ -17,6 +22,8 @@ describe('youtubeAvailability', () => {
 
     // @ts-ignore
     window.PlayPilotLinkInjections = { region: 'nl' }
+
+    vi.mocked(getRegionBasedOnIp).mockResolvedValue('nl')
   })
 
   describe('isYouTubeVideoAvailableInRegion', () => {
@@ -24,6 +31,8 @@ describe('youtubeAvailability', () => {
       // @ts-ignore
       window.PlayPilotLinkInjections = {}
 
+      vi.mocked(getRegionBasedOnIp).mockResolvedValueOnce('')
+
       expect(await isYouTubeVideoAvailableInRegion('video-id')).toBe(true)
       expect(global.fetch).not.toHaveBeenCalled()
     })

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

@@ -36,16 +36,15 @@ describe('TitlesRail.svelte', () => {
   })
 
   it('Should render all titles', async () => {
-    const { getAllByTestId, getAllByRole } = render(TitlesRail, { titles: [title, title] })
+    const { getAllByTestId } = render(TitlesRail, { titles: [title, title] })
 
     expect(getAllByTestId('title')).toHaveLength(2)
-    expect(getAllByRole('link')[0].getAttribute('href')).toBe(`https://www.playpilot.com/series/${title.slug}/`)
   })
 
   it('Should fire openModal when title is clicked', async () => {
-    const { getAllByRole } = render(TitlesRail, { titles: [title] })
+    const { getByText } = render(TitlesRail, { titles: [title] })
 
-    await fireEvent.click(getAllByRole('link')[0])
+    await fireEvent.click(getByText(title.title))
 
     expect(openModal).toHaveBeenCalledWith({
       type: 'titles-rail',
@@ -57,9 +56,9 @@ describe('TitlesRail.svelte', () => {
 
   it('Should fire given onclick function when title is clicked', async () => {
     const onclick = vi.fn()
-    const { getAllByRole } = render(TitlesRail, { titles: [title], onclick })
+    const { getByText } = render(TitlesRail, { titles: [title], onclick })
 
-    await fireEvent.click(getAllByRole('link')[0])
+    await fireEvent.click(getByText(title.title))
 
     expect(onclick).toHaveBeenCalledWith(title)
   })
@@ -215,11 +214,10 @@ describe('TitlesRail.svelte', () => {
   })
 
   it('Should navigate to explore page rather than open modal when navigateToExplore is true', async () => {
-    const { getAllByRole } = render(TitlesRail, { titles: [title], navigateToExplore: true })
+    const { getByText } = render(TitlesRail, { titles: [title], navigateToExplore: true })
 
-    await fireEvent.click(getAllByRole('link')[0])
+    await fireEvent.click(getByText(title.title))
 
-    expect(getAllByRole('link')[0].getAttribute('href')).toContain(`?route=modal&sid=${title.sid}`)
     expect(window.location.href).toContain(`?route=modal&sid=${title.sid}`)
     expect(openModal).not.toHaveBeenCalledWith()
   })