@playpilot/tpi 5.4.0 → 5.5.0

package/events.md

@@ -60,3 +60,9 @@ Event | Action | Info | Payload
 `ali_manual_report` | _Fires only through manual action when reporting issues with an injection via the Editor._ | | `Title`, `report_reason`, `sid` (of injection), `title` (of injection), `sentence`, `failed` (true or false), `failed_message` (reason for failure as given in the editor), `manual` (true or false)
 `ali_editor_error` | _Fires whenever an error occurs within the Editor._ | | `Title`, `phrase`, `sentence`
 `ali_injection_error` | _Fires whenever an error occurs during injection_ | This includes fetching the injections as well as actually injecting itself. Does not include fetching of the config object. | `message` (error message as given by the browser)
+
+### Split Testing
+Event | Action | Info | Payload
+--- | --- | --- | ---
+`ali_split_test_view` | _Should be fired for any active split test_ | | `key`, `variant` (0 or 1)
+`ali_split_test_action` | _Should be fired for any assertion in split tests_ | | `key` (matches the key of `ali_split_test_view`), `variant` (0 or 1), `action`

package/package.json

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

package/src/lib/data/translations.ts

@@ -86,6 +86,11 @@ export const translations = {
     [Language.Swedish]: 'Hyra',
     [Language.Danish]: 'Lej eller køb',
   },
