@playpilot/tpi 5.32.0-beta.3 → 5.32.0-beta.youtube.1

package/package.json

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

package/src/lib/data/translations.ts

@@ -61,11 +61,6 @@ export const translations = {
     [Language.Swedish]: 'minuter',
     [Language.Danish]: 'minutter',
   },
-  'Minutes Short': {
-    [Language.English]: 'min.',
-    [Language.Swedish]: 'min.',
-    [Language.Danish]: 'min.',
-  },
   'Type: movie': {
     [Language.English]: 'Movie',
     [Language.Swedish]: 'Film',
@@ -131,6 +126,11 @@ export const translations = {
     [Language.Swedish]: 'Liknande filmer och serier',
     [Language.Danish]: 'Lignende film og serier',
   },
+  'Watch Trailer': {
+    [Language.English]: 'Watch trailer',
+    [Language.Swedish]: 'Se trailer',
+    [Language.Danish]: 'Se trailer',
+  },
 
   // Genres
   'All': {

package/src/lib/enums/SplitTest.ts

@@ -9,9 +9,4 @@ export const SplitTest = {
     numberOfVariants: 2,
     variantNames: ['Image', 'Label'] as string[],
   },
-  InTextEngagement: {
-    key: 'in-text-engagement',
-    numberOfVariants: 4,
-    variantNames: ['Default', '(i) Icon', 'Providers', 'Highlight'] as string[]
-  }
 } as const

package/src/lib/fakeData.ts

@@ -38,6 +38,7 @@ export const title: TitleData = {
   standing_poster: 'https://img.playpilot.tech/6239ee86a58f11efb0b50a58a9feac02/src/img?optimizer=image&class=2by3x18',
   title: 'Dune: Prophecy',
   original_title: 'Dune: Prophecy',
+  embeddable_url: null,
 }
 
 export const linkInjections: LinkInjection[] = [{

package/src/lib/injection.ts

@@ -13,9 +13,6 @@ import { destroyAllModals, openModal } from './modal'
 import { track } from './tracking'
 import { TrackingEvent } from './enums/TrackingEvent'
 import InTextDisclaimer from '../routes/components/InTextDisclaimer.svelte'
-import { getSplitTestVariantName, trackSplitTestAction } from './splitTest'
-import { SplitTest } from './enums/SplitTest'
-import { mergePlaylinks } from './playlink'
 
 const keyDataAttribute = 'data-playpilot-injection-key'
 const keySelector = `[${keyDataAttribute}]`
@@ -200,6 +197,10 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
 
           const startIndex = match.index + leadingSpaces
           const endIndex = match.index + match.match.length - trailingSpaces
+
+          // Stop if the content already contains a link, which we identify soley by if the contain string contains a href attribute
+          if (element.innerHTML.slice(startIndex, endIndex).includes('href=')) continue
+
           element.innerHTML = replaceBetween(element.innerHTML, injectionElement.outerHTML, startIndex, endIndex)
 
           replacementIndex = match.index
@@ -310,33 +311,6 @@ function createLinkInjectionElement(injection: LinkInjection): { injectionElemen
   linkElement.target = '_blank'
   linkElement.rel = 'noopener nofollow noreferrer'
 
-  // Part of a split test, insert an absolute positioned (i) icon in the top right of links.
-  if (getSplitTestVariantName(SplitTest.InTextEngagement) === '(i) Icon') {
-    const iconElement = document.createElement('span')
-    iconElement.classList.add('playpilot-injection-info-icon')
-    iconElement.dataset.playpilotElement = 'true'
-
-    linkElement.insertAdjacentElement('beforeend', iconElement)
-  }
-
-  // Part of a split test, insert a list of max 3 provider icons after the link, these are inline and cause page shift.
-  if (getSplitTestVariantName(SplitTest.InTextEngagement) === 'Providers') {
-    const size = parseFloat(getComputedStyle(document.documentElement).fontSize) * 0.875 // 0.875 rem, 14 pixels if 1rem is 16 pixels
-
-    for (const provider of mergePlaylinks(injection.title_details!.providers).slice(0, 3)) {
-      const imageElement = document.createElement('img')
-      imageElement.loading = 'lazy'
-      imageElement.src = provider.logo_url
-      imageElement.alt = '' // Intentionally ignore the image or TTS would make a mess of the sentence
-      imageElement.width = size
-      imageElement.height = size
-      imageElement.dataset.playpilotElement = 'true'
-      imageElement.classList.add('playpilot-injection-provider-icon')
-
-      linkElement.insertAdjacentElement('beforeend', imageElement)
-    }
-  }
-
   injectionElement.insertAdjacentElement('beforeend', linkElement)
 
   return { injectionElement, linkElement }
@@ -452,8 +426,6 @@ function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
 
     event.preventDefault()
 
-    trackSplitTestAction(SplitTest.InTextEngagement, 'click')
-
     playFallbackViewTransition(() => {
       destroyLinkPopover(false)
       openModal({ event, injection, data: injection.title_details })
@@ -634,9 +606,6 @@ export function clearLinkInjection(key: string): void {
   const element: HTMLAnchorElement | null = document.querySelector(`[${keyDataAttribute}="${key}"]`)
   if (!element) return
 
-  const playpilotElements = element.querySelectorAll('[data-playpilot-element]')
-  playpilotElements.forEach(element => element.remove())
-
   const linkContent = element.querySelector('a')?.innerHTML
   element.outerHTML = linkContent || ''
 }

package/src/lib/scss/global.scss

@@ -11,45 +11,6 @@
   position: relative;
 }
 
-.playpilot-injection-info-icon {
-  position: relative;
-  display: inline-block;
-  height: 1em;
-
-  &::before {
-    content: "i";
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    top: -0.25em;
-    right: -1em;
-    width: 0.75em;
-    height: 0.75em;
-    border-radius: 50%;
-    box-shadow: 0 0 0 1px currentColor;
-    line-height: 1;
-    font-size: 0.65em;
-    text-align: center;
-  }
-
-  h1 &, h2 &, h3 &, h4 &, h5 &, h6 & {
-    display: none
-  }
-}
-
-.playpilot-injection-provider-icon {
-  display: inline-block;
-  margin-left: margin(0.25);
-  border-radius: 2px;
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0.25);
-  overflow: hidden;
-
-  h1 &, h2 &, h3 &, h4 &, h5 &, h6 & {
-    display: none
-  }
-}
-
 .playpilot-injection-highlight {
   outline: margin(0.25) solid var(--playpilot-primary) !important;
   outline-offset: margin(0.5) !important;

package/src/lib/text.ts

@@ -100,7 +100,8 @@ export function findSurroundingPhrases(parentNode: Node, startIndex: number, end
   if (!sentenceNode || !parentNode.textContent) return { before: '', after: '' }
 
   // Include the index of where the text is contained, as parentNode might start later within the sentenceNode
-  const parentNodeStartIndex = sentenceNode.innerText.indexOf(parentNode.textContent)
+  // Use 0 if no index was found. This happens when the sentenceNode and parentNode don't match
+  const parentNodeStartIndex = Math.max(sentenceNode.innerText.indexOf(parentNode.textContent), 0)
 
   const stringBefore = reverseString(sentenceNode.innerText.slice(0, startIndex + parentNodeStartIndex))
   const stringAfter = sentenceNode.innerText.slice(endIndex + parentNodeStartIndex)

package/src/lib/trailer.ts

@@ -0,0 +1,22 @@
+import { mount, unmount } from "svelte"
+import { getPlayPilotWrapperElement } from "./injection"
+import type { TitleData } from "./types/title"
+import YouTubeEmbedOverlay from "../routes/components/YouTubeEmbedOverlay.svelte"
+
+let currentTrailerComponent: object | null = {}
+
+export function openTrailerOverlay(title: TitleData) {
+  const target = getPlayPilotWrapperElement()
+  // !! Temporarily falls back to a placeholder is while embeddable_url is not yet present
+  const props = { onclose: closeTrailerOverlay, embeddable_url: title.embeddable_url || 'https://www.youtube.com/watch?v=xGTq0blCPVQ' }
+
+  currentTrailerComponent = mount(YouTubeEmbedOverlay, { target, props })
+}
+
+export function closeTrailerOverlay(): void {
+  if (!currentTrailerComponent) return
+
+  unmount(currentTrailerComponent, { outro: true })
+
+  currentTrailerComponent = null
+}

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

@@ -17,6 +17,7 @@ export type TitleData = {
   standing_poster: string
   title: string
   original_title: string
+  embeddable_url: string | null
   length?: number
   blurb?: string
   participants?: ParticipantData[]

package/src/routes/+page.svelte

@@ -9,8 +9,6 @@
   import { fetchAds } from '$lib/api/ads'
   import { fetchConfig } from '$lib/api/config'
   import { authorize, getAuthToken, isEditorialModeEnabled, removeAuthCookie, setEditorialParamInUrl } from '$lib/api/auth'
-  import { getSplitTestVariantName, trackSplitTestView } from '$lib/splitTest'
-  import { SplitTest } from '$lib/enums/SplitTest'
   import type { LinkInjectionResponse, LinkInjection, LinkInjectionTypes } from '$lib/types/injection'
   import Editor from './components/Editorial/Editor.svelte'
   import EditorTrigger from './components/Editorial/EditorTrigger.svelte'
@@ -18,7 +16,6 @@
   import TrackingPixels from './components/TrackingPixels.svelte'
   import Consent from './components/Consent.svelte'
   import Debugger from './components/Debugger.svelte'
-  import HighlightedInjection from './components/HighlightedInjection.svelte'
 
   let parentElement: HTMLElement | null = $state(null)
   let elements: HTMLElement[] = $state([])
@@ -30,7 +27,6 @@
   let loading = $state(true)
   let isUrlExcluded = $state(true)
   let linkInjections: LinkInjection[] = $state([])
-  let randomRenderId = $state(Math.random())
 
   // @ts-ignore It's ok if the response is empty
   const { ai_injections: aiInjections = [], manual_injections: manualInjections = [] } = $derived(response || {})
@@ -58,11 +54,7 @@
     fireQueuedTrackingEvents()
     track(TrackingEvent.ArticlePageView)
 
-    if (!aiInjections.length && !manualInjections.length) return
-
-    window.PlayPilotLinkInjections.ads = await fetchAds()
-
-    trackSplitTestView(SplitTest.InTextEngagement)
+    if (aiInjections.length || manualInjections.length) window.PlayPilotLinkInjections.ads = await fetchAds()
   }
 
   async function initialize(): Promise<void> {
@@ -124,7 +116,6 @@
 
   function rerender(): void {
     inject(separateLinkInjectionTypes(linkInjections))
-    randomRenderId = Math.random()
   }
 
   function reinitializeEditor(): void {
@@ -234,13 +225,7 @@
     </svelte:boundary>
   {/if}
 
-  {#key randomRenderId}
-    {#if linkInjections.length && getSplitTestVariantName(SplitTest.InTextEngagement) === 'Highlight'}
-      <HighlightedInjection {linkInjections} />
-    {/if}
-  {/key}
-
-  <Debugger onrerender={rerender} />
+  <Debugger />
 </div>
 
 {#if response?.pixels?.length}

package/src/routes/components/Button.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    variant?: 'filled' | 'border'
+    // eslint-disable-next-line no-unused-vars
+    onclick?: (event: MouseEvent) => void
+    children?: Snippet
+  }
+
+  const { variant = 'filled', onclick, children }: Props = $props()
+</script>
+
+<button class="button {variant}" {onclick}>
+  {@render children?.()}
+</button>
+
+<style lang="scss">
+  .button {
+    appearance: none;
+    display: flex;
+    height: 100%;
+    align-items: center;
+    gap: margin(0.25);
+    border: 0;
+    padding: 0.25em 0.5em;
+    border-radius: theme(button-border-radius, border-radius);
+    background: theme(button-background, content);
+    color: theme(button-text-color, text-color-alt);
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: theme(button-font-weight, normal);
+    cursor: pointer;
+
+    :global(svg) {
+      width: 1.5em;
+      height: 1.5em;
+      opacity: 0.75;
+    }
+  }
+
+  .filled {
+    &:hover,
+    &:active {
+      background: theme(button-hover-background, content-light);
+      color: theme(button-hover-text-color, text-color);
+    }
+  }
+
+  .border {
+    background: transparent;
+    box-shadow: inset 0 0 0 1px theme(button-border-color, content-light);
+
+    &:hover,
+    &:active {
+      background: theme(button-border-color, content);
+      color: theme(button-hover-text-color, text-color);
+    }
+  }
+</style>
+

package/src/routes/components/Debugger.svelte

@@ -3,12 +3,6 @@
   import { getFullUrlPath } from '$lib/url'
   import { onDestroy } from 'svelte'
 
-  interface Props {
-    onrerender: () => void
-  }
-
-  const { onrerender }: Props = $props()
-
   const secrets = ['tpidebug', 'debugtpi']
   const lastInputs: string[] = []
   const isUsingBetaScript = !!document.querySelector('script[src*="scripts.playpilot.com/link-injection@next"]')
@@ -157,8 +151,6 @@
 
     <hr />
 
-    <button onclick={onrerender}>Re-inject</button>
-
     {#if isUsingBetaScript}
       <small>You are using the beta version of TPI</small>
     {:else}

package/src/routes/components/Icons/IconClose.svelte

@@ -1,3 +1,11 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+<script lang="ts">
+  interface Props {
+    size?: number
+  }
+
+  const { size = 16 }: Props = $props()
+</script>
+
+<svg width={size} height={size} viewBox="0 0 16 16" fill="none">
   <path d="M14 2L2 14M2 2L14 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/routes/components/Icons/IconPlay.svelte

@@ -0,0 +1,3 @@
+<svg width="24px" height="24px" viewBox="0 -960 960 960">
+  <path fill="currentColor" d="m380-300 280-180-280-180v360ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
+</svg>

package/src/routes/components/Playlinks/PlaylinkIcon.svelte

@@ -14,13 +14,15 @@
   const { name, url, logo_url } = $derived(playlink)
 </script>
 
-<a href={url} target="_blank" class="playlink" data-playlink={name} rel="sponsored" {onclick}>
+<a href={url} target="_blank" class="playlink" data-playlink={name} rel="sponsored" {onclick} style:--size="{size}px">
   <img src={removeImageUrlPrefix(logo_url)} alt={name} height={size} width={size} />
 </a>
 
 <style lang="scss">
   .playlink {
     display: inline-block;
+    width: var(--size);
+    height: var(--size);
     background: theme(playlink-background, light);
     border-radius: theme(playlink-border-radius, border-radius);
     overflow: hidden;
@@ -36,6 +38,7 @@
     img {
       display: block;
       margin: 0;
+      width: auto;
     }
   }
 </style>

package/src/routes/components/RoundButton.svelte

@@ -2,11 +2,10 @@
   import type { Snippet } from 'svelte'
 
   interface Props {
-    size?: string
-    children?: Snippet
-    // eslint-disable-next-line no-unused-vars
-    onclick?: (event: MouseEvent) => void
-    [key: string]: any
+    size?: string;
+    children?: Snippet;
+    onclick?: () => void;
+    [key: string]: any;
   }
 
   const { children, size = '32px', onclick = () => null, ...rest }: Props = $props()

package/src/routes/components/Share.svelte

@@ -9,6 +9,7 @@
   import IconShare from './Icons/IconShare.svelte'
   import IconLink from './Icons/IconLink.svelte'
   import IconEmail from './Icons/IconEmail.svelte'
+  import Button from './Button.svelte'
   import { onMount } from 'svelte'
 
   interface Props {
@@ -55,9 +56,9 @@
 <svelte:window onclick={() => showContextMenu = false} />
 
 <div class="share">
-  <button class="button" onclick={toggle} aria-label={t('Share')}>
-    <IconShare />
-  </button>
+  <Button onclick={toggle}>
+    <IconShare /> Share
+  </Button>
 
   {#if showContextMenu}
     <div class="context-menu" transition:scale={{ duration: 50, start: 0.85 }}>
@@ -79,30 +80,11 @@
     position: relative;
   }
 
-  .button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    appearance: none;
-    border: 0;
-    border-radius: margin(3);
-    aspect-ratio: 1 / 1;
-    background: transparent;
-    color: theme(detail-text-color-alt, text-color-alt);
-
-    &:hover {
-      color: theme(detail-text-color, text-color);
-      background: theme(share-button-hover-background, content);
-      box-shadow: 0 0 0 2px theme(share-button-hover-background, content);
-    }
-  }
-
   .context-menu {
     z-index: 10;
     position: absolute;
     bottom: calc(100% + margin(0.5));
-    right: 0;
+    left: 0;
     max-width: margin(15);
     border-radius: $border-radius;
     background: theme(detail-background, lighter);

package/src/routes/components/Title.svelte

@@ -7,6 +7,7 @@
   import SimilarRail from './Rails/SimilarRail.svelte'
   import TitlePoster from './TitlePoster.svelte'
   import Share from './Share.svelte'
+  import Trailer from './Trailer.svelte'
   import { t } from '$lib/localization'
   import type { TitleData } from '$lib/types/title'
   import { heading } from '$lib/actions/heading'
@@ -36,26 +37,28 @@
 
     <div class="heading" use:heading={2} class:truncate={small} id="title">{title.title}</div>
 
-    <div class="row">
-      <div class="info">
-        <div class="imdb">
-          <IconIMDb />
-          {title.imdb_score}
-        </div>
+    <div class="info">
+      <div class="imdb">
+        <IconIMDb />
+        {title.imdb_score}
+      </div>
 
-        <Genres genres={title.genres} />
+      <Genres genres={title.genres} />
 
-        <div>{title.year}</div>
-        <div class="capitalize">{t(`Type: ${title.type}`)}</div>
+      <div>{title.year}</div>
+      <div class="capitalize">{t(`Type: ${title.type}`)}</div>
 
-        {#if !small && title.length}
-          <div>{title.length} {t('Minutes')}</div>
-        {/if}
-      </div>
+      {#if !small && title.length}
+        <div>{title.length} {t('Minutes')}</div>
+      {/if}
+    </div>
 
-      <div class="action">
+    <div class="actions">
+      <!-- !! Button is temporarily always visible while embeddable_url is not yet available -->
+      {#if true || title.embeddable_url}
+        <Trailer title={title} />
         <Share title={title.title} url={titleUrl(title)} />
-      </div>
+      {/if}
     </div>
   </div>
 
@@ -146,11 +149,6 @@
     }
   }
 
-  .row {
-    display: flex;
-    align-items: flex-start;
-  }
-
   .info {
     display: flex;
     flex-wrap: wrap;
@@ -182,8 +180,10 @@
     }
   }
 
-  .action {
-    margin: margin(-0.125) 0 0 auto;
+  .actions {
+    display: flex;
+    gap: margin(0.5);
+    margin-top: margin(0.5);
   }
 
   .background {

package/src/routes/components/Trailer.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { t } from '$lib/localization'
+  import { openTrailerOverlay } from '$lib/trailer'
+  import type { TitleData } from '$lib/types/title'
+  import Button from './Button.svelte'
+  import IconPlay from './Icons/IconPlay.svelte'
+
+  interface Props {
+    title: TitleData
+  }
+
+  const { title }: Props = $props()
+</script>
+
+<Button onclick={() => openTrailerOverlay(title)}>
+  <IconPlay />
+  {t('Watch Trailer')}
+</Button>

package/src/routes/components/YouTubeEmbedOverlay.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition'
+  import IconClose from './Icons/IconClose.svelte'
+
+  interface Props {
+    embeddable_url: string,
+    onclose: () => void
+  }
+
+  const { embeddable_url, onclose }: Props = $props()
+
+  const videoId = $derived(getVideoId(embeddable_url))
+
+  // Gets the YouTube ID from a url, can be a large number of differnet formats
+  // https://stackoverflow.com/a/54200105/1665157
+  function getVideoId(url: string): string | null {
+    const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/
+    const match = url.match(regExp)
+
+    return match?.[7] || null
+  }
+</script>
+
+<div class="overlay" transition:fade={{ duration: 100 }}>
+  {#if videoId}
+    <iframe width="600" height="338" src="https://www.youtube.com/embed/{videoId}?autoplay=true" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+  {:else}
+    Something went wrong
+  {/if}
+
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- 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>
+
+<style lang="scss">
+  iframe {
+    z-index: 1;
+    position: relative;
+    display: block;
+    width: 95vmin;
+    height: auto;
+    aspect-ratio: 16/9;
+    box-shadow: 0 0 margin(4) rgba(255, 255, 255, 0.15);
+    background: black;
+  }
+
+  .overlay {
+    z-index: 2147483647; // As high as she goes
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: theme(detail-backdrop, rgba(0, 0, 0, 0.95));
+  }
+
+  .backdrop {
+    z-index: 0;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  .close {
+    appearance: none;
+    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);
+    }
+  }
+</style>