@playpilot/tpi 8.10.1 → 8.11.0-beta.1

package/package.json

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

package/src/lib/api/youtubeAvailability.ts

@@ -1,6 +1,4 @@
 import { PUBLIC_YOUTUBE_AVAILABILITY_URL } from '$env/static/public'
-import { TrackingEvent } from '$lib/enums/TrackingEvent'
-import { track } from '$lib/tracking'
 
 export async function isYouTubeVideoAvailableInRegion(videoId: string): Promise<boolean> {
   const region = window.PlayPilotLinkInjections?.region?.toUpperCase()
@@ -18,8 +16,9 @@ export async function isYouTubeVideoAvailableInRegion(videoId: string): Promise<
     if (!data.blocked && !!data.allowed && !data.allowed?.includes(region)) return false
 
     return true
-  } catch (error: any) {
-    track(TrackingEvent.YouTubeAvailabilityRequestFailed, null, { message: error.message })
+  } catch {
+    // Silently fail for now
+    // track(TrackingEvent.YouTubeAvailabilityRequestFailed, null, { message: error.message })
 
     return false
   }

package/src/lib/data/translations.ts

@@ -166,6 +166,11 @@ export const translations = {
     [Language.Swedish]: 'Streaming Guide',
     [Language.Danish]: 'Streaming Guide',
   },
