@playpilot/tpi 5.33.0-beta.explore.6 → 5.33.0-beta.in-text.1

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

@@ -1,15 +0,0 @@
-
-<script lang="ts">
-  import Modal from '../Modal.svelte'
-  import Explore from './Explore.svelte'
-
-  interface Props {
-    initialScrollPosition?: number
-  }
-
-  const { initialScrollPosition = 0 }: Props = $props()
-</script>
-
-<Modal {initialScrollPosition} closeButtonStyle="flat">
-  <Explore />
-</Modal>

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

@@ -1,3 +0,0 @@
-<div class="filter" role="navigation">
-  Filter
-</div>

package/src/routes/components/Explore/Search.svelte

@@ -1,56 +0,0 @@
-<script lang="ts">
-  import IconSearch from '../Icons/IconSearch.svelte'
-
-  interface Props {
-    // eslint-disable-next-line no-unused-vars
-    oninput: (query: string) => void
-  }
-
-  const { oninput }: Props = $props()
-
-  let query = $state('')
-</script>
-
-<div class="search" role="search">
-  <div class="icon">
-    <IconSearch />
-  </div>
-
-  <input bind:value={query} oninput={() => oninput(query)} class="input" type="search" placeholder="Search movies and shows" />
-</div>
-
-<style lang="scss">
-  .search {
-    position: relative;
-  }
-
-  .icon {
-    display: flex;
-    align-items: center;
-    position: absolute;
-    height: 100%;
-    left: margin(1);
-    color: theme(text-color-alt);
-    opacity: 0.75;
-  }
-
-  .input {
-    width: 100%;
-    padding: margin(0.75) margin(1) margin(0.75) margin(3);
-    border: 0;
-    border-radius: theme(border-radius);
-    background: theme(content);
-    color: theme(text-color-alt);
-    font-size: theme(font-size-base);
-    font-family: theme(font-family);
-
-    &:focus {
-      outline: 1px solid white;
-    }
-
-    &::placeholder {
-      color: theme(text-color-alt);
-      opacity: 0.75;
-    }
-  }
-</style>

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

@@ -1,3 +0,0 @@
-<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/Icons/IconSearch.svelte

@@ -1,3 +0,0 @@
-<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/ListTitleSkeleton.svelte

@@ -1,42 +0,0 @@
-<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/Trailer.svelte

@@ -1,18 +0,0 @@
-<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

@@ -1,96 +0,0 @@
-<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/explore/+page.svelte

@@ -1,61 +0,0 @@
-<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 {
-    --playpilot-font-family: "Georgia", serif;
-    margin: margin(2) margin(-2) margin(-2);
-    padding: 0 margin(2);
-    background: theme(light);
-  }
-</style>
-

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

@@ -1,55 +0,0 @@
-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

@@ -1,139 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { destroyExplore, insertExplore, insertExploreIntoNavigation } from '$lib/explore'
-import { mount, unmount } from '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()
-    })
-
-    it('Should clear any html inside of the element before mount', () => {
-      document.body.innerHTML = '<div data-playpilot-explore><span></span></div>'
-
-      insertExplore()
-
-      expect(document.querySelector('span')).not.toBeTruthy()
-    })
-  })
-
-  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()
-    })
-  })
-
-  describe('insertExploreIntoNavigation', () => {
-    beforeEach(() => {
-      document.body.innerHTML = ''
-
-      // @ts-ignore
-      window.PlayPilotLinkInjections = {}
-    })
-
-    it('Should not insert if config object is not present', () => {
-      expect(insertExploreIntoNavigation()).toBe(false)
-
-      expect(document.body.innerHTML).toBe('')
-    })
-
-    it('Should not insert if config object is present but explore_navigation_selector is not given', () => {
-      window.PlayPilotLinkInjections.config = {
-        explore_navigation_selector: null,
-      }
-
-      expect(insertExploreIntoNavigation()).toBe(false)
-    })
-
-    it('Should not insert if explore_navigation_selector is given but selector captures nothing', () => {
-      document.body.innerHTML = '<nav></nav>'
-
-      window.PlayPilotLinkInjections.config = {
-        explore_navigation_selector: 'a',
-      }
-
-      expect(insertExploreIntoNavigation()).toBe(false)
-    })
-
-    it('Should insert if explore_navigation_selector is given and selector is valid', () => {
-      document.body.innerHTML = '<nav><a></a></nav>'
-
-      window.PlayPilotLinkInjections.config = {
-        explore_navigation_selector: 'a',
-      }
-
-      expect(insertExploreIntoNavigation()).toBe(true)
-    })
-
-    it('Should copy element matching given selector with the given path', () => {
-      document.body.innerHTML = '<nav><a></a></nav>'
-
-      window.PlayPilotLinkInjections.config = {
-        explore_navigation_selector: 'a',
-        explore_navigation_path: '/explore',
-      }
-
-      insertExploreIntoNavigation()
-
-      expect(document.body.innerHTML).toBe('<nav><a></a><a class="" href="/explore" data-playpilot-explore-navigation-element="true">Streaming Guide</a></nav>')
-    })
-
-    it('Should copy element matching given selector with text equal to explore_navigation_label', () => {
-      document.body.innerHTML = '<nav><a></a></nav>'
-
-      window.PlayPilotLinkInjections.config = {
-        explore_navigation_selector: 'a',
-        explore_navigation_label: 'Some label',
-      }
-
-      insertExploreIntoNavigation()
-
-      const link = document.querySelector('[data-playpilot-explore-navigation-element]')
-      // @ts-ignore
-      expect(link.innerText).toBe('Some label')
-    })
-
-    it('Should copy element and change link inside of element if the selector was not a link', () => {
-      document.body.innerHTML = '<ul><li><a>Link</a></li></ul>'
-
-      window.PlayPilotLinkInjections.config = {
-        explore_navigation_selector: 'li',
-        explore_navigation_path: '/explore',
-      }
-
-      insertExploreIntoNavigation()
-
-      expect(document.body.innerHTML).toBe('<ul><li><a>Link</a></li><li data-playpilot-explore-navigation-element="true"><a class="" href="/explore">Streaming Guide</a></li></ul>')
-    })
-  })
-})

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

@@ -1,56 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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()
-  })
-})