@playpilot/tpi 5.34.1 → 6.0.0-beta.explore.15

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)
@@ -106,7 +103,7 @@
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
   class="modal"
-  class:has-bubble={!!bubble && inlineBubble}
+  class:has-bubble={!!bubble}
   class:has-prepend={!!prepend}
   style:--dialog-offset="{dialogOffset}px"
   onclick={closeOnBackdropClick}
@@ -120,7 +117,7 @@
   {/if}
 
   {#if bubble}
-    <div class="bubble" class:inline={inlineBubble} transition:scaleOrFly|global={{ y: window.innerHeight }} 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}
@@ -304,28 +301,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/Participant.svelte

@@ -2,9 +2,7 @@
   import { onMount } from 'svelte'
   import { heading } from '$lib/actions/heading'
   import { fetchTitlesForParticipant } from '$lib/api/participants'
-  import { SplitTest } from '$lib/enums/SplitTest'
   import { openModal } from '$lib/modal'
-  import { trackSplitTestView } from '$lib/splitTest'
   import type { ParticipantData } from '$lib/types/participant'
   import type { TitleData } from '$lib/types/title'
   import ListTitle from './ListTitle.svelte'
@@ -20,8 +18,6 @@
 
   const pageSize = 30
 
-  trackSplitTestView(SplitTest.ParticipantPlaylinkFormat)
-
   let titles: TitleData[] = $state([])
   let page = $state(1)
   let hasMorePages = $state(true)

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

@@ -24,7 +24,7 @@
     width: var(--size);
     height: var(--size);
     background: theme(playlink-background, light);
-    border-radius: theme(playlink-border-radius, border-radius);
+    border-radius: theme(playlink-border-radius, calc(var(--size) * 0.25));
     overflow: hidden;
 
     &:hover,

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

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { mergePlaylinks } from '$lib/playlink'
+  import type { PlaylinkData } from '$lib/types/playlink'
+  import PlaylinkIcon from './PlaylinkIcon.svelte'
+
+  interface Props {
+    playlinks: PlaylinkData[]
+    size?: number
+  }
+
+  const { playlinks, size = 30 }: Props = $props()
+
+  const limitedPlaylinks = $derived(mergePlaylinks(playlinks).slice(0, 3))
+
+  function onPlaylinkClick(event: MouseEvent): void {
+    event.stopPropagation()
+  }
+</script>
+
+<div class="playlinks">
+  {#each limitedPlaylinks as playlink}
+    <PlaylinkIcon {playlink} onclick={onPlaylinkClick} {size} />
+  {/each}
+
+  {#if playlinks.length > limitedPlaylinks.length}
+    <span class="more">
+      +{playlinks.length - limitedPlaylinks.length}
+    </span>
+  {/if}
+
+  {#if !playlinks.length}
+    <div class="empty" data-testid="playlinks-empty">
+      Unavailable to stream
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .playlinks {
+    display: flex;
+    flex-wrap: wrap;
+    gap: margin(0.25);
+    margin-top: auto;
+  }
+
+  .more {
+    display: flex;
+    align-items: center;
+    padding: 0 margin(0.125);
+    color: theme(list-item-more-text-color, text-color-alt);
+    font-size: theme(detail-font-size-small, font-size-small);
+  }
+
+  .empty {
+    margin-top: margin(0.25);
+    opacity: 0.65;
+    font-style: italic;
+    font-size: 0.85em;
+    white-space: initial;
+    color: theme(list-item-empty-text-color, text-color-alt);
+  }
+</style>

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, insertExploreIntoNavigation } 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,22 @@
   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'
+
+  if (browser) {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = {
+      token: 'ZoAL14yqzevMyQiwckbvyetOkeIUeEDN',
+      config: {
+        explore_navigation_selector: 'nav a:last-child',
+        explore_navigation_label: 'Streaming guide',
+        explore_navigation_path: '/explore',
+      },
+    }
+  }
 
-  // @ts-ignore
-  if (browser) window.PlayPilotLinkInjections = {}
+  // Used to re-render some elements with a key
+  let renderKey = Math.random()
 </script>
 
 <h1>Elements</h1>
@@ -153,6 +167,29 @@
   </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>
+    <button onclick={insertExploreIntoNavigation}>Insert explore into navigation</button>
+
+    <div data-playpilot-explore style="height: 20rem"></div>
+  </div>
+</div>
+
 <style lang="scss">
   @import url('$lib/scss/global.scss');
 

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

@@ -0,0 +1,60 @@
+<script lang="ts">
+  /**
+   * This is an example page for inserting the explore component into a page. The script will be loaded on this page,
+   * but before the script is loaded some loading state needs to display. This will be supplied to the third party
+   * implementing the tag, and will be different for each third party.
+   */
+
+  import { browser } from '$app/environment'
+  import { insertExplore, insertExploreIntoNavigation } from '$lib/explore'
+
+  if (browser) {
+    // @ts-ignore
+    window.PlayPilotLinkInjections = {
+      token: 'ZoAL14yqzevMyQiwckbvyetOkeIUeEDN',
+      config: {
+        explore_navigation_selector: 'nav a:last-child',
+        explore_navigation_label: 'Streaming guide',
+        explore_navigation_path: '/explore',
+      },
+    }
+  }
+
+  insertExploreIntoNavigation()
+  // Pretend there is some loading time, as there would be on a real page
+  setTimeout(insertExplore, 1500)
+</script>
+
+<main>
+  <!--
+    This is an example of the sort of tag we'd give a partner to insert on their page.
+    This exists soley as a loading state while the script is has not loaded.
+    The exact styling and what not will be different per partner.
+  -->
+  <div data-playpilot-explore>
+    <div style="padding: 16px 32px; min-height: 100vh; color: white">
+      <div style="display: flex; justify-content: center; gap: 8px; margin: 16px 0; font-size: 14px;">
+        <strong>Site Name</strong>
+        <div style="width: 2px; height: 0.5lh; margin-top: 0.25lh; background: currentColor;"></div>
+        Streaming Guide
+      </div>
+
+      <div role="status" aria-live="polite" style="display: flex; flex-direction: column; align-items: center; margin: 0 auto;">
+        <svg stroke="currentColor" width="72" viewBox="0 0 24 24"><g><circle cx="12" cy="12" r="9.5" fill="none" stroke-width="3" stroke-linecap="round"><animate attributeName="stroke-dasharray" dur="1.5s" calcMode="spline" values="0 150;42 150;42 150;42 150" keyTimes="0;0.475;0.95;1" keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" repeatCount="indefinite"/><animate attributeName="stroke-dashoffset" dur="1.5s" calcMode="spline" values="0;-16;-59;-59" keyTimes="0;0.475;0.95;1" keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" repeatCount="indefinite"/></circle><animateTransform attributeName="transform" type="rotate" dur="2s" values="0 12 12;360 12 12" repeatCount="indefinite"/></g></svg>
+        <div style="margin: 12px 0;">Loading…</div>
+        <noscript>Sorry, this page requires JavaScript to be enabled.</noscript>
+      </div>
+    </div>
+  </div>
+</main>
+
+<style lang="scss">
+  @import url('$lib/scss/global.scss');
+
+  main {
+    margin: margin(2) margin(-2) margin(-2);
+    padding: 0;
+    background: theme(light);
+  }
+</style>
+

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()
+    })
+  })
+})