@playpilot/tpi 8.34.1 → 8.34.3

package/package.json

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

package/src/lib/enums/SplitTest.ts

@@ -4,9 +4,4 @@ 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/modal.ts

@@ -11,9 +11,8 @@ import { playFallbackViewTransition } from './viewTransition'
 import { destroyLinkPopover } from './popover'
 import { prefersReducedMotion } from 'svelte/motion'
 import TitlesRailModal from '../routes/components/Modals/TitlesRailModal.svelte'
-import TitlesReelModal from '../routes/components/Modals/TitlesReelModal.svelte'
 
-export type ModalType = 'title' | 'participant' | 'titles-rail' | 'titles-reel'
+export type ModalType = 'title' | 'participant' | 'titles-rail'
 
 type Modal = {
   injection?: LinkInjection | null
@@ -55,7 +54,6 @@ function getModalComponentByType(
   { type: Modal['type'], target: Element, data: Modal['data'], props?: Record<string, any> }): ReturnType<typeof mount> {
   if (type === 'participant') return mount(ParticipantModal, { target, props: { participant: data as ParticipantData, ...props  } })
   if (type === 'titles-rail') return mount(TitlesRailModal, { target, props: { titles: data as TitleData[], ...props } })
-  if (type === 'titles-reel') return mount(TitlesReelModal, { target, props: { titles: data as TitleData[], ...props } })
   return mount(TitleModal, { target, props: { title: data as TitleData, ...props } })
 }
 

package/src/lib/scss/_mixins.scss

@@ -79,3 +79,9 @@
     @content;
   }
 }
+
+@mixin reduced-motion() {
+  @media (prefers-reduced-motion: "reduce") {
+    @content;
+  }
+}

package/src/routes/components/Explore/Filter/Dropdown.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { scale } from 'svelte/transition'
   import { tick, type Snippet } from 'svelte'
