@playpilot/tpi 5.32.0 → 5.33.0-beta.explore.1

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

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 19 19">
+  <path fill="currentColor" d="M16.593,2.407a8.155,8.155,0,0,0-11.569,0A8.166,8.166,0,0,0,4.18,12.983L.38,16.8a1.3,1.3,0,0,0,0,1.837A1.372,1.372,0,0,0,1.288,19a1.3,1.3,0,0,0,.908-.38L6.017,14.8A8.172,8.172,0,0,0,16.593,2.407ZM15.327,12.688A6.4,6.4,0,1,1,17.184,8.17,6.324,6.324,0,0,1,15.327,12.688Z" />
+</svg>

package/src/routes/components/ListTitle.svelte

@@ -90,7 +90,7 @@
     align-items: center;
     width: 100%;
     background: theme(list-item-background, lighter);
-    padding: margin(0.5);
+    padding: theme(list-item-padding, margin(0.5));
     border: 0;
     border-radius: theme(list-item-border-radius, border-radius);
     text-decoration: none;
@@ -98,10 +98,8 @@
 
     &:hover {
       filter: brightness(theme(list-item-hover-filter-brightness, hover-filter-brightness));
-    }
-
-    &:last-child {
-      border-bottom: 0;
+      background: theme(list-item-hover-background, lighter);
+      box-shadow: theme(list-item-hover-shadow, none);
     }
   }
 

package/src/routes/components/ListTitleSkeleton.svelte

@@ -0,0 +1,42 @@
+<div class="skeleton" data-testid="skeleton">
+  <div class="poster"></div>
+
+  <div class="lines">
+    <div class="line" style:width="40%"></div>
+    <div class="line" style:width="60%"></div>
+    <div class="line" style:width="80%"></div>
+  </div>
+</div>
+
+<style lang="scss">
+  .skeleton {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    gap: margin(1);
+  }
+
+  .poster {
+    flex: 0 0 auto;
+    height: auto;
+    align-self: start;
+    width: margin(4.125);
+    aspect-ratio: 2/3;
+    border-radius: theme(detail-image-border-radius, border-radius);
+    background: theme(content);
+  }
+
+  .lines {
+    display: flex;
+    flex-direction: column;
+    gap: margin(0.5);
+    width: 100%;
+  }
+
+  .line {
+    width: 60%;
+    height: theme(font-size-base);
+    background: theme(content);
+    border-radius: 5rem;
+  }
+</style>

package/src/routes/components/Modal.svelte

@@ -6,8 +6,6 @@
   import SwipeHandle from './SwipeHandle.svelte'
   import { onMount, setContext, type Snippet } from 'svelte'
   import { prefersReducedMotion } from 'svelte/motion'
-  import { isInSplitTestVariant } from '$lib/splitTest'
-  import { SplitTest } from '$lib/enums/SplitTest'
   import { mobileBreakpoint } from '$lib/constants'
   import { destroyAllModals, getPreviousModal, goBackToPreviousModal } from '$lib/modal'
   import { focustrap } from '$lib/actions/focustrap'
@@ -34,7 +32,6 @@
     onclose = () => null,
   }: Props = $props()
 
-  const inlineBubble = isInSplitTestVariant(SplitTest.TopScrollFormat, 1)
   const historyHash = '#playpilot'
 
   let windowWidth = $state(0)
@@ -95,7 +92,7 @@
   onhashchange={close}
   bind:innerWidth={windowWidth} />
 