+  'Streaming Guide Heading': {
+    [Language.English]: 'Discover and search all movies and tv-shows',
+    [Language.Swedish]: 'Upptäck och sök bland alla filmer och tv-serier',
+    [Language.Danish]: 'Opdag og søg i alle film og tv-serier',
+  },
   'Streaming Guide Description': {
     [Language.English]: 'Find where to watch movies online - the ultimate guide that helps you find the best movies and shows across streaming services.',
     [Language.Swedish]: 'Sök bland alla filmer och serier för att ta reda på var du kan streama dem',

package/src/lib/injection.ts

@@ -169,7 +169,6 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
   if (document.querySelector(keySelector)) insertInTextDisclaimer(elements)
 
   return mergedInjections.filter(i => i.title_details).map((injection, index) => {
-    // Favour manual injections over AI injections
     const hasManualEquivalent = !injection.manual && isAvailableAsManualInjection(injection, index, mergedInjections)
     const duplicate = injection.duplicate ?? hasManualEquivalent
 
@@ -307,9 +306,6 @@ function addCSSVariablesToLinks(): void {
   }
 }
 
-/**
- * Add event listeners to all injected links. These events are for both the popover and the modal.
- */
 function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
   window.addEventListener('mousemove', destroyLinkPopoverOnMouseleave)
   window.addEventListener('click', (event) => openModalForInjectedLink(event, injections))
@@ -341,10 +337,6 @@ export function clearLinkInjections(): void {
   destroyLinkPopover(false)
 }
 
-/**
- * Clear specific link injection from the page
- * @param key Given of the injection to be removed from the page
- */
 export function clearLinkInjection(key: string): void {
   const element: HTMLAnchorElement | null = document.querySelector(`[${keyDataAttribute}="${key}"]`)
   if (!element) return

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

@@ -21,6 +21,7 @@
 
   let { navigate = () => null, searchQuery = $bindable(''), filter = $bindable({}), children }: Props = $props()
 
+  // svelte-ignore non_reactive_update
   let element: HTMLElement | null = null
   let height: string | null = $state(null)
   let clientWidth: number = $state(window.innerWidth)
@@ -44,7 +45,7 @@
       <div class="divider"></div>
 
       <div class="heading" use:heading>
-        {t('Streaming Guide')}
+        {t('Streaming Guide Heading')}
       </div>
 
       {#if !useExploreRouter()}
@@ -98,8 +99,13 @@
     display: flex;
     flex-direction: column;
     gap: margin(0.5);
-    margin: theme(explore-header-margin, 0 0 margin(2));
+    margin: theme(explore-header-margin, 0 0 margin(1));
     width: 100%;
+    max-width: margin(12);
+
+    @include desktop {
+      max-width: margin(20);
+    }
   }
 
   .divider {
@@ -112,7 +118,7 @@
   .heading {
     margin: theme(explore-heading-margin, margin(0.25) 0);
     color: theme(text-color);
-    font-size: theme(explore-heading-size, clamp(margin(1.5), 5vw, margin(2)));
+    font-size: theme(explore-heading-size, clamp(margin(1), 2.5vw, margin(1.5)));
     font-weight: theme(explore-heading-font-weight, font-bold);
     text-transform: theme(explore-heading-text-transform, normal);
     line-height: theme(explore-heading-line-height, 1.5);

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

@@ -6,9 +6,11 @@
   import { track } from '$lib/tracking'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import TitlesRail from '../../Rails/TitlesRail.svelte'
+  import { mobileBreakpoint } from '$lib/constants'
 
   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: Trending',
@@ -17,7 +19,7 @@
   }, {
     heading: 'List: New',
     params: { from_playlist_sid: 'li42WR', include_playable_types: 'SVOD,FREE' },
-    properties: { aside: true },
+    properties: { aside: true, size: 'flexible' },
   }, {
     heading: 'List: Upcoming',
     params: { from_playlist_sid: 'li42wf', region: null, no_region_filter: true },
@@ -29,7 +31,7 @@
   }, {
     heading: 'List: Demand',
     params: { from_playlist_sid: 'licBS' },
-    properties: { aside: true },
+    properties: { aside: true, size: 'flexible' },
   }]
 
   async function getListTitles(params: Record<string, any> = {}): Promise<TitleData[]> {
@@ -43,7 +45,7 @@
   }
 </script>
 
-<svelte:window {onscroll} />
+<svelte:window {onscroll} bind:innerWidth={windowWidth} />
 
 <div data-testid="explore-home"></div>
 
@@ -52,7 +54,7 @@
     <TitlesRail
       heading={t(heading)}
       titles={getListTitles(params)}
-      size="flexible"
+      size={windowWidth >= mobileBreakpoint ? 'flexible' : 'huge'}
       minimumLength={7}
       {...properties}
       bind:expandedTitle

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

@@ -131,7 +131,7 @@
     border-radius: theme(rail-modal-item-border-radius, border-radius-huge) theme(rail-modal-item-border-radius, border-radius-huge) 0 0;
     background: theme(rail-modal-item-background, light);
     box-shadow: none;
-    height: 80vh;
+    height: 90vh;
     overflow: auto;
     overscroll-behavior: contain;
     transition: box-shadow var(--transition-duration);

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

@@ -16,7 +16,7 @@
     titles: Promise<TitleData[]> | TitleData[]
     minimumLength?: number,
     heading?: string,
-    size?: 'small' | 'large' | 'flexible'
+    size?: 'small' | 'large' | 'huge' | 'flexible'
     aside?: boolean,
     expandable?: boolean,
     expandedTitle?: TitleData | null,
@@ -64,7 +64,9 @@
       recentlyExpanded = true
       setTimeout(() => recentlyExpanded = false, 500)
 
-      if (elementOffsetInParent < activeElement.clientWidth * 2) slider?.setIndex(index - 2)
+      if (size === 'flexible' && elementOffsetInParent < activeElement.clientWidth * 2) {
+        slider?.setIndex(index - 2)
+      }
 
       expandTitleIntoTrailer(title)
 
@@ -206,7 +208,7 @@
   .titles {
     --width: #{theme(rail-size-default, margin(6))};
     --image-height: #{calc(var(--width) * 3 / 2)};
-    --expanded-width: #{calc(var(--image-height) / 9 * 16)};
+    --expanded-width: var(--width);
     --border-radius: #{theme(rail-border-radius, border-radius)};
 
     &.with-aside {
@@ -217,8 +219,13 @@
       --width: #{theme(rail-size-large, margin(7.5))};
     }
 
+    &.huge {
+      --width: #{theme(rail-size-large, min(explore-width(65), margin(15)))};
+    }
+
     &.flexible {
-      --width: #{theme(rail-size-flexible, clamp(margin(6), explore-width(18), margin(11.5)))};
+      --width: #{theme(rail-size-flexible, clamp(margin(8), explore-width(20), margin(11.5)))};
+      --expanded-width: #{calc(var(--image-height) / 9 * 16)};
     }
   }
 
@@ -286,6 +293,14 @@
     :global(iframe) {
       opacity: 0;
       animation: fade-iframe 500ms 500ms forwards;
+
+      @include mobile {
+        position: absolute;
+        width: 225%;
+        top: 50%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-50%);
+      }
     }
 
     :global(+ .poster) {

package/src/routes/components/Title.svelte

@@ -154,7 +154,7 @@
   }
 
   .header {
-    padding: margin(10) 0 margin(1);
+    padding: min(margin(17), 70vw) 0 margin(1);
 
     @media (min-width: 390px) {
       display: grid;

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

@@ -1,8 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { isYouTubeVideoAvailableInRegion } from '$lib/api/youtubeAvailability'
 import { fakeFetch } from '../../helpers'
-import { track } from '$lib/tracking'
-import { TrackingEvent } from '$lib/enums/TrackingEvent'
 
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
@@ -64,7 +62,9 @@ describe('youtubeAvailability', () => {
       fakeFetch({ ok: false, status: 500 })
 
       expect(await isYouTubeVideoAvailableInRegion('video-id')).toBe(false)
-      expect(track).toHaveBeenCalledWith(TrackingEvent.YouTubeAvailabilityRequestFailed, null, { message: expect.any(String) })
+
+      // For now it's silently failing on purpose
+      // expect(track).toHaveBeenCalledWith(TrackingEvent.YouTubeAvailabilityRequestFailed, null, { message: expect.any(String) })
     })
   })
 })