+  import { prefersReducedMotion } from 'svelte/motion'
 
   interface Props {
     button: Snippet<[{ toggle: (event: MouseEvent) => void }]>,
@@ -72,7 +73,7 @@
       style:--max-height={maxHeight ? `${maxHeight}px` : null}
       style:--offset={offset ? `${offset}px` : null}
       bind:this={contentElement}
-      transition:scale={{ start: 0.85, duration: 100 }}>
+      transition:scale={{ start: prefersReducedMotion.current ? 1 : 0.85, duration: 100 }}>
       {@render content()}
     </div>
   {/if}

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

@@ -21,17 +21,10 @@
 
     if (!sid) return
 
-    let type: ModalType = sid.startsWith('pr') ? 'participant' : 'title' // Sids with with `pr` for participants, `ti` for titles
+    let type: ModalType = sid.startsWith('pr') ? 'participant' : 'titles-rail' // Sids with with `pr` for participants, `ti` for titles
     let data: any = null
 
-    if (type === 'title') {
-      const isMobile = window.innerWidth < mobileBreakpoint
-      const isInReelSplitTest = isMobile && getSplitTestVariantName(SplitTest.Reels) === 'Reel'
-
-      if (isMobile) trackSplitTestView(SplitTest.Reels)
-
-      type = isMobile && isInReelSplitTest ? 'titles-reel' : 'titles-rail'
-
+    if (type === 'titles-rail') {
       const [title, railTitles] = (await Promise.allSettled([fetchTitleBySid(sid), fetchSimilarTitles({ sid } as unknown as TitleData)])).map((promise) =>
         promise.status === 'fulfilled' ? promise.value : null,
       )

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

@@ -1,9 +1,10 @@
 <script lang="ts">
   import { onMount, type Snippet } from 'svelte'
-  import TinySlider from 'svelte-tiny-slider'
+  import { prefersReducedMotion } from 'svelte/motion'
   import { fade } from 'svelte/transition'
   import { t } from '$lib/localization'
   import { getFirstAdOfType } from '$lib/api/ads'
+  import TinySlider from 'svelte-tiny-slider'
   import Modal from './Modal.svelte'
   import IconArrow from '../Icons/IconArrow.svelte'
   import ModalCloseOverlay from './ModalCloseOverlay.svelte'
@@ -19,10 +20,10 @@
 
   const { items, initialIndex = 0, onchange = () => null, onclose = () => null, each, ...restProps }: Props = $props()
 
-  const transitionDuration = 300
 
   let slider: TinySlider
   let initialized = $state(false)
+  let transitionDuration = $state(prefersReducedMotion.current ? 0 : 300)
   let availableHeight: number | null = $state(null)
   let element: HTMLElement | null = $state(null)
   let displayAd = $state(getFirstAdOfType('card'))
@@ -140,6 +141,10 @@
     width: $size;
     transition: opacity var(--transition-duration), transform var(--transition-duration);
 
+    @include reduced-motion {
+      transition: opacity 500ms;
+    }
+
     &.active {
       transform: none;
       opacity: 1;

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

@@ -3,6 +3,7 @@
   import TinySlider from 'svelte-tiny-slider'
   import IconArrow from '../Icons/IconArrow.svelte'
   import { heading as _heading } from '$lib/actions/heading'
+  import { prefersReducedMotion } from 'svelte/motion'
 
   interface Props {
     heading?: string
@@ -28,7 +29,7 @@
 {/if}
 
 <div class="rail">
-  <TinySlider bind:this={slider} {onchange} {onresize} bind:shown allowWheel>
+  <TinySlider bind:this={slider} {onchange} {onresize} transitionDuration={prefersReducedMotion.current ? 0 : 300} bind:shown allowWheel>
     {@render children()}
 
     {#snippet controls({ setIndex, currentIndex, reachedEnd })}

package/src/routes/components/RoundButton.svelte

@@ -35,7 +35,7 @@
     &:hover {
       filter: brightness(1.2);
       transform: scale(1.05);
-      outline: 1px solid theme(button-hover-border-color, text-color-alt);
+      outline: 2px solid theme(button-hover-border-color, text-color-alt);
     }
   }
 </style>

package/src/routes/components/YouTubeEmbed.svelte

@@ -184,7 +184,7 @@
     color: white;
 
     &:hover {
-      outline: 1px solid white;
+      outline: 2px solid white;
       transform: scale(1.1);
     }
 

package/src/routes/components/YouTubeEmbedOverlay.svelte

@@ -2,6 +2,7 @@
   import { fade } from 'svelte/transition'
   import IconClose from './Icons/IconClose.svelte'
   import YouTubeEmbed from './YouTubeEmbed.svelte'
+  import RoundButton from './RoundButton.svelte'
 
   interface Props {
     embeddable_url: string,
@@ -24,9 +25,11 @@
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div class="backdrop" onclick={onclose} data-testid="backdrop"></div>
 
-  <button class="close" onclick={onclose} aria-label="Close">
-    <IconClose size={24} />
-  </button>
+  <div class="close">
+    <RoundButton size="42px" onclick={onclose} aria-label="Close">
+      <IconClose size={24} />
+    </RoundButton>
+  </div>
 </div>
 
 <style lang="scss">
@@ -71,24 +74,11 @@
   }
 
   .close {
-    appearance: none;
+    --playpilot-button-background: transparent;
+    --playpilot-button-text-color: white;
     z-index: 1;
     position: fixed;
-    top: margin(2);
-    right: margin(2);
-    padding: 0;
-    margin: 0;
-    border: 0;
-    background: transparent;
-    color: white;
-    cursor: pointer;
-
-    &:hover {
-      transform: scale(1.1);
-    }
-
-    &:active {
-      transform: scale(1);
-    }
+    top: margin(1);
+    right: margin(1);
   }
 </style>

package/src/routes/elements/+page.svelte

@@ -97,16 +97,6 @@
       <button onclick={() => openModal({ type: 'participant', data: participants[0] })}>Show participant modal</button>
     </div>
   </div>
-
-  <div>
-    <h3>TitlesReelModal.svelte</h3>
-
-    {#await fetchSimilarTitles(title) then titles}
-      <div class="item">
-        <button onclick={() => openModal({ type: 'titles-reel', data: titles })}>Show titles reel modal</button>
-      </div>
-    {/await}
-  </div>
 </div>
 
 <h2>Title elements</h2>

package/vite.config.js

@@ -1,42 +1,43 @@
-import path from 'path'
-import * as dotenv from 'dotenv'
-import { defineConfig } from 'vitest/config'
-import { sveltekit } from '@sveltejs/kit/vite'
-import packageJson from './package.json'
-
-dotenv.config({ path: '.env' })
-
-export default defineConfig(() => ({
-  plugins: [
-    sveltekit(),
-  ],
-
-  server: {
-    port: 3000,
-  },
-
-  test: {
-    environment: 'happy-dom',
-    environmentOptions: {
-      happyDOM: {
-        settings: {
-          disableJavaScriptFileLoading: true,
-        },
-      },
-    },
-    include: ['src/**/*.{test,spec}.{js,ts}'],
-    setupFiles: ['src/tests/setup.js'],
-  },
-
-  resolve: {
-    conditions: process.env.VITEST ? ['browser'] : [],
-    alias: {
-      '$lib': path.resolve(__dirname, './src/lib'),
-    },
-  },
-
-  define: {
-    __SCRIPT_VERSION__: JSON.stringify(packageJson.version),
-    __IS_EDITORIAL_SCRIPT__: true,
-  },
-}))
+import path from 'path'
+import * as dotenv from 'dotenv'
+import { defineConfig } from 'vitest/config'
+import { sveltekit } from '@sveltejs/kit/vite'
+import packageJson from './package.json'
+
+dotenv.config({ path: '.env' })
+
+export default defineConfig(() => ({
+  plugins: [
+    sveltekit(),
+  ],
+
+  server: {
+    port: 3000,
+    allowedHosts: ['engage-moderate-happy-davis.trycloudflare.com'],
+  },
+
+  test: {
+    environment: 'happy-dom',
+    environmentOptions: {
+      happyDOM: {
+        settings: {
+          disableJavaScriptFileLoading: true,
+        },
+      },
+    },
+    include: ['src/**/*.{test,spec}.{js,ts}'],
+    setupFiles: ['src/tests/setup.js'],
+  },
+
+  resolve: {
+    conditions: process.env.VITEST ? ['browser'] : [],
+    alias: {
+      '$lib': path.resolve(__dirname, './src/lib'),
+    },
+  },
+
+  define: {
+    __SCRIPT_VERSION__: JSON.stringify(packageJson.version),
+    __IS_EDITORIAL_SCRIPT__: true,
+  },
+}))