@playpilot/tpi 8.23.0-beta.6 → 8.23.0

package/package.json

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

package/src/lib/enums/SplitTest.ts

@@ -4,4 +4,9 @@ export const SplitTest = {
     numberOfVariants: 2,
     variantNames: ['Separated', 'Inline'] as string[],
   },
+  Reels: {
+    key: 'reels',
+    numberOfVariants: 2,
+    variantNames: ['Default', 'Reel'] as string[],
+  },
 } as const

package/src/lib/splitTest.ts

@@ -8,6 +8,8 @@ type SplitTest = {
   variantNames?: string[]
 }
 
+export const sessionStoragePrefix = 'playpilot_split_test_'
+
 /**
  * Each split test uses a different split test identifier so a user can be part of one, multiple, or none, tests.
  * The identifier is saved on the window object so that it is consistent across this session.
@@ -20,10 +22,19 @@ export function getSplitTestIdentifier({ key }: SplitTest): number {
 
   if (!window.PlayPilotLinkInjections?.split_test_identifiers) window.PlayPilotLinkInjections.split_test_identifiers = {}
 
-  const randomIdentifier = Math.random()
-  window.PlayPilotLinkInjections.split_test_identifiers[key] = randomIdentifier
+  let storedIdentifier = sessionStorage.getItem(sessionStoragePrefix + key)
+
+  if (!storedIdentifier) {
+    const randomIdentifier = Math.random().toString()
+    sessionStorage.setItem(sessionStoragePrefix + key, randomIdentifier)
+    storedIdentifier = randomIdentifier
+  }
+
+  const parsed = parseFloat(storedIdentifier!)
+
+  window.PlayPilotLinkInjections.split_test_identifiers[key] = parsed
 
-  return randomIdentifier
+  return parsed
 }
 
 export function getSplitTestVariantIndex(test: SplitTest): number {

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

@@ -1,7 +1,9 @@
 <script lang="ts">
   import { fetchSimilarTitles, fetchTitleBySid } from '$lib/api/titles'
   import { mobileBreakpoint } from '$lib/constants'
+  import { SplitTest } from '$lib/enums/SplitTest'
   import { openModal } from '$lib/modal'
+  import { getSplitTestVariantName, trackSplitTestView } from '$lib/splitTest'
   import type { TitleData } from '$lib/types/title'
 
   interface Props {
@@ -15,10 +17,15 @@
   async function openModalViaRoute(): Promise<void> {
     const currentUrl = new URL(document.location.toString())
     const sid = currentUrl.searchParams.get('sid')
-    const type = window.innerWidth > mobileBreakpoint ? 'titles-rail' : 'titles-reel'
 
     if (!sid) return
 
+    const isMobile = window.innerWidth < mobileBreakpoint
+    const isInReelSplitTest = isMobile && getSplitTestVariantName(SplitTest.Reels) === 'Reel'
+    const type = isMobile && isInReelSplitTest ? 'titles-reel' : 'titles-rail'
+
+    if (isMobile) trackSplitTestView(SplitTest.Reels)
+
     try {
       const [title, railTitles] = (await Promise.allSettled([
         fetchTitleBySid(sid),

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

@@ -49,7 +49,7 @@
   <Modal>
     {#snippet dialog()}
       <div class="slider">
-        <TinySlider vertical threshold={100} moveThreshold={10} onchange={pauseAndPlay}>
+        <TinySlider vertical threshold={50} moveThreshold={10} onchange={pauseAndPlay}>
           {#snippet children({ currentIndex, setIndex })}
             {#each titles as title, index}
               <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -64,7 +64,9 @@
                     </div>
 
                     <div class="details">
-                      <Description text={title.description!} blurb={title.blurb} limit={80} />
+                      {#if title.description}
+                        <Description text={title.description} blurb={title.blurb} limit={80} />
+                      {/if}
 
                       <div class="playlinks-heading" use:heading={3}>{t('Where To Stream Online')}</div>
 
@@ -97,7 +99,7 @@
 
 <style lang="scss">
   $modal-height: calc(100vh - margin(4.5));
-  $item-height: calc($modal-height - margin(7));
+  $item-height: calc($modal-height - margin(5));
 
   .reel {
     --playpilot-detail-background-height: #{$item-height};
@@ -153,13 +155,14 @@
   }
 
   .header {
-    position: relative;
     z-index: 2;
-    padding: theme(reel-item-padding, margin(2));
+    position: relative;
+    padding: theme(reel-item-padding, margin(1) margin(2) margin(2));
     font-size: theme(reel-header-font-size, font-size-small);
   }
 
   .heading {
+    padding-right: margin(1.5);
     margin-bottom: margin(0.5);
     color: theme(detail-title-text-color, text-color);
     font-family: theme(detail-title-font-family, inherit);
@@ -173,8 +176,20 @@
     z-index: 1;
     position: relative;
     padding: theme(reel-item-padding, margin(2));
-    background: linear-gradient(to bottom, transparent, theme(detail-background, light) 4rem);
     font-size: theme(detail-font-size, font-size-base);
+
+    &::before {
+      z-index: -1;
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: linear-gradient(to bottom, transparent, theme(detail-background, light) 4rem);
+      opacity: 0.85;
+    }
   }
 
   .playlinks-heading {

package/src/routes/components/YouTubeEmbed.svelte

@@ -11,12 +11,13 @@
     captions?: boolean
     autoplay?: boolean
     showMuteControls?: boolean
+    fallbackStartTime?: number
   }
 
-  const { embeddable_url = '', controls = [], muted = false, loop = false, captions = false, autoplay = true, showMuteControls = false }: Props = $props()
+  const { embeddable_url = '', controls = [], muted = false, loop = false, captions = false, autoplay = true, showMuteControls = false, fallbackStartTime = 0 }: Props = $props()
 
   const videoId = $derived(getVideoId(embeddable_url))
-  const startTime = $derived((window?.PlayPilotLinkInjections?.video_playtimes?.[videoId || ''] || 1) - 1)
+  const startTime = $derived((window?.PlayPilotLinkInjections?.video_playtimes?.[videoId || ''] || (fallbackStartTime + 1)) - 1)
   const color = window?.getComputedStyle(document.body).getPropertyValue('--playpilot-primary')?.replace('#', '') || 'fa548a'
 
   let iframe: HTMLIFrameElement | null = $state(null)

package/src/routes/components/YouTubeEmbedBackground.svelte

@@ -15,7 +15,7 @@
 </script>
 
 <div class="video-background" style="--height: {height}px; --width: {clientWidth}px;" bind:clientWidth bind:clientHeight data-testid="video-background">
-  <YouTubeEmbed {embeddable_url} {autoplay} muted loop showMuteControls />
+  <YouTubeEmbed {embeddable_url} {autoplay} fallbackStartTime={5} muted loop showMuteControls />
 </div>
 
 <style lang="scss">

package/src/tests/lib/splitTest.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, afterEach } from 'vitest'
-import { getSplitTestIdentifier, getSplitTestVariantIndex, getSplitTestVariantName, isInSplitTestVariant, trackSplitTestAction, trackSplitTestView } from '$lib/splitTest'
+import { getSplitTestIdentifier, getSplitTestVariantIndex, getSplitTestVariantName, isInSplitTestVariant, sessionStoragePrefix, trackSplitTestAction, trackSplitTestView } from '$lib/splitTest'
 import { track } from '$lib/tracking'
 import { TrackingEvent } from '$lib/enums/TrackingEvent'
 import { hasConsentedTo } from '$lib/consent'
@@ -28,7 +28,6 @@ describe('$lib/splitTest', () => {
   })
 
   describe('getSplitTestIdentifier', () => {
-
     it('Should set window object with given key if window object was not set to begin with', () => {
       // @ts-ignore
       window.PlayPilotLinkInjections = {}
@@ -66,6 +65,18 @@ describe('$lib/splitTest', () => {
 
       expect(getSplitTestIdentifier(splitTest)).toBe(0)
     })
+
+    it('Should store value in sessionStorage', () => {
+      getSplitTestIdentifier(splitTest)
+
+      expect(sessionStorage.getItem(sessionStoragePrefix + splitTest.key)).toBeTruthy()
+    })
+
+    it('Should use value stored in sessionStorage', () => {
+      sessionStorage.setItem(sessionStoragePrefix + splitTest.key, '0.2')
+
+      expect(getSplitTestIdentifier(splitTest)).toBe(0.2)
+    })
   })
 
   describe('isInSplitTestVariant', () => {

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

@@ -46,6 +46,12 @@ describe('YouTubeEmbed.svelte', () => {
     expect(/** @type {HTMLIFrameElement} */ (container.querySelector('iframe')).src).toContain('&autoplay=false')
   })
 
+  it('Should start at given fallbackStartTime', () => {
+    const { container } = render(YouTubeEmbed, { embeddable_url: 'youtube.com/watch?v=abc', fallbackStartTime: 8 })
+
+    expect(/** @type {HTMLIFrameElement} */ (container.querySelector('iframe')).src).toContain('&start_time=8')
+  })
+
   it('Should render error message if embeddable_url is invalid', () => {
     const { container, getByText } = render(YouTubeEmbed, { embeddable_url: '-' })
 

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=&start_time=0&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=5&autoplay=true&playsinline=true')
   })
 })