-<div class="modal" style:--dialog-offset="{dialogOffset}px" transition:fade|global={{ duration: 150 }} bind:this={modalElement} use:focustrap class:has-bubble={!!bubble && inlineBubble} class:has-prepend={!!prepend}>
+<div class="modal" style:--dialog-offset="{dialogOffset}px" transition:fade|global={{ duration: 150 }} bind:this={modalElement} use:focustrap class:has-bubble={!!bubble} class:has-prepend={!!prepend}>
   {#if prepend}
     <div class="prepend" transition:scaleOrFly|global={{ y: -10 }} data-view-transition-new="playpilot-title-extra">
       {@render prepend()}
@@ -103,7 +100,7 @@
   {/if}
 
   {#if bubble}
-    <div class="bubble" class:inline={inlineBubble} transition:scaleOrFly|global={{ y: inlineBubble ? window.innerHeight : -10 }} data-view-transition-new="playpilot-title-extra">
+    <div class="bubble" transition:scaleOrFly|global={{ y: window.innerHeight }} data-view-transition-new="playpilot-title-extra">
       {@render bubble()}
     </div>
   {/if}
@@ -285,28 +282,13 @@
   .bubble {
     z-index: 1;
     position: relative;
-    width: calc(100% - margin(1));
+    width: 100%;
     max-width: $max-width;
-    margin: margin(0.5);
+    margin: auto 0 0;
 
     @include desktop() {
       width: 100%;
-      margin: 0 0 margin(0.5);
-    }
-
-    &.inline {
-      width: 100%;
-      margin: auto 0 0;
-
-      @include desktop() {
-        margin-top: 0;
-      }
-    }
-
-    .prepend + & {
-      &:not(.inline) {
-        margin-top: 0;
-      }
+      margin-top: 0;
     }
   }
 </style>

package/src/routes/components/ParticipantModal.svelte

@@ -12,17 +12,7 @@
     initialScrollPosition?: number
   }
 
-  const { participant = {
-    sid: 'pr5C5W',
-    name: 'James Franco',
-    birth_date: '1978-04-19',
-    death_date: null,
-    jobs: ['actor'],
-    image: 'https://hips.hearstapps.com/hmg-prod/images/gettyimages-161098947-square.jpg',
-    image_uuid: '08ed2fac357011eb87470aff12c0f5c9',
-    gender: 'Male',
-    bio: 'Aenean feugiat nec odio at venenatis. Integer porta neque metus, a sollicitudin dolor dapibus et. In sollicitudin nulla eget ultricies porttitor. Nulla facilisi. Sed turpis orci, facilisis efficitur neque in, ultrices ultricies purus. Mauris nec augue a nisi imperdiet semper ut nec tellus. Donec at tristique odio. Etiam luctus eget metus non mattis. Integer imperdiet in elit eu varius. Donec ornare, nibh vitae accumsan consequat, lacus nulla elementum sapien, a scelerisque tellus augue ac erat. Aenean finibus fringilla magna, ac laoreet nisl convallis vel. Proin laoreet ex ac augue maximus, nec gravida tortor pharetra.\nCurabitur maximus dui sed risus placerat pharetra vitae ut orci. Proin sodales enim a elit euismod, a varius sem suscipit. Vivamus eu magna cursus, fringilla est in, mollis nunc. Mauris fringilla eleifend nibh, eget auctor lectus bibendum non. Praesent sed elit ipsum. Donec nunc dolor, sagittis hendrerit gravida et, lacinia sed metus. Morbi tempus mi massa. In hac habitasse platea dictumst. Suspendisse aliquet tincidunt lectus ut elementum.',
-  }, initialScrollPosition = 0 }: Props = $props()
+  const { participant, initialScrollPosition = 0 }: Props = $props()
 
   let windowWidth = $state(0)
 

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/TitleModal.svelte

@@ -8,6 +8,7 @@
   import Title from './Title.svelte'
   import TopScroll from './Ads/TopScroll.svelte'
   import Display from './Ads/Display.svelte'
+  import ExploreCallToAction from './Explore/ExploreCallToAction.svelte'
 
   interface Props {
     title: TitleData
@@ -40,6 +41,8 @@
 {#snippet bubble()}
   {#if topScrollAd}
     <TopScroll campaign={topScrollAd} />
+  {:else}
+    <ExploreCallToAction />
   {/if}
 {/snippet}
 
@@ -49,6 +52,6 @@
   {/if}
 {/snippet}
 
-<Modal {onscroll} {initialScrollPosition} prepend={displayAd ? prepend : null} bubble={topScrollAd ? bubble : null} tall>
+<Modal {onscroll} {initialScrollPosition} {bubble} prepend={displayAd ? prepend : null} tall>
   <Title {title} />
 </Modal>

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>

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

@@ -2,6 +2,7 @@
   import { browser } from '$app/environment'
   import { title, linkInjections, campaign, participants } from '$lib/fakeData'
   import { openModal } from '$lib/modal'
+  import { insertExplore } from '$lib/explore'
   import Disclaimer from '../components/Ads/Disclaimer.svelte'
   import Display from '../components/Ads/Display.svelte'
   import TopScroll from '../components/Ads/TopScroll.svelte'
@@ -16,9 +17,13 @@
   import Title from '../components/Title.svelte'
   import TitlePopover from '../components/TitlePopover.svelte'
   import Tooltip from '../components/Tooltip.svelte'
+  import Explore from '../components/Explore/Explore.svelte'
 
   // @ts-ignore
-  if (browser) window.PlayPilotLinkInjections = {}
+  if (browser) window.PlayPilotLinkInjections = { token: 'ZoAL14yqzevMyQiwckbvyetOkeIUeEDN' }
+
+  // Used to re-render some elements with a key
+  let renderKey = Math.random()
 </script>
 
 <h1>Elements</h1>
@@ -153,6 +158,28 @@
   </div>
 </div>
 
+<h2>Explore</h2>
+
+<div class="group">
+  <div class="item">
+    <button onclick={() => renderKey = Math.random()}>Rerender</button>
+
+    {#key renderKey}
+      <Explore />
+    {/key}
+  </div>
+
+  <div class="item">
+    <button onclick={() => openModal({ type: 'explore' })}>Show explore modal</button>
+  </div>
+
+  <div class="item">
+    <button onclick={insertExplore}>Insert explore component</button>
+
+    <div data-playpilot-explore></div>
+  </div>
+</div>
+
 <style lang="scss">
   @import url('$lib/scss/global.scss');
 

package/src/tests/lib/api/ads.test.js

@@ -10,7 +10,6 @@ vi.mock('$lib/api/api', () => ({
   api: vi.fn(),
 }))
 
-
 vi.mock('$lib/tracking', () => ({
   track: vi.fn(),
 }))

package/src/tests/lib/api/titles.test.js

@@ -0,0 +1,55 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+import { api } from '$lib/api/api'
+import { fetchSimilarTitles, fetchTitles } from '$lib/api/titles'
+import { title } from '$lib/fakeData'
+import { getApiToken } from '$lib/token'
+
+vi.mock('$lib/token', () => ({
+  getApiToken: vi.fn(),
+}))
+
+vi.mock('$lib/api/api', () => ({
+  api: vi.fn(),
+}))
+
+describe('$lib/api/ads', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+    vi.mocked(getApiToken).mockReturnValue('some-token')
+  })
+
+  describe('fetchTitles', () => {
+    it('Should call api with given parameters and return response', async () => {
+      vi.mocked(api).mockResolvedValueOnce({ results: [title] })
+
+      const response = await fetchTitles({ some: 'thing' })
+
+      expect(api).toHaveBeenCalledWith('/titles/browse?api-token=some-token&some=thing')
+      expect(response).toEqual({ results: [title] })
+    })
+
+    it('Should throw when api returns error', async () => {
+      vi.mocked(api).mockRejectedValueOnce({ error: 'message' })
+
+      await expect(async () => await fetchTitles()).rejects.toThrow()
+    })
+  })
+
+  describe('fetchSimilarTitles', () => {
+    it('Should call api with with sid for given title and return array of titles', async () => {
+      vi.mocked(api).mockResolvedValueOnce({ results: [title] })
+
+      const response = await fetchSimilarTitles(title)
+
+      expect(api).toHaveBeenCalledWith(`/titles/browse?api-token=some-token&related_to_sid=${title.sid}`)
+      expect(response).toEqual([title])
+    })
+
+    it('Should throw when api returns error', async () => {
+      vi.mocked(api).mockRejectedValueOnce({ error: 'message' })
+
+      await expect(async () => await fetchSimilarTitles(title)).rejects.toThrow()
+    })
+  })
+})

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

@@ -0,0 +1,49 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { destroyExplore, insertExplore } from '$lib/explore'
+import { mount, unmount } from 'svelte'
+import { waitFor } from '@testing-library/svelte'
+
+vi.mock('svelte', () => ({
+  mount: vi.fn(() => true),
+  unmount: vi.fn(),
+}))
+
+describe('explore.js', () => {
+  beforeEach(() => {
+    destroyExplore()
+
+    vi.resetAllMocks()
+    vi.mocked(mount).mockReturnValue({})
+  })
+
+  describe('insertExplore', () => {
+    it('Should not call mount when no target element is found', () => {
+      insertExplore()
+
+      expect(mount).not.toHaveBeenCalled()
+    })
+
+    it('Should call mount when target is found', () => {
+      document.body.innerHTML = '<div data-playpilot-explore></div>'
+
+      insertExplore()
+
+      expect(mount).toHaveBeenCalled()
+    })
+  })
+
+  describe('destroyExplore', () => {
+    it('Should not call unmount if component was not previously mounted', () => {
+      destroyExplore()
+
+      expect(unmount).not.toHaveBeenCalled()
+    })
+
+    it('Should call unmount if component was previously mounted', () => {
+      insertExplore()
+      destroyExplore()
+
+      expect(unmount).toHaveBeenCalled()
+    })
+  })
+})

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

@@ -0,0 +1,56 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { closeCurrentModal, destroyAllModals, destroyCurrentModal, getAllModals, getPreviousModal, goBackToPreviousModal, openModal } from '$lib/modal'
+import { linkInjections, title } from '$lib/fakeData'
+import { mount, unmount } from 'svelte'
+import ParticipantModal from '../../routes/components/ParticipantModal.svelte'
+import TitleModal from '../../routes/components/TitleModal.svelte'
+import { closeTrailerOverlay, openTrailerOverlay } from '$lib/trailer'
+
+vi.mock('svelte', () => ({
+  mount: vi.fn(),
+  unmount: vi.fn(),
+}))
+
+const titleWithTrailer = { ...title, embeddable_url: 'abc' }
+
+describe('modal.js', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  describe('openTrailerOverlay', () => {
+    it('Should call mount with given title embeddable_url', () => {
+      openTrailerOverlay(titleWithTrailer)
+
+      expect(mount).toHaveBeenCalledWith(
+        expect.any(Function),
+        expect.objectContaining({
+          target: expect.anything(),
+          props: expect.objectContaining({
+            onclose: expect.any(Function),
+            embeddable_url: titleWithTrailer.embeddable_url,
+          }),
+        }),
+      )
+    })
+  })
+
+  describe('closeTrailerOverlay', () => {
+    it('Should call unmount if component was previously mounted', () => {
+      vi.mocked(mount).mockReturnValueOnce({})
+
+      openTrailerOverlay(titleWithTrailer)
+      closeTrailerOverlay()
+
+      expect(unmount).toHaveBeenCalled()
+    })
+
+    it('Should not call unmount if component was not previously mounted', () => {
+      vi.mocked(mount).mockReturnValueOnce({})
+
+      closeTrailerOverlay()
+
+      expect(unmount).not.toHaveBeenCalled()
+    })
+  })
+})

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

@@ -0,0 +1,28 @@
+import { render, fireEvent } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import Button from '../../../routes/components/Button.svelte'
+
+describe('Button.svelte', () => {
+  it('Should use filled class by default', () => {
+    const { getByRole } = render(Button)
+
+    expect(getByRole('button').classList).toContain('filled')
+  })
+
+  it('Should use border class when border variant is given', () => {
+    const { getByRole } = render(Button, { variant: 'border' })
+
+    expect(getByRole('button').classList).not.toContain('filled')
+    expect(getByRole('button').classList).toContain('border')
+  })
+
+  it('Should fire given onclick function on click', async () => {
+    const onclick = vi.fn()
+    const { getByRole } = render(Button, { onclick })
+
+    await fireEvent.click(getByRole('button'))
+
+    expect(onclick).toHaveBeenCalled()
+  })
+})