@playpilot/tpi 8.11.0 → 8.12.1

package/package.json

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

package/src/lib/data/translations.ts

@@ -166,6 +166,11 @@ export const translations = {
     [Language.Swedish]: 'Streaming Guide',
     [Language.Danish]: 'Streaming Guide',
   },
+  'Streaming Guide Subheading': {
+    [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/types/script.d.ts

@@ -42,6 +42,8 @@ export type ScriptConfig = {
   config?: ConfigResponse
   // All ads as fetched from the ads endpoint. This is used as the primary store for ads, each individual ads gets it's data from here.
   ads?: Campaign[]
+  // Estimate playtimes of video embeds listed by their video id.
+  video_playtimes?: Record<string, number>
   // The region the user is in, either fetched from an external service or based on the default region in the config object
   region?: string | null
   // The time at which the script was initialized

package/src/main.ts

@@ -23,6 +23,7 @@ window.PlayPilotLinkInjections ||= {
   initial_link_injections_promise: null,
   time_at_initialize: 0,
   ads: [],
+  video_playtimes: {},
   require_consent: true,
   no_affiliate: false,
   consents: {

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

@@ -48,6 +48,10 @@
         {t('Streaming Guide')}
       </div>
 
+      <div class="subheading" use:heading={2}>
+        {t('Streaming Guide Subheading')}
+      </div>
+
       {#if !useExploreRouter()}
         <p class="description">
           {t('Streaming Guide Description')}
@@ -99,7 +103,7 @@
     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%;
   }
 
@@ -110,8 +114,8 @@
     background: theme(explore-divider-background, text-color);
   }
 
-  .heading {
-    margin: theme(explore-heading-margin, margin(0.25) 0);
+  .heading,
+  .subheading {
     color: theme(text-color);
     font-size: theme(explore-heading-size, clamp(margin(1.5), 5vw, margin(2)));
     font-weight: theme(explore-heading-font-weight, font-bold);
@@ -119,6 +123,16 @@
     line-height: theme(explore-heading-line-height, 1.5);
   }
 
+  .subheading {
+    margin-top: margin(0.5);
+    max-width: margin(15);
+    font-size: theme(explore-subheading-size, clamp(margin(1), 2.5vw, margin(1.25)));
+
+    @include desktop {
+      max-width: 100%;
+    }
+  }
+
   .description {
     max-width: theme(explore-header-max-width, 600px);
     margin: 0;

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

@@ -78,7 +78,7 @@
 </Modal>
 
 <style lang="scss">
-  $size: min(600px, 80vw);
+  $size: min(600px, 85vw);
 
   .rail-modal {
     --gap: #{margin(0.25)};
@@ -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);
@@ -156,7 +156,7 @@
   }
 
   .arrow {
-    --offset: #{margin(-2)};
+    --offset: #{margin(-1.25)};
     --scale: 1;
     cursor: pointer;
     z-index: 2;

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

@@ -4,7 +4,7 @@
   import type { TitleData } from '$lib/types/title'
   import { getFirstAdOfType } from '$lib/api/ads'
   import { exploreParentSelector } from '$lib/explore'
-  import { onMount } from 'svelte'
+  import { onMount, setContext } from 'svelte'
   import { isPixelAllowed } from '$lib/pixel'
   import { trackViaPixel } from '@playpilot/retargeting-tracking'
   import Modal from './Modal.svelte'
@@ -20,6 +20,8 @@
 
   const { title, initialScrollPosition = 0, ...restProps }: Props = $props()
 
+  setContext('modal', 'title')
+
   const topScrollAd = getFirstAdOfType('top_scroll')
   const displayAd = getFirstAdOfType('card')
   const insertExploreCta = window.PlayPilotLinkInjections?.config?.explore_insert_cta_in_tpi

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,
@@ -60,11 +60,16 @@
       const activeElement = element?.querySelectorAll('.title')[index]!
       const parentOffset = element?.getBoundingClientRect().right || 0
       const elementOffsetInParent = parentOffset - activeElement.getBoundingClientRect().right
+      const isFullyVisible = elementOffsetInParent > activeElement.clientWidth * 2
 
       recentlyExpanded = true
       setTimeout(() => recentlyExpanded = false, 500)
 
-      if (elementOffsetInParent < activeElement.clientWidth * 2) slider?.setIndex(index - 2)
+      if (size === 'flexible' && !isFullyVisible) {
+        slider?.setIndex(index - 2)
+      } else if (size === 'huge' && !isFullyVisible) {
+        slider?.setIndex(index)
+      }
 
       expandTitleIntoTrailer(title)
 
@@ -206,7 +211,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 +222,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 +296,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

@@ -14,7 +14,7 @@
   import { heading } from '$lib/actions/heading'
   import { removeImageUrlPrefix } from '$lib/image'
   import { titleUrl } from '$lib/routes'
-  import { setContext } from 'svelte'
+  import { getContext, setContext } from 'svelte'
   import { track } from '$lib/tracking'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { isYouTubeVideoAvailableInRegion } from '$lib/api/youtubeAvailability'
@@ -32,6 +32,7 @@
 
   setContext('title', title)
 
+  const modal = getContext('modal')
   const showDescription = $derived((!small || noAffiliate) && title.description)
 
   let posterLoaded = $state(false)
@@ -96,7 +97,7 @@
   </div>
 </div>
 
-<div class="background" class:small>
+<div class="background" class:small class:offset-mute={modal === 'title'}>
   {#if useVideoBackground && hasYouTubeVideoAvailable}
     <YouTubeEmbedBackground embeddable_url={title.embeddable_url!} />
   {:else}
@@ -131,7 +132,6 @@
   }
 
   .content {
-    z-index: 1;
     position: relative;
     padding: margin(1);
     color: theme(detail-text-color, text-color);
@@ -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;
@@ -179,6 +179,8 @@
   }
 
   .poster {
+    z-index: 1;
+    position: relative;
     grid-area: poster;
     display: block;
     width: $poster-width;
@@ -244,7 +246,6 @@
     overflow: hidden;
     background: theme(detail-background, lighter);
     mask-image: linear-gradient(to bottom, black 40%, transparent);
-    z-index: 0;
 
     @include desktop() {
       height: margin(12);
@@ -263,6 +264,11 @@
       }
     }
 
+    &.offset-mute {
+      --mute-top: #{margin(3)};
+      --mute-right: #{margin(0.25)};
+    }
+
     img {
       width: 100%;
       height: 100%;

package/src/routes/components/TrackAnyClick.svelte

@@ -43,8 +43,10 @@
     return '.' + classnames.join('.')
   }
 
-  function elementHasDirectTextContent(element: Element): Node | undefined {
-    return Array.from(element.childNodes).find(node => node.nodeName === '#text' && !!node.textContent?.trim())
+  function elementHasDirectTextContent(element: Element | undefined): Node | null {
+    if (!element?.childNodes?.length) return null
+
+    return Array.from(element.childNodes).find(node => node.nodeName === '#text' && !!node.textContent?.trim()) || null
   }
 </script>
 

package/src/routes/components/YouTubeEmbed.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { getVideoId } from '$lib/trailer'
+  import { onMount } from 'svelte'
   import IconMute from './Icons/IconMute.svelte'
 
   interface Props {
@@ -14,11 +15,26 @@
   const { embeddable_url = '', controls = [], muted = false, loop = false, captions = false, showMuteControls = false }: Props = $props()
 
   const videoId = $derived(getVideoId(embeddable_url))
+  const startTime = $derived((window?.PlayPilotLinkInjections?.video_playtimes?.[videoId || ''] || 1) - 1)
   const color = window?.getComputedStyle(document.body).getPropertyValue('--playpilot-primary')?.replace('#', '') || 'fa548a'
 
   let iframe: HTMLIFrameElement | null = $state(null)
   let isMuted = $state(muted)
 
+  onMount(() => {
+    if (!videoId) return
+
+    if (!window.PlayPilotLinkInjections.video_playtimes) window.PlayPilotLinkInjections.video_playtimes = {}
+
+    let elapsedSeconds = startTime
+    const interval = setInterval(() => {
+      elapsedSeconds++
+      window.PlayPilotLinkInjections.video_playtimes![videoId] = elapsedSeconds
+    }, 1000)
+
+    return () => clearInterval(interval)
+  })
+
   export function toggleMute(state = !isMuted): void {
     if (isMuted != state) iframe?.contentWindow?.postMessage('mute', '*')
     isMuted = state
@@ -30,7 +46,7 @@
     bind:this={iframe}
     width="600"
     height="338"
-    src="https://video.playpilot.net/?video_id={videoId}&color={color}&muted={muted}&loop={loop}&captions={captions}&controls={controls.join(',')}&autoplay=true&playsinline=true"
+    src="https://video.playpilot.net/?video_id={videoId}&color={color}&muted={muted}&loop={loop}&captions={captions}&controls={controls.join(',')}&start_time={startTime}&autoplay=true&playsinline=true"
     title="YouTube video player"
     frameborder="0"
     referrerpolicy="strict-origin-when-cross-origin"
@@ -58,8 +74,8 @@
     align-items: center;
     justify-content: center;
     position: absolute;
-    top: margin(0.5);
-    right: margin(0.5);
+    top: calc(margin(0.5) + var(--mute-top, 0px));
+    right: calc(margin(0.5) + var(--mute-right, 0px));
     padding: margin(0.25);
     border: 0;
     border-radius: 50%;

package/src/routes/components/YouTubeEmbedBackground.svelte

@@ -14,15 +14,11 @@
 </script>
 
 <div class="video-background" style="--height: {height}px; --width: {clientWidth}px;" bind:clientWidth bind:clientHeight data-testid="video-background">
-  <YouTubeEmbed {embeddable_url} muted loop />
+  <YouTubeEmbed {embeddable_url} muted loop showMuteControls />
 </div>
 
 <style lang="scss">
   .video-background {
-    width: 100%;
-    height: 100%;
-    margin-left: 50%;
-    transform: translateX(-50%);
     background: black;
 
     :global(iframe) {

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

@@ -7,7 +7,7 @@ describe('YouTubeEmbed.svelte', () => {
   it('Should render embed iframe with given video url and default options', () => {
     const { container } = render(YouTubeEmbed, { embeddable_url: 'youtube.com/watch?v=abc' })
 
-    expect(/** @type {HTMLIFrameElement} */ (container.querySelector('iframe')).src).toBe('https://video.playpilot.net/?video_id=abc&color=fa548a&muted=false&loop=false&captions=false&controls=&autoplay=true&playsinline=true')
+    expect(/** @type {HTMLIFrameElement} */ (container.querySelector('iframe')).src).toBe('https://video.playpilot.net/?video_id=abc&color=fa548a&muted=false&loop=false&captions=false&controls=&start_time=0&autoplay=true&playsinline=true')
   })
 
   it('Should render embed iframe with given controls', () => {
@@ -40,4 +40,15 @@ describe('YouTubeEmbed.svelte', () => {
     expect(container.querySelector('iframe')).not.toBeTruthy()
     expect(getByText('Something went wrong')).toBeTruthy()
   })
+
+  it('Should include start_time for given video id if present, minus 1 second', () => {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = {
+      video_playtimes: { abc: 5 },
+    }
+
+    const { container } = render(YouTubeEmbed, { embeddable_url: 'youtube.com/watch?v=abc', captions: true })
+
+    expect(/** @type {HTMLIFrameElement} */ (container.querySelector('iframe')).src).toContain('&start_time=4')
+  })
 })

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

@@ -8,6 +8,6 @@ describe('YouTubeEmbedBackground.svelte', () => {
     const { container } = render(YouTubeEmbedBackground, { embeddable_url: 'youtube.com/watch?v=abc' })
 
     // @ts-ignore
-    expect(container.querySelector('iframe').src).toBe('https://video.playpilot.net/?video_id=abc&color=fa548a&muted=true&loop=true&captions=false&controls=&autoplay=true&playsinline=true')
+    expect(container.querySelector('iframe').src).toBe('https://video.playpilot.net/?video_id=abc&color=fa548a&muted=true&loop=true&captions=false&controls=&start_time=0&autoplay=true&playsinline=true')
   })
 })

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

@@ -8,7 +8,7 @@ describe('YouTubeEmbedOverlay.svelte', () => {
     const { container } = render(YouTubeEmbedOverlay, { embeddable_url: 'youtube.com/watch?v=abc', onclose: () => null })
 
     // @ts-ignore
-    expect(container.querySelector('iframe').src).toBe('https://video.playpilot.net/?video_id=abc&color=fa548a&muted=false&loop=false&captions=false&controls=current-time,fullscreen,mute,play,progress&autoplay=true&playsinline=true')
+    expect(container.querySelector('iframe').src).toBe('https://video.playpilot.net/?video_id=abc&color=fa548a&muted=false&loop=false&captions=false&controls=current-time,fullscreen,mute,play,progress&start_time=0&autoplay=true&playsinline=true')
   })
 
   it('Should fire given onclose function on click of close button and backdrop', async () => {