@playpilot/tpi 8.23.0-beta.7 → 8.23.1

package/events.md

@@ -126,6 +126,7 @@ Event | Action | Info | Payload
 `venus_title_rail_modal_view` | _Fires any time a title is clicked in a rail, opening the rail modal_ | | `rail` (heading key of the rail)
 `venus_title_rail_expand_click` | _Fires any time a title is expanded in a rail directly via a click_ | Does not fire when a title opens automatically on load or navigate | `Title`, `rail` (heading key of the rail)
 `venus_title_rail_set_index` | _Fires when navigating in the titles rail modal, either via arrows, swipe, or clicking titles_ | | `Title`, `index` (index of the new position of the slider)
+`venus_title_reel_set_index` | _Fires when navigating in the titles reel modal, swipe, or clicking titles_ | | `Title`, `index` (index of the new position of the slider)
 `venus_navigate` | _Fires when navigating on the explore page_ | Does not fire on initial load | `route` (the key of the given route)
 `venus_any_click` | _Fires on any click anywhere_ | | `selector` (parent > child selector of the clicked element), `text` (direct text content of the clicked element, limited to 30 characters)
 `venus_scroll_distance` | _Fires on increments of scroll distance_ | 25%, 50%, 75%, 100% | `scroll_percentage` (percentage of the explore element the user has seen)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.23.0-beta.7",
+	"version": "8.23.1",
 	"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/enums/TrackingEvent.ts

@@ -79,6 +79,7 @@ export const TrackingEvent = {
   ExploreTitleRailModalView: 'venus_title_rail_modal_view',
   ExploreTitleRailExpandClick: 'venus_title_rail_expand_click',
   ExploreTitleRailSetIndex: 'venus_title_rail_set_index',
+  ExploreTitleReelSetIndex: 'venus_title_reel_set_index',
   ExploreNavigate: 'venus_navigate',
   ExploreAnyClick: 'venus_any_click',
   ExploreScrollDistance: 'venus_scroll_distance',

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

@@ -3,6 +3,8 @@
   import { onMount } from 'svelte'
   import { heading } from '$lib/actions/heading'
   import { t } from '$lib/localization'
+  import { track } from '$lib/tracking'
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import TinySlider from 'svelte-tiny-slider'
   import Modal from './Modal.svelte'
   import TitleBackground from '../TitleBackground.svelte'
@@ -15,9 +17,10 @@
 
   interface Props {
     titles: TitleData[],
+    onclose?: () => void
   }
 
-  const { titles }: Props = $props()
+  const { titles, onclose = () => null }: Props = $props()
 
   let interval: ReturnType<typeof setInterval> | null = null
 
@@ -29,6 +32,11 @@
     }
   })
 
+  function onchange(index: number): void {
+    pauseAndPlay(index)
+    track(TrackingEvent.ExploreTitleReelSetIndex, titles[index], { index })
+  }
+
   function pauseAndPlay(index: number): void {
     ;[titles[index - 1], titles[index + 1]].forEach(title => {
       window.dispatchEvent(new CustomEvent('pauseembed', { detail: title?.embeddable_url } ))
@@ -49,7 +57,7 @@
   <Modal>
     {#snippet dialog()}
       <div class="slider">
-        <TinySlider vertical threshold={100} moveThreshold={10} onchange={pauseAndPlay}>
+        <TinySlider vertical threshold={50} moveThreshold={10} {onchange}>
           {#snippet children({ currentIndex, setIndex })}
             {#each titles as title, index}
               <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -64,7 +72,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>
 
@@ -90,14 +100,14 @@
         </TinySlider>
       </div>
 
-      <ModalCloseOverlay label={t('Explore All Movies And Shows')} />
+      <ModalCloseOverlay {onclose} label={t('Explore All Movies And Shows')} />
     {/snippet}
   </Modal>
 </div>
 
 <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 +163,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 +184,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/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', () => {