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

package/src/routes/components/Title.svelte

@@ -7,7 +7,6 @@
   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'
@@ -37,28 +36,26 @@
 
     <div class="heading" use:heading={2} class:truncate={small} id="title">{title.title}</div>
 
-    <div class="info">
-      <div class="imdb">
-        <IconIMDb />
-        {title.imdb_score}
-      </div>
+    <div class="row">
+      <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="actions">
-      <!-- !! Button is temporarily always visible while embeddable_url is not yet available -->
-      {#if true || title.embeddable_url}
-        <Trailer title={title} />
+      <div class="action">
         <Share title={title.title} url={titleUrl(title)} />
-      {/if}
+      </div>
     </div>
   </div>
 
@@ -149,6 +146,11 @@
     }
   }
 
+  .row {
+    display: flex;
+    align-items: flex-start;
+  }
+
   .info {
     display: flex;
     flex-wrap: wrap;
@@ -180,10 +182,8 @@
     }
   }
 
-  .actions {
-    display: flex;
-    gap: margin(0.5);
-    margin-top: margin(0.5);
+  .action {
+    margin: margin(-0.125) 0 0 auto;
   }
 
   .background {

package/src/routes/components/TitleModal.svelte

@@ -8,7 +8,6 @@
   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
@@ -41,8 +40,6 @@
 {#snippet bubble()}
   {#if topScrollAd}
     <TopScroll campaign={topScrollAd} />
-  {:else}
-    <ExploreCallToAction />
   {/if}
 {/snippet}
 
@@ -52,6 +49,6 @@
   {/if}
 {/snippet}
 
-<Modal {onscroll} {initialScrollPosition} {bubble} prepend={displayAd ? prepend : null} tall>
+<Modal {onscroll} {initialScrollPosition} prepend={displayAd ? prepend : null} bubble={topScrollAd ? bubble : null} tall>
   <Title {title} />
 </Modal>

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

@@ -2,7 +2,6 @@
   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'
@@ -17,22 +16,9 @@
   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',
-      },
-    }
-  }
 
-  // Used to re-render some elements with a key
-  let renderKey = Math.random()
+  // @ts-ignore
+  if (browser) window.PlayPilotLinkInjections = {}
 </script>
 
 <h1>Elements</h1>
@@ -167,29 +153,6 @@
   </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/tests/lib/api/ads.test.js

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

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 { getByText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByLabelText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
     expect(queryByText('Copy URL')).not.toBeTruthy()
     expect(queryByText('Email')).not.toBeTruthy()
 
-    await fireEvent.click(getByText('Share'))
+    await fireEvent.click(getByLabelText('Share'))
 
     expect(queryByText('Copy URL')).toBeTruthy()
     expect(queryByText('Email')).toBeTruthy()
   })
 
   it('Should close context menu on click of items', async () => {
-    const { getByText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByLabelText, getByText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
-    await fireEvent.click(getByText('Share'))
+    await fireEvent.click(getByLabelText('Share'))
     await fireEvent.click(getByText('Copy URL'))
 
     expect(queryByText('Copy URL')).not.toBeTruthy()
   })
 
   it('Should close context menu on click of body', async () => {
-    const { getByText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByLabelText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
-    await fireEvent.click(getByText('Share'))
+    await fireEvent.click(getByLabelText('Share'))
     await fireEvent.click(document.body)
 
     expect(queryByText('Copy URL')).not.toBeTruthy()
   })
 
   it('Should fire copyToClipboard on click of button', async () => {
-    const { getByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByLabelText, getByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
-    await fireEvent.click(getByText('Share'))
+    await fireEvent.click(getByLabelText('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 { getByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByLabelText, getByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
-    await fireEvent.click(getByText('Share'))
+    await fireEvent.click(getByLabelText('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 { getByText } = render(Share, { title: 'Some title', url: 'some-url' })
+    const { getByLabelText, getByText } = render(Share, { title: 'Some title', url: 'some-url' })
 
-    await fireEvent.click(getByText('Share'))
+    await fireEvent.click(getByLabelText('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,17 +91,4 @@ 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()
-  })
-
-  // Temporarily disabled while button is always visible
-  // 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/lib/explore.ts

@@ -1,59 +0,0 @@
-import { mount, unmount } from 'svelte'
-import Explore from '../routes/components/Explore/Explore.svelte'
-
-export const exploreParentSelector = `[data-playpilot-explore]`
-
-let exploreInsertedComponent: object | null = null
-
-/**
- * Insert the Explore component inside of the needed selector. If no element is found, do nothing.
- * Only one Explore component can exist per page.
- */
-export function insertExplore(): void {
-  const target = document.querySelector<HTMLElement>(exploreParentSelector)
-  if (!target) return
-
-  destroyExplore()
-
-  target.innerHTML = ''
-  exploreInsertedComponent = mount(Explore, { target })
-}
-
-export function destroyExplore(): void {
-  if (!exploreInsertedComponent) return
-
-  unmount(exploreInsertedComponent)
-  exploreInsertedComponent = null
-}
-
-/**
- * Copy over an existing element on the page given by the selector. This will link to a page that is
- * set up by the third party to hold the explore component.
- * @returns Whether or not the component was succesfully inserted
- */
-export function insertExploreIntoNavigation(): boolean {
-  const config = window.PlayPilotLinkInjections.config
-  if (!config) return false
-
-  const { explore_navigation_selector: selector, explore_navigation_label: label, explore_navigation_path: path, explore_navigation_insert_position: insertPosition } = window.PlayPilotLinkInjections.config
-  if (!selector) return false
-
-  // Make sure to remove an element we created if it already exists. Should not be possible under normal circumstances.
-  document.querySelector('[data-playpilot-explore-navigation-element]')?.remove()
-
-  const navigationElement = document.querySelector<HTMLElement>(selector)
-  if (!navigationElement) return false
-
-  const copiedElement = navigationElement.cloneNode(true) as HTMLElement
-  const linkElement = (copiedElement.nodeName === 'A' ? copiedElement : copiedElement.querySelector('a')) as HTMLLinkElement
-
-  linkElement.classList.remove('active')
-  linkElement.innerText = label || 'Streaming Guide'
-  linkElement.href = path
-
-  copiedElement.dataset.playpilotExploreNavigationElement = 'true'
-
-  navigationElement.insertAdjacentElement(insertPosition || 'afterend', copiedElement)
-
-  return true
-}

package/src/lib/trailer.ts

@@ -1,22 +0,0 @@
-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/api.d.ts

@@ -1,6 +0,0 @@
-export type APIPaginatedResult<T> = {
-  next: string | null
-  previous: string | null
-  results: T[]
-  count?: number
-}

package/src/routes/components/Button.svelte

@@ -1,73 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte'
-
-  interface Props {
-    variant?: 'filled' | 'border'
-    size?: 'base' | 'large'
-    active?: boolean
-    // eslint-disable-next-line no-unused-vars
-    onclick?: (event: MouseEvent) => void
-    children?: Snippet
-  }
-
-  const { variant = 'filled', size = 'base', active = false, onclick, children }: Props = $props()
-</script>
-
-<button class="button {variant} {size}" class:active {onclick}>
-  {@render children?.()}
-</button>
-
-<style lang="scss">
-  .button {
-    appearance: none;
-    display: flex;
-    height: 100%;
-    align-items: center;
-    justify-content: 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);
-    }
-
-    &.active {
-      box-shadow: inset 0 0 0 1px currentColor;
-    }
-  }
-
-  .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);
-    }
-  }
-
-  .large {
-    padding: 0.5em 1.5em;
-  }
-</style>
-

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

@@ -1,191 +0,0 @@
-<script lang="ts">
-  import { heading } from '$lib/actions/heading'
-  import { searchTitles } from '$lib/api/search'
-  import { fetchTitles } from '$lib/api/titles'
-  import { exploreParentSelector } from '$lib/explore'
-  import { openModal } from '$lib/modal'
-  import type { APIPaginatedResult } from '$lib/types/api'
-  import type { ContentType, TitleData } from '$lib/types/title'
-  import Button from '../Button.svelte'
-  import ListTitle from '../ListTitle.svelte'
-  import ListTitleSkeleton from '../ListTitleSkeleton.svelte'
-  import Filter from './Filter.svelte'
-  import Search from './Search.svelte'
-
-  type ExploreFilter = {
-    content_type?: ContentType
-  }
-
-  const filter: ExploreFilter = $state({})
-
-  let element: HTMLElement | null = null
-  let titles: TitleData[] = $state([])
-  let page = 1
-  let searchQuery = ''
-  let debounce: ReturnType<typeof setTimeout> | null = null
-  let promise = $state(getTitlesForFilter())
-  let height: string | null = $state(null)
-
-  $effect(() => {
-    // Set the height of this element to match that of it's container. That way we can
-    // allow our element to be scrollable, rather than the parent needing to be scrollable.
-    height = element?.closest<HTMLElement>(exploreParentSelector)?.style.height || null
-  })
-
-  async function getTitlesForFilter(): Promise<APIPaginatedResult<TitleData>> {
-    let response
-
-    // If a search query is given we use searchTitles with just the query.
-    // If not, we use fetchTitles with the given params for the filter.
-    // This is because the backend does not support filters for search results yet.
-    // In the future we will likely merge these two, either by adding filters in the backend
-    // or by filtering results in the frontend (this seems like the less good option).
-    if (searchQuery) {
-      const results: TitleData[] = await searchTitles(searchQuery)
-      response = { results, next: null, previous: null }
-
-      titles = results
-    } else {
-      const params = { page_size: 24, page, ...filter }
-
-      response = await fetchTitles(params)
-      if (!response?.results) throw new Error('Something went wrong when fetching titles in Explore')
-
-      titles = [...titles, ...response.results]
-    }
-
-    return response
-  }
-
-  async function search(query: string): Promise<void> {
-    searchQuery = query
-
-    if (debounce) clearTimeout(debounce)
-
-    debounce = setTimeout(() => {
-      resetTitles()
-      promise = getTitlesForFilter()
-    }, 100)
-  }
-
-  function setFilter(key: keyof ExploreFilter, value: any): void {
-    // If the value was previous present in the filter and a falsey value is given we remove it from
-    // the filter entirely so it will no longer be used as a param
-    if (!value && (key in filter)) {
-      delete filter[key]
-    } else if (value) {
-      filter[key] = value
-    }
-
-    resetTitles()
-    promise = getTitlesForFilter()
-  }
-
-  function resetTitles(): void {
-    page = 1
-    titles = []
-  }
-
-  function fetchMoreTitles(): void {
-    page++
-    promise = getTitlesForFilter()
-  }
-</script>
-
-<div class="explore playpilot-styled-scrollbar" bind:this={element} style:height>
-  <div class="header" role="banner">
-    <div class="heading" use:heading>
-      <strong>Site Name</strong>
-      <div class="divider"></div>
-      Streaming Guide
-    </div>
-
-    <div class="categories" role="navigation">
-      <Button size="large" active={!filter.content_type} onclick={() => setFilter('content_type', '')}>All</Button>
-      <Button size="large" active={filter.content_type === 'movie'} onclick={() => setFilter('content_type', 'movie')}>Movies</Button>
-      <Button size="large" active={filter.content_type === 'series'} onclick={() => setFilter('content_type', 'series')}>Shows</Button>
-    </div>
-
-    <Search oninput={search} />
-    <Filter />
-  </div>
-
-  <div class="titles" role="main">
-    {#each titles as title}
-      <ListTitle {title} onclick={(event) => openModal({ event, data: title })} />
-    {/each}
-
-    {#await promise}
-      {#each { length: 12 } as _}
-        <ListTitleSkeleton />
-      {/each}
-    {:then { next }}
-      {#if next}
-        <div class="show-more">
-          <Button size="large" onclick={fetchMoreTitles}>Show more</Button>
-        </div>
-      {/if}
-    {:catch}
-      Something went wrong
-    {/await}
-  </div>
-</div>
-
-<style lang="scss">
-  .explore {
-    background: theme(explore-background, light);
-    border-radius: theme(border-radius-large);
-    max-width: 600px;
-    margin: 0 auto;
-    padding: margin(1);
-    overflow: auto;
-    font-family: theme(font-family);
-    font-family: theme(detail-font-family, font-family);
-    font-weight: theme(detail-font-weight, normal);
-    font-size: theme(detail-font-size, font-size-base);
-  }
-
-  .header {
-    display: flex;
-    flex-direction: column;
-    gap: margin(0.5);
-    margin-bottom: margin(2);
-  }
-
-  .heading {
-    display: flex;
-    justify-content: center;
-    gap: margin(0.5);
-    margin: margin(1) 0;
-    color: theme(text-color);
-  }
-
-  .divider {
-    width: 2px;
-    height: 0.5lh;
-    margin-top: 0.25lh;
-    background: currentColor;
-  }
-
-  .categories {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: margin(0.5);
-  }
-
-  .titles {
-    --playpilot-list-item-padding: 0;
-    --playpilot-list-item-background: transparent;
-    --playpilot-list-item-hover-shadow: 0 0 0 #{margin(0.25)} #{theme(lighter)};
-    --playpilot-detail-image-background: #{theme(content)};
-    display: flex;
-    flex-direction: column;
-    gap: margin(0.5);
-  }
-
-  .show-more {
-    flex: 0 0 100%;
-    display: grid;
-    margin-top: margin(0.5);
-  }
-</style>

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

@@ -1,58 +0,0 @@
-<script lang="ts">
-  import IconArrow from '../Icons/IconArrow.svelte'
-  import ImageTitlesList from '$lib/images/titles-list.webp'
-  import { openModal } from '$lib/modal'
-</script>
-
-<button class="call-to-action" onclick={() => openModal({ type: 'explore' })}>
-  <img src={ImageTitlesList} alt="" width="70" height="57" />
-
-  <div>
-    <strong>Looking for something else?</strong>
-    <div>Use our streamingguide</div>
-  </div>
-
-  <div class="arrow">
-    <IconArrow />
-  </div>
-</button>
-
-<style lang="scss">
-  strong {
-    color: theme(text-color);
-    font-size: theme(font-size-base);
-    font-weight: normal;
-  }
-
-  .call-to-action {
-    appearance: none;
-    display: flex;
-    align-items: center;
-    gap: margin(1);
-    width: 100%;
-    padding: margin(1);
-    border: 0;
-    border-radius: theme(border-radius-large) theme(border-radius-large) 0 0;
-    background: theme(light);
-    font-family: theme(font-family);
-    color: theme(text-color-alt);
-    font-size: theme(font-size-small);
-    line-height: 1.5;
-    text-align: left;
-    cursor: pointer;
-
-    &:hover {
-      filter: brightness(theme(hover-filter-brightness));
-    }
-  }
-
-  .arrow {
-    margin-left: auto;
-
-    :global(svg) {
-      display: block;
-      height: margin(1.25);
-      width: auto;
-    }
-  }
-</style>