@playpilot/tpi 5.34.3 → 5.35.0

package/package.json

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

package/src/lib/data/translations.ts

@@ -126,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/TrackingEvent.ts

@@ -53,6 +53,7 @@ export const TrackingEvent = Object.freeze({
   SplitTestView: 'ali_split_test_view',
   SplitTestAction: 'ali_split_test_action',
 
-  // Share
-  ShareTitle: 'ali_share_title'
+  // Various
+  ShareTitle: 'ali_share_title',
+  TrailerClick: 'ali_trailer_button_click'
 })

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/trailer.ts

@@ -0,0 +1,21 @@
+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()
+  const props = { onclose: closeTrailerOverlay, embeddable_url: title.embeddable_url || '' }
+
+  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/components/Button.svelte

@@ -0,0 +1,62 @@
+<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;
+    background: transparent;
+    border-radius: theme(button-border-radius, border-radius);
+    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 {
+    background: theme(button-filled-background, content);
+
+    &:hover,
+    &:active {
+      background: theme(button-filled-hover-background, content-light);
+      color: theme(button-filled-hover-text-color, text-color);
+    }
+  }
+
+  .border {
+    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/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/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,27 @@
 
     <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">
+      {#if title.embeddable_url}
+        <Trailer title={title} />
         <Share title={title.title} url={titleUrl(title)} />
-      </div>
+      {/if}
     </div>
   </div>
 
@@ -146,11 +148,6 @@
     }
   }
 
-  .row {
-    display: flex;
-    align-items: flex-start;
-  }
-
   .info {
     display: flex;
     flex-wrap: wrap;
@@ -182,8 +179,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,25 @@
+<script lang="ts">
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { t } from '$lib/localization'
+  import { track } from '$lib/tracking'
+  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()
+
+  function onclick() {
+    openTrailerOverlay(title)
+    track(TrackingEvent.TrailerClick, title)
+  }
+</script>
+
+<Button {onclick}>
+  <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 different 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/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()
+  })
+})

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

@@ -16,57 +16,57 @@ vi.mock('$lib/tracking', () => ({
 
 describe('Share.svelte', () => {
   it('Should open context menu on click', async () => {
-    const { getByLabelText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
     expect(queryByText('Copy URL')).not.toBeTruthy()
     expect(queryByText('Email')).not.toBeTruthy()
 
-    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(getByText('Share'))
 
     expect(queryByText('Copy URL')).toBeTruthy()
     expect(queryByText('Email')).toBeTruthy()
   })
 
   it('Should close context menu on click of items', async () => {
-    const { getByLabelText, getByText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
-    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(getByText('Share'))
     await fireEvent.click(getByText('Copy URL'))
 
     expect(queryByText('Copy URL')).not.toBeTruthy()
   })
 
   it('Should close context menu on click of body', async () => {
-    const { getByLabelText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
-    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(getByText('Share'))
     await fireEvent.click(document.body)
 
     expect(queryByText('Copy URL')).not.toBeTruthy()
   })
 
   it('Should fire copyToClipboard on click of button', async () => {
-    const { getByLabelText, getByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
-    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(getByText('Share'))
     await fireEvent.click(getByText('Copy URL'))
 
     expect(copyToClipboard).toHaveBeenCalledWith('some-url?utm_source=tpi')
   })
 
   it('Should fire track function on click of copy URL button', async () => {
-    const { getByLabelText, getByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
-    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(getByText('Share'))
     await fireEvent.click(getByText('Copy URL'))
 
     expect(track).toHaveBeenCalledWith(TrackingEvent.ShareTitle, null, { title: 'Some title', url: 'http://localhost:3000/', method: 'copy' })
   })
 
   it('Should fire track function on click of email button', async () => {
-    const { getByLabelText, getByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
-    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(getByText('Share'))
     await fireEvent.click(getByText('Email'))
 
     expect(track).toHaveBeenCalledWith(TrackingEvent.ShareTitle, null, { title: 'Some title', url: 'http://localhost:3000/', method: 'email' })

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

@@ -91,4 +91,16 @@ describe('Title.svelte', () => {
     expect(fetchParticipantsForTitle).toHaveBeenCalled()
     expect(fetchSimilarTitles).toHaveBeenCalled()
   })
+
+  it('Should show trailer button when embeddable_url is given', () => {
+    const { getByText } = render(Title, { title: { ...title, embeddable_url: 'some-url' } })
+
+    expect(getByText('Watch trailer')).toBeTruthy()
+  })
+
+  it('Should not show trailer button when embeddable_url is not given', () => {
+    const { queryByText } = render(Title, { title })
+
+    expect(queryByText('Watch Trailer')).not.toBeTruthy()
+  })
 })

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

@@ -0,0 +1,34 @@
+import { render, fireEvent } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import Trailer from '../../../routes/components/Trailer.svelte'
+import { title } from '$lib/fakeData'
+import { openTrailerOverlay } from '$lib/trailer'
+import { track } from '$lib/tracking'
+import { TrackingEvent } from '$lib/enums/TrackingEvent'
+
+vi.mock('$lib/trailer', () => ({
+  openTrailerOverlay: vi.fn(),
+}))
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+describe('Trailer.svelte', () => {
+  it('Should fire openTrailerOverlay with given title on click', async () => {
+    const { getByRole } = render(Trailer, { title })
+
+    await fireEvent.click(getByRole('button'))
+
+    expect(openTrailerOverlay).toHaveBeenCalledWith(title)
+  })
+
+  it('Should fire tracking event on click', async () => {
+    const { getByRole } = render(Trailer, { title })
+
+    await fireEvent.click(getByRole('button'))
+
+    expect(track).toHaveBeenCalledWith(TrackingEvent.TrailerClick, title)
+  })
+})

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

@@ -0,0 +1,31 @@
+import { fireEvent, render } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import YouTubeEmbedOverlay from '../../../routes/components/YouTubeEmbedOverlay.svelte'
+
+describe('YouTubeEmbedOverlay.svelte', () => {
+  it('Should render embed iframe with given video url', () => {
+    const { container } = render(YouTubeEmbedOverlay, { embeddable_url: 'youtube.com/watch?v=abc', onclose: () => null })
+
+    // @ts-ignore
+    expect(container.querySelector('iframe').src).toBe('https://www.youtube.com/embed/abc?autoplay=true')
+  })
+
+  it('Should render error message if embeddable_url is invalid', () => {
+    const { container, getByText } = render(YouTubeEmbedOverlay, { embeddable_url: '-', onclose: () => null })
+
+    expect(container.querySelector('iframe')).not.toBeTruthy()
+    expect(getByText('Something went wrong')).toBeTruthy()
+  })
+
+  it('Should fire given onclose function on click of close button and backdrop', async () => {
+    const onclose = vi.fn()
+    const { getByLabelText, getByTestId } = render(YouTubeEmbedOverlay, { embeddable_url: '-', onclose })
+
+    await fireEvent.click(getByLabelText('Close'))
+    expect(onclose).toHaveBeenCalledTimes(1)
+
+    await fireEvent.click(getByTestId('backdrop'))
+    expect(onclose).toHaveBeenCalledTimes(2)
+  })
+})