+  'Watch': {
+    [Language.English]: 'Watch',
+    [Language.Swedish]: 'Se',
+    [Language.Danish]: 'Se',
+  },
 
   // Genres
   'All': {

package/src/lib/enums/TrackingEvent.ts

@@ -25,4 +25,7 @@ export const TrackingEvent = Object.freeze({
   ManualReport: 'ali_manual_report',
   EditorError: 'ali_editor_error',
   InjectionError: 'ali_injection_error',
+
+  SplitTestView: 'ali_split_test_view',
+  SplitTestAction: 'ali_split_test_action'
 })

package/src/lib/splitTest.ts

@@ -0,0 +1,40 @@
+import { TrackingEvent } from "./enums/TrackingEvent"
+import { track } from "./tracking"
+
+/**
+ * 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.
+ */
+export function getSplitTestIdentifier(key: string): number {
+  const windowIdentifier = window.PlayPilotLinkInjections?.split_test_identifiers?.[key]
+  if (windowIdentifier) return windowIdentifier
+
+  if (!window.PlayPilotLinkInjections?.split_test_identifiers) window.PlayPilotLinkInjections.split_test_identifiers = {}
+
+  const randomIdentifier = Math.random()
+  window.PlayPilotLinkInjections.split_test_identifiers[key] = randomIdentifier
+
+  return randomIdentifier
+}
+
+/**
+ * Split tests are either on or off with a 50/50 split. That's all we need for now.
+ */
+export function isInSplitTest(key: string): boolean {
+  const identifier = getSplitTestIdentifier(key)
+  const isInSplitTest = identifier > 0.5
+
+  return isInSplitTest
+}
+
+export function trackSplitTestView(key: string): void {
+  const variant = isInSplitTest(key) ? 1 : 0
+
+  track(TrackingEvent.SplitTestView, null, { key, variant })
+}
+
+export function trackSplitTestAction(key: string, action: string): void {
+  const variant = isInSplitTest(key) ? 1 : 0
+
+  track(TrackingEvent.SplitTestAction, null, { key, variant, action })
+}

package/src/lib/tracking.ts

@@ -10,7 +10,7 @@ const baseUrl = 'https://insights.playpilot.net'
  * @param [title] Title related to the event
  * @param [payload] Any data that will be included with the event
  */
-export async function track(event: string, title: TitleData | null = null, payload: Record<string, string | string[] | number | null | undefined> = {}): Promise<void> {
+export async function track(event: string, title: TitleData | null = null, payload: Record<string, string | string[] | number | boolean | null | undefined> = {}): Promise<void> {
   const headers = new Headers({ 'Content-Type': 'application/json' })
 
   if (title) {

package/src/lib/types/script.d.ts

@@ -9,4 +9,5 @@ export type ScriptConfig = {
   language?: string | null
   last_successful_fetch?: LinkInjectionResponse | null
   tracked_events?: { event: string, payload: Record<string, any> }[]
+  split_test_identifiers?: Record<string, number>
 }

package/src/main.ts

@@ -14,6 +14,7 @@ window.PlayPilotLinkInjections = {
   domain_sid: null,
   last_successful_fetch: null,
   tracked_events: [],
+  split_test_identifiers: {},
   app: null,
 
   initialize(config = { token: '', selector: '', after_article_selector: '', after_article_insert_position: '', language: null, organization_sid: null, domain_sid: null, editorial_token: '' }): void {
@@ -81,6 +82,10 @@ window.PlayPilotLinkInjections = {
       console.groupCollapsed('Tracked events')
         console.log(this.tracked_events)
       console.groupEnd()
+
+      console.groupCollapsed('Split tests')
+        console.log(this.split_test_identifiers)
+      console.groupEnd()
     console.groupEnd()
   }
 }

package/src/routes/+page.svelte

@@ -7,9 +7,10 @@
   import { isCrawler } from '$lib/crawler'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { authorize, getAuthToken, isEditorialModeEnabled, removeAuthCookie, setEditorialParamInUrl } from '$lib/auth'
+  import { trackSplitTestView } from '$lib/splitTest'
+  import type { LinkInjectionResponse, LinkInjection, LinkInjectionTypes } from '$lib/types/injection'
   import Editor from './components/Editorial/Editor.svelte'
   import EditorTrigger from './components/Editorial/EditorTrigger.svelte'
-  import type { LinkInjectionResponse, LinkInjection, LinkInjectionTypes } from '$lib/types/injection'
   import Alert from './components/Editorial/Alert.svelte'
   import TrackingPixels from './components/TrackingPixels.svelte'
 
@@ -40,6 +41,8 @@
     (async () => {
       await initialize()
       track(TrackingEvent.ArticlePageView)
+
+      trackSplitTestView('initial_test')
     })()
 
     return () => clearLinkInjections()

package/src/routes/components/Playlinks.svelte

@@ -6,20 +6,22 @@
   import type { PlaylinkData } from '$lib/types/playlink'
   import type { TitleData } from '$lib/types/title'
   import { heading } from '$lib/actions/heading'
-  import IconContinue from './Icons/IconContinue.svelte'
   import { getContext } from 'svelte'
   import { removeImageUrlPrefix } from '$lib/image'
 
   interface Props {
     playlinks: PlaylinkData[]
     title: TitleData
-    list?: boolean
   }
 
-  const { playlinks, title, list = false }: Props = $props()
+  const { playlinks, title }: Props = $props()
 
   const isModal = getContext('scope') === 'modal'
 
+  let outerWidth = $state(0)
+
+  const list = $derived(outerWidth < 500)
+
   // Remove any playlinks without logos, as these are likely sub providers.
   const filteredPlaylinks = $derived(playlinks.filter(playlink => !!playlink.logo_url))
   const mergedPlaylink = $derived(mergePlaylinks(filteredPlaylinks))
@@ -45,21 +47,23 @@
   </div>
 {/if}
 
-<div class="playlinks" class:list>
+<div class="playlinks" class:list bind:clientWidth={outerWidth}>
   {#each mergedPlaylink as { name, url, logo_url, highlighted, cta_text, extra_info: { category } }}
     <a href={url} target="_blank" class="playlink" class:highlighted={highlighted && cta_text} onclick={() => onclick(name)} data-playlink={name} rel="sponsored">
-      <img src={removeImageUrlPrefix(logo_url)} alt="" height="32" width="32" />
+      <div class="playlink-content">
+        <img src={removeImageUrlPrefix(logo_url)} alt="" height="36" width="36" />
 
-      <div>
         <span class="name">{name}</span>
-        <div class="category">{cta_text || categoryStrings[category] || t('Stream')}</div>
-      </div>
+        <span class="category">{categoryStrings[category] || t('Stream')}</span>
 
-      {#if list}
-        <div class="arrow">
-          <IconContinue />
+        {#if cta_text}
+          <span class="cta">{cta_text}</span>
+        {/if}
+
+        <div class="action">
+          {t('Watch')}
         </div>
-      {/if}
+      </div>
     </a>
   {/each}
 
@@ -71,16 +75,13 @@
 </div>
 
 <style lang="scss">
+  $image-size: margin(2.25);
+
   img {
-    --size: #{margin(2)};
-    height: var(--size);
-    width: var(--size);
+    height: $image-size;
+    width: $image-size;
     border-radius: margin(0.5);
     background: rgba(0, 0, 0, 0.25);
-
-    @media (min-width: 640px) {
-      --size: #{margin(2.5)};
-    }
   }
 
   .heading {
@@ -94,40 +95,35 @@
 
   .playlinks {
     box-sizing: border-box;
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(margin(15), 1fr));
     gap: margin(0.5);
     width: calc(100% + margin(2));
     padding: margin(0.5) margin(1);
     margin: 0 margin(-1);
-    overflow: auto;
-    scrollbar-width: none;
-  }
 
-  .playlinks::-webkit-scrollbar {
-    display: none;
+    &.list {
+      grid-template-columns: 1fr;
+    }
   }
 
-  .list {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(margin(15), 1fr));
 
-    img {
-      @media (min-width: 640px) {
-        --size: #{margin(2)};
-      }
+  @keyframes sheen {
+    0%, 20%, 60%, 80.01%, 100% {
+      background-position: -100% 0;
+    }
+
+    80% {
+      background-position: 100% 0;
     }
   }
 
   .playlink {
     position: relative;
-    display: flex;
-    align-items: center;
-    gap: margin(0.75);
-    padding: margin(0.75);
     background: var(--playpilot-playlink-background, var(--playpilot-lighter));
     box-shadow: var(--playpilot-playlink-shadow, var(--playpilot-shadow));
     border-radius: var(--playpilot-playlink-border-radius, margin(0.5));
-    color: var(--playpilot-playlink-text-color, var(--playpilot-text-color-alt)) !important;
+    color: var(--playpilot-playlink-text-color, var(--playpilot-text-color)) !important;
     font-weight: var(--playpilot-playlink-font-weight, inherit);
     font-style: var(--playpilot-playlink-font-style, normal) !important;
     text-decoration: none !important;
@@ -143,6 +139,12 @@
     }
 
     &.highlighted {
+      grid-column: span 2;
+
+      .list & {
+        grid-column: 1;
+      }
+
       &::before {
         content: "";
         z-index: 1;
@@ -153,35 +155,81 @@
         bottom: 0;
         left: 0;
         border-radius: inherit;
-        box-shadow: inset 0 0 0 2px currentColor;
+        background: linear-gradient(to left, currentColor 20%, transparent 50%, currentColor 80%);
+        background-size: 200% 100%;
+        background-position: -100% 0;
         opacity: 0.35;
         pointer-events: none;
+
+        @media (prefers-reduced-motion: no-preference) {
+          animation: sheen 4000ms ease-in-out infinite;
+        }
+      }
+
+      &::after {
+        content: "";
+        z-index: 2;
+        display: block;
+        position: absolute;
+        top: 2px;
+        right: 2px;
+        bottom: 2px;
+        left: 2px;
+        border-radius: inherit;
+        background: var(--playpilot-playlink-background, var(--playpilot-lighter));
       }
     }
 
     img {
+      grid-area: image;
       margin: 0;
     }
+  }
+
+  .playlink-content {
+    position: relative;
+    z-index: 5;
+    display: grid;
+    grid-template-areas: "image name action" "image category action";
+    grid-template-columns: $image-size auto margin(4);
+    align-items: center;
+    gap: 0 margin(0.75);
+    padding: margin(0.75);
 
-    .list & {
-      padding: margin(0.5);
-      gap: margin(0.5);
+    .highlighted & {
+      grid-template-areas: "image name action" "image category action" "image cta action";
+      gap: margin(0.25) margin(0.75);
     }
   }
 
   .name {
-    font-weight: var(--playpilot-playlink-font-weight, inherit);
+    grid-area: name;
+    width: 100%;
+    overflow: hidden;
+    font-weight: var(--playpilot-playlink-font-weight, 500);
     font-family: var(--playpilot-playlink-font-family, inherit);
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .category {
-    margin-top: var(--playpilot-playlinks-category-margin, margin(0.5));
+    grid-area: category;
+    width: 100%;
     font-size: var(--playpilot-playlinks-category-font-size, margin(0.625));
-    color: var(--playpilot-playlink-category-text-color, var(--playpilot-text-color));
+    color: var(--playpilot-playlink-category-text-color, var(--playpilot-text-color-alt));
     font-weight: var(--playpilot-playlink-category-font-weight, inherit);
     font-family: var(--playpilot-playlink-category-font-family, inherit);
   }
 
+  .cta {
+    grid-area: cta;
+    width: 100%;
+    font-size: var(--playpilot-playlinks-cta-font-size, var(--playpilot-playlinks-category-font-size, margin(0.625)));
+    color: var(--playpilot-playlink-cta-text-color, var(--playpilot-playlink-category-text-color, var(--playpilot-text-color)));
+    font-weight: var(--playpilot-playlink-cta-font-weight, var(--playpilot-playlink-category-font-weight, inherit));
+    font-family: var(--playpilot-playlink-cta-font-family, var(--playpilot-playlink-category-font-family, inherit));
+  }
+
   .disclaimer {
     margin-top: var(--playpilot-playlinks-disclaimer-margin-top, margin(0.5));
     opacity: var(--playpilot-playlinks-disclaimer-opacity, 0.65);
@@ -205,9 +253,13 @@
     line-height: 1.35;
   }
 
-  .arrow {
-    display: flex;
+  .action {
+    grid-area: action;
     margin-left: auto;
-    padding: 0 margin(0.5);
+    padding: margin(0.5);
+    font-weight: var(--playpilot-playlinks-action-font-weight, 500);
+    color: var(--playpilot-playlinks-action-text-color, var(--playpilot-text-color));
+    border: var(--playpilot-playlinks-action-border, 1px solid currentColor);
+    border-radius: var(--playpilot-playlinks-action-border-radius, margin(2));
   }
 </style>

package/src/routes/components/Popover.svelte

@@ -91,7 +91,7 @@
     border-radius: var(--playpilot-popover-border-radius, margin(1));
     background: var(--playpilot-popover-background, var(--playpilot-light));
     box-shadow: var(--playpilot-popover-shadow, var(--playpilot-shadow-large));
-    max-height: min(var(--max-height), margin(35));
+    max-height: min(var(--max-height), margin(36));
     scrollbar-width: thin;
     overflow-y: overlay;
     overflow-x: hidden;

package/src/routes/components/Title.svelte

@@ -54,7 +54,7 @@
   </div>
 
   <div class="main">
-    <Playlinks playlinks={title.providers} {title} list />
+    <Playlinks playlinks={title.providers} {title} />
 
     {#if !small}
       <Description text={title.description} blurb={title.blurb} />

package/src/routes/components/TitleModal.svelte

@@ -2,6 +2,7 @@
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { track } from '$lib/tracking'
   import type { TitleData } from '$lib/types/title'
+  import { trackSplitTestAction } from '$lib/splitTest'
   import { onMount } from 'svelte'
   import Modal from './Modal.svelte'
   import Title from './Title.svelte'
@@ -19,6 +20,9 @@
 
   onMount(() => {
     const openTimestamp = Date.now()
+
+    trackSplitTestAction('initial_test', 'modal')
+
     return () => track(TrackingEvent.TitleModalClose, title, { time_spent: Date.now() - openTimestamp })
   })
 

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

@@ -0,0 +1,88 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { getSplitTestIdentifier, isInSplitTest, trackSplitTestAction, trackSplitTestView } from '$lib/splitTest'
+import { track } from '$lib/tracking'
+import { TrackingEvent } from '$lib/enums/TrackingEvent'
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+describe('$lib/splitTest', () => {
+  describe('getSplitTestIdentifier', () => {
+    afterEach(() => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = {}
+
+      vi.resetAllMocks()
+    })
+
+    it('Should set window object with given key if window object was not set to begin with', () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections = {}
+
+      const value = getSplitTestIdentifier('Some key')
+
+      expect(window.PlayPilotLinkInjections.split_test_identifiers).toEqual({ 'Some key': value })
+      // @ts-ignore
+      expect(value).toBe(window.PlayPilotLinkInjections.split_test_identifiers['Some key'])
+    })
+
+    it('Should return value as stored in the window object', () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections.split_test_identifiers = {}
+      window.PlayPilotLinkInjections.split_test_identifiers['Some key'] = 0.5
+
+      expect(getSplitTestIdentifier('Some key')).toBe(0.5)
+    })
+
+    it('Should set separate value for different keys', () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections.split_test_identifiers = {}
+
+      getSplitTestIdentifier('Some key')
+      getSplitTestIdentifier('Some other key')
+
+      expect(window.PlayPilotLinkInjections.split_test_identifiers).toEqual({
+        'Some key': expect.any(Number),
+        'Some other key': expect.any(Number),
+      })
+    })
+  })
+
+  describe('isInSplitTest', () => {
+    it('Should return true if stored value is higher than 0.5', () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections.split_test_identifiers = {}
+      window.PlayPilotLinkInjections.split_test_identifiers['Some key'] = 0.75
+
+      expect(isInSplitTest('Some key')).toBe(true)
+    })
+
+    it('Should return false if stored value is lower than 0.5', () => {
+      // @ts-ignore
+      window.PlayPilotLinkInjections.split_test_identifiers = {}
+      window.PlayPilotLinkInjections.split_test_identifiers['Some key'] = 0.25
+
+      expect(isInSplitTest('Some key')).toBe(false)
+    })
+  })
+
+  describe('trackSplitTestView', () => {
+    it('Should track view event with the given key', () => {
+      trackSplitTestView('Some key')
+
+      const variant = isInSplitTest('Some key') ? 1 : 0
+
+      expect(track).toHaveBeenCalledWith(TrackingEvent.SplitTestView, null, { key: 'Some key', variant })
+    })
+  })
+
+  describe('trackSplitTestAction', () => {
+    it('Should track action event with the given key and action', () => {
+      trackSplitTestAction('Some key', 'Some action')
+      const variant = isInSplitTest('Some key') ? 1 : 0
+
+      expect(track).toHaveBeenCalledWith(TrackingEvent.SplitTestAction, null, { key: 'Some key', variant, action: 'Some action' })
+    })
+  })
+})

package/src/tests/routes/+page.test.js

@@ -57,6 +57,10 @@ vi.mock('$lib/url', () => ({
   getFullUrlPath: vi.fn(),
 }))
 
+vi.mock('$lib/splitTest', () => ({
+  trackSplitTestView: vi.fn(),
+}))
+
 describe('$routes/+page.svelte', () => {
   beforeEach(() => {
     document.body.innerHTML = ''

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

@@ -104,19 +104,7 @@ describe('Playlinks.svelte', () => {
     expect(getAllByText('Some playlink')).toHaveLength(1)
   })
 
-  it('Should not have list class by default', () => {
-    const { container } = render(Playlinks, { playlinks: [], title })
-
-    expect(container.querySelector('.list')).not.toBeTruthy()
-  })
-
-  it('Should have list class when prop is given', () => {
-    const { container } = render(Playlinks, { playlinks: [], title, list: true })
-
-    expect(container.querySelector('.list')).toBeTruthy()
-  })
-
-  it('Should highlight and replace category text for playlinks that have highlighted as true', () => {
+  it('Should highlight and show category text for playlinks that have highlighted as true', () => {
     const playlinks = [
       { name: 'Some playlink', logo_url: 'logo', extra_info: { category: 'SVOD' } },
       { name: 'Some other playlink', logo_url: 'logo', highlighted: true, cta_text: '', extra_info: { category: 'BUY' } },