@playpilot/tpi 8.22.0-beta.1 → 8.23.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.22.0-beta.1",
+	"version": "8.23.0-beta.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@@ -38,7 +38,7 @@
 		"svelte": "5.55.7",
 		"svelte-check": "^4.6.0",
 		"svelte-preprocess": "^6.0.5",
-		"svelte-tiny-slider": "^2.7.2",
+		"svelte-tiny-slider": "^2.8.0",
 		"typescript": "^6.0.3",
 		"typescript-eslint": "^8.62.0",
 		"vite": "^5.4.21",

package/src/lib/api/api.ts

@@ -7,10 +7,9 @@ type Options = {
   headers?: Record<string, string>
   method?: 'POST' | 'GET'
   body?: null | Record<string, any>
-  baseUrl?: string
 }
 
-export async function api<T>(path: string, { headers = {}, method = 'GET', body = null, baseUrl = apiBaseUrl }: Options = {}): Promise<T> {
+export async function api<T>(path: string, { headers = {}, method = 'GET', body = null }: Options = {}): Promise<T> {
   // For GET methods we store all results in a cache object. This cache is super simple and has no invalidation at all.
   // Once something is stored it's there forever since the page is only short lived.
   // We never use the cache for editiorial mode since in the editor requests do change.
@@ -19,7 +18,7 @@ export async function api<T>(path: string, { headers = {}, method = 'GET', body
 
   const baseHeaders: Record<string, string> = method === 'GET' ? {} : { 'Content-Type': 'application/json' }
 
-  const response = await fetch(baseUrl + path, {
+  const response = await fetch(apiBaseUrl + path, {
     method,
     headers: new Headers({ ...baseHeaders, ...headers }),
     // eslint-disable-next-line no-undef

package/src/lib/modal.ts

@@ -11,11 +11,12 @@ import { playFallbackViewTransition } from './viewTransition'
 import { destroyLinkPopover } from './popover'
 import { prefersReducedMotion } from 'svelte/motion'
 import TitlesRailModal from '../routes/components/Modals/TitlesRailModal.svelte'
+import TitlesReelModal from '../routes/components/Modals/TitlesReelModal.svelte'
 
 type Modal = {
   injection?: LinkInjection | null
   component?: object
-  type: 'title' | 'participant' | 'titles-rail'
+  type: 'title' | 'participant' | 'titles-rail' | 'titles-reel'
   data: TitleData | TitleData[] | ParticipantData | null
   scrollPosition?: number
 }
@@ -52,6 +53,7 @@ function getModalComponentByType(
   { type: Modal['type'], target: Element, data: Modal['data'], props?: Record<string, any> }): ReturnType<typeof mount> {
   if (type === 'participant') return mount(ParticipantModal, { target, props: { participant: data as ParticipantData, ...props  } })
   if (type === 'titles-rail') return mount(TitlesRailModal, { target, props: { titles: data as TitleData[], ...props } })
+  if (type === 'titles-reel') return mount(TitlesReelModal, { target, props: { titles: data as TitleData[], ...props } })
   return mount(TitleModal, { target, props: { title: data as TitleData, ...props } })
 }
 

package/src/lib/types/global.d.ts

@@ -18,6 +18,8 @@ declare global {
 declare module 'svelte/elements' {
   interface SvelteWindowAttributes {
     onupdateconsent?: (event: CustomEvent<{}>) => void
+    onplayembed?: (event: CustomEvent<{}>) => void
+    onpauseembed?: (event: CustomEvent<{}>) => void
   }
 }
 

package/src/lib/types/language.d.ts

@@ -1 +1 @@
-export type LanguageCode = 'en-US' | 'sv-SE' | 'da-DK'
+export type LanguageCode = 'en-US' | 'sv-SE' | 'dk-DK'

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

@@ -2,23 +2,37 @@
   import type { TitleData } from '$lib/types/title'
   import { fetchTitles } from '$lib/api/titles'
   import { t } from '$lib/localization'
+  import { Sorting } from '$lib/enums/Sorting'
   import { track } from '$lib/tracking'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import TitlesRail from '../../Rails/TitlesRail.svelte'
   import { mobileBreakpoint } from '$lib/constants'
-  import { getLanguage } from '$lib/language'
-  import type { LanguageCode } from '$lib/types/language'
-  import { api } from '$lib/api/api'
 
   let expandedTitle: TitleData | null = $state(null)
   let expandedRailKey: string | null = $state(null)
   let windowWidth: number = $state(window.innerWidth)
 
-  type Rail = { headings: Record<LanguageCode, string>, params: Record<string, any>, properties: Record<string, any> }
-
-  async function fetchRails(): Promise<Rail[]> {
-    return await api<Rail[]>('/streaming-guide/rails', { baseUrl: 'https://partner.playpilot.net/api' })
-  }
+  const rails: { heading: string, params: Record<string, any>, properties: Record<string, any> }[] = [{
+    heading: 'List: Upcoming',
+    params: { from_playlist_sid: 'li42wf', region: null, no_region_filter: true },
+    properties: { expandable: true },
+  }, {
+    heading: 'List: Trending',
+    params: { ordering: Sorting.Popular },
+    properties: { expandable: true },
+  }, {
+    heading: 'List: New',
+    params: { from_playlist_sid: 'li42WR', include_playable_types: 'SVOD,FREE' },
+    properties: { aside: true, size: 'flexible' },
+  }, {
+    heading: 'List: Cinema',
+    params: { from_playlist_sid: 'li42WS', region: null, no_region_filter: true },
+    properties: { expandable: true },
+  }, {
+    heading: 'List: Demand',
+    params: { from_playlist_sid: 'licBS' },
+    properties: { aside: true, size: 'flexible' },
+  }]
 
   async function getListTitles(params: Record<string, any> = {}): Promise<TitleData[]> {
     try {
@@ -35,28 +49,20 @@
 
 <div data-testid="explore-home"></div>
 
-{#await fetchRails()}
-  <TitlesRail titles={new Promise((res) => setTimeout(res, 10000))} size={windowWidth >= mobileBreakpoint ? 'flexible' : 'huge'} />
-{:then rails}
-  {#each rails as { headings, params, properties }}
-    {@const heading = headings[getLanguage()]}
-
-    <div class="rail">
-      <TitlesRail
-        {heading}
-        titles={getListTitles(params)}
-        size={windowWidth >= mobileBreakpoint ? (properties.size || 'flexible') : 'huge'}
-        minimumLength={7}
-        {...properties}
-        bind:expandedTitle
-        bind:expandedRailKey
-        onclick={() => track(TrackingEvent.ExploreTitleRailModalView, null, { rail: headings })}
-        onexpand={(title) => track(TrackingEvent.ExploreTitleRailExpandClick, title, { rail: headings })} />
-    </div>
-  {/each}
-{:catch}
-  {t('An Error Occurred')}
-{/await}
+{#each rails as { heading, params, properties }}
+  <div class="rail">
+    <TitlesRail
+      heading={t(heading)}
+      titles={getListTitles(params)}
+      size={windowWidth >= mobileBreakpoint ? 'flexible' : 'huge'}
+      minimumLength={7}
+      {...properties}
+      bind:expandedTitle
+      bind:expandedRailKey
+      onclick={() => track(TrackingEvent.ExploreTitleRailModalView, null, { rail: heading })}
+      onexpand={(title) => track(TrackingEvent.ExploreTitleRailExpandClick, title, { rail: heading })} />
+  </div>
+{/each}
 
 <style lang="scss">
   .rail {

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { fetchSimilarTitles, fetchTitleBySid } from '$lib/api/titles'
+  import { mobileBreakpoint } from '$lib/constants'
   import { openModal } from '$lib/modal'
   import type { TitleData } from '$lib/types/title'
 
@@ -14,6 +15,7 @@
   async function openModalViaRoute(): Promise<void> {
     const currentUrl = new URL(document.location.toString())
     const sid = currentUrl.searchParams.get('sid')
+    const type = window.innerWidth > mobileBreakpoint ? 'titles-rail' : 'titles-reel'
 
     if (!sid) return
 
@@ -24,7 +26,7 @@
       ).map(promise => (promise.status === 'fulfilled' ? promise.value : null))
 
       openModal({
-        type: 'titles-rail',
+        type,
         data: [(title as TitleData), ...(railTitles as TitleData[])],
         props: {
           onclose: () => navigate('home'),

package/src/routes/components/Modals/ModalCloseOverlay.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { scale } from 'svelte/transition'
+  import { destroyAllModals } from '$lib/modal'
+  import RoundButton from '../RoundButton.svelte'
+  import IconClose from '../Icons/IconClose.svelte'
+  import IconArrow from '../Icons/IconArrow.svelte'
+  import Button from '../Button.svelte'
+
+  interface Props {
+    label?: string
+    onclose?: () => void
+  }
+
+  const { label = '', onclose = () => null }: Props = $props()
+</script>
+
+{#if label}
+  <div class="back">
+    <Button variant="link" onclick={() => { onclose(); destroyAllModals() }}>
+      <IconArrow direction="left" />
+      {label}
+    </Button>
+  </div>
+{/if}
+
+<div class="close" transition:scale|global>
+  <RoundButton size="42px" onclick={() => { onclose(); destroyAllModals() }} aria-label="Close">
+    <IconClose size={24} />
+  </RoundButton>
+</div>
+
+<style lang="scss">
+  .back {
+    position: absolute;
+    top: margin(1.5);
+    left: var(--modal-close-overlay-left, margin(1));
+    font-family: theme(font-family);
+    transition: transform 50ms;
+
+    @include desktop {
+      left: margin(1);
+    }
+
+    &:hover {
+      transform: scale(1.025);
+
+      :global(button) {
+        text-decoration-thickness: 2px;
+      }
+    }
+
+    :global(button) {
+      text-decoration: underline;
+      color: white;
+    }
+  }
+
+  .close {
+    --playpilot-button-background: transparent;
+    --playpilot-button-text-color: white;
+    position: absolute;
+    top: margin(1);
+    right: margin(1);
+  }
+</style>

package/src/routes/components/Modals/RailModal.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
   import { onMount, type Snippet } from 'svelte'
   import TinySlider from 'svelte-tiny-slider'
-  import { fade, scale } from 'svelte/transition'
-  import { destroyAllModals } from '$lib/modal'
+  import { fade } from 'svelte/transition'
   import Modal from './Modal.svelte'
-  import RoundButton from '../RoundButton.svelte'
-  import IconClose from '../Icons/IconClose.svelte'
   import IconArrow from '../Icons/IconArrow.svelte'
-  import Button from '../Button.svelte'
+  import ModalCloseOverlay from './ModalCloseOverlay.svelte'
 
   interface Props {
     items: Record<string, any>[]
@@ -76,19 +73,8 @@
       </TinySlider>
     </div>
 
-    {#if window.location.href.includes('route=modal')}
-      <div class="back">
-        <Button variant="link" onclick={() => { onclose(); destroyAllModals() }}>
-          <IconArrow direction="left" />
-          Streaming guide
-        </Button>
-      </div>
-    {/if}
-
-    <div class="close" transition:scale|global>
-      <RoundButton size="42px" onclick={() => { onclose(); destroyAllModals() }} aria-label="Close">
-        <IconClose size={24} />
-      </RoundButton>
+    <div class="close">
+      <ModalCloseOverlay {onclose} label={window.location.href.includes('route=modal') ? 'Streaming guide' : ''} />
     </div>
   {/snippet}
 </Modal>
@@ -178,39 +164,6 @@
     }
   }
 
-  .close {
-    --playpilot-button-background: transparent;
-    --playpilot-button-text-color: white;
-    position: absolute;
-    top: margin(1);
-    right: margin(1);
-  }
-
-  .back {
-    position: absolute;
-    top: margin(1.5);
-    left: calc((100vw - $size) / 2);
-    font-family: theme(font-family);
-    transition: transform 50ms;
-
-    @include desktop {
-      left: margin(1);
-    }
-
-    &:hover {
-      transform: scale(1.025);
-
-      :global(button) {
-        text-decoration-thickness: 2px;
-      }
-    }
-
-    :global(button) {
-      text-decoration: underline;
-      color: white;
-    }
-  }
-
   .arrow {
     --offset: #{margin(-1.25)};
     --scale: 1;
@@ -254,4 +207,8 @@
       right: var(--offset);
     }
   }
+
+  .close {
+    --modal-close-overlay-left: calc((100vw - $size) / 2)
+  }
 </style>

package/src/routes/components/Modals/TitlesReelModal.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+  import type { TitleData } from '$lib/types/title'
+  import { onMount } from 'svelte'
+  import { heading } from '$lib/actions/heading'
+  import { t } from '$lib/localization'
+  import TinySlider from 'svelte-tiny-slider'
+  import Modal from './Modal.svelte'
+  import TitleBackground from '../TitleBackground.svelte'
+  import Description from '../Description.svelte'
+  import TitleInfo from '../TitleInfo.svelte'
+  import PlaylinksCompact from '../Playlinks/PlaylinksCompact.svelte'
+  import PlaylinksDisclaimer from '../Playlinks/PlaylinksDisclaimer.svelte'
+  import ModalCloseOverlay from './ModalCloseOverlay.svelte'
+
+  interface Props {
+    titles: TitleData[],
+  }
+
+  const { titles }: Props = $props()
+
+  let interval: ReturnType<typeof setInterval> | null = null
+
+  onMount(() => {
+    pauseAndPlay(0)
+
+    return () => {
+      if (interval) clearInterval(interval)
+    }
+  })
+
+  function pauseAndPlay(index: number): void {
+    ;[titles[index - 1], titles[index + 1]].forEach(title => {
+      window.dispatchEvent(new CustomEvent('pauseembed', { detail: title?.embeddable_url } ))
+    })
+
+    const currentTitle = titles[index]
+
+    if (interval) clearInterval(interval)
+
+    // This is on an interval because we don't know when the video loads, so we just continuously play and hope for the best.
+    interval = setInterval(() => {
+      window.dispatchEvent(new CustomEvent('playembed', { detail: currentTitle?.embeddable_url } ))
+    }, 500)
+  }
+</script>
+
+<div class="reel">
+  <Modal>
+    {#snippet dialog()}
+      <div class="slider">
+        <TinySlider vertical threshold={100} moveThreshold={20} onchange={pauseAndPlay}>
+          {#snippet children({ currentIndex, setIndex })}
+            {#each titles as title, index}
+              <!-- svelte-ignore a11y_click_events_have_key_events -->
+              <!-- svelte-ignore a11y_no_static_element_interactions -->
+              <div class="item" onclick={() => setIndex(index)}>
+                {#if Math.abs(index - currentIndex) <= 2 || currentIndex === index}
+                  <div class="content">
+                    <div class="header">
+                      <div class="heading" use:heading={2}>{title.title}</div>
+
+                      <TitleInfo {title} />
+                    </div>
+
+                    <div class="details">
+                      <Description text={title.description!} blurb={title.blurb} limit={80} />
+
+                      <div class="playlinks-heading" use:heading={3}>{t('Where To Stream Online')}</div>
+
+                      <PlaylinksCompact playlinks={title.providers} size={24} />
+
+                      <PlaylinksDisclaimer playlinks={title.providers} />
+                    </div>
+                  </div>
+
+                  <TitleBackground {title} useVideoBackground autoplay={false} inline />
+
+                  <div class="gradient"></div>
+                {/if}
+              </div>
+            {/each}
+          {/snippet}
+        </TinySlider>
+      </div>
+
+      <ModalCloseOverlay label="Streaming guide" />
+    {/snippet}
+  </Modal>
+</div>
+
+<style lang="scss">
+  $modal-height: 90dvh;
+  $item-height: calc(90dvh - margin(7));
+
+  .reel {
+    --playpilot-detail-background-height: #{$item-height};
+    --playpilot-detail-background-border-radius: 0;
+    --playpilot-detail-background-width: 400%;
+    --background-mask-image: unset;
+
+    :global(*) {
+      box-sizing: border-box;
+    }
+
+    :global(iframe) {
+      pointer-events: none;
+      z-index: 0;
+    }
+
+    :global(.modal) {
+      padding: 0;
+    }
+  }
+
+  .slider {
+    margin-top: 10dvh;
+    height: $modal-height;
+    width: 100%;
+    border-radius: theme(border-radius-large) theme(border-radius-large) 0 0;
+    overflow: hidden;
+  }
+
+  .item {
+    position: relative;
+    width: 100dvw;
+    height: $item-height;
+    background: theme(detail-background, light);
+    overflow: hidden;
+  }
+
+  .content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+    color: theme(detail-text-color, text-color);
+    font-family: theme(detail-font-family, font-family);
+    font-weight: theme(detail-font-weight, normal);
+    font-size: theme(detail-font-size, font-size-base);
+    line-height: normal;
+    font-style: normal;
+  }
+
+  .header {
+    position: relative;
+    z-index: 2;
+    padding: theme(reel-item-padding, margin(2));
+    font-size: theme(reel-header-font-size, font-size-small);
+  }
+
+  .heading {
+    margin-bottom: margin(0.5);
+    color: theme(detail-title-text-color, text-color);
+    font-family: theme(detail-title-font-family, inherit);
+    font-weight: theme(detail-title-font-weight, lighter);
+    font-size: theme(detail-title-font-size, margin(1.25));
+    font-style: theme(detail-title-font-style, normal);
+    line-height: 1.2;
+  }
+
+  .details {
+    z-index: 1;
+    position: relative;
+    padding: theme(reel-item-padding, margin(2));
+    background: linear-gradient(to bottom, transparent, theme(detail-background, light) 4rem);
+    font-size: theme(detail-font-size, font-size-base);
+  }
+
+  .playlinks-heading {
+    margin: margin(0.5) 0;
+    color: theme(reel-playlinks-title-color, text-color-alt);
+    font-family: theme(reel-playlinks-title-font-family, inherit);
+    font-weight: theme(reel-playlinks-title-font-weight, lighter);
+    font-size: theme(reel-playlinks-title-font-size, font-size-small);
+    line-height: normal;
+  }
+
+  .gradient {
+    z-index: 1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: margin(7);
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
+  }
+</style>

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

@@ -10,6 +10,7 @@
   import { getContext } from 'svelte'
   import Playlink from './Playlink.svelte'
   import Button from '../Button.svelte'
+  import PlaylinksDisclaimer from './PlaylinksDisclaimer.svelte'
 
   type Category = PlaylinkCategory | '' | 'Other'
   type CategorizedPlaylinks = Partial<Record<Category, PlaylinkData[]>>
@@ -79,16 +80,7 @@
 
 <div class="heading" use:heading={3}>{t('Where To Stream Online')}</div>
 
-{#if mergedPlaylinks.length}
-  <div class="disclaimer" data-testid="commission-disclaimer">
-    {window?.PlayPilotLinkInjections?.config?.playlinks_disclaimer_text || t('Commission Disclaimer')}
-    <a href="https://playpilot.com/" target="_blank" rel="sponsored">PlayPilot.com</a>
-  </div>
-{:else}
-  <div class="empty" data-testid="playlinks-empty">
-    {t('Title Unavailable')}
-  </div>
-{/if}
+<PlaylinksDisclaimer playlinks={mergedPlaylinks} />
 
 {#each sortedPlaylinks as [category, playlinks]}
   {#if category && playlinks.length}
@@ -146,35 +138,7 @@
     }
   }
 
-  .disclaimer {
-    margin: theme(playlinks-disclaimer-margin, margin(0.5)) 0;
-    opacity: theme(playlinks-disclaimer-opacity, 0.65);
-    color: theme(playlinks-disclaimer-text-color, text-color-alt);
-    font-size: theme(playlinks-disclaimer-font-size, margin(0.625));
-    font-style: theme(playlinks-disclaimer-font-style, normal);
-
-    a {
-      color: inherit;
-      font-size: inherit;
-      font-style: inherit;
-
-      &:hover {
-        color: theme(playlinks-disclaimer-text-color-hover, text-color);
-      }
-    }
-  }
-
   .show-more {
     margin-top: margin(0.5);
   }
-
-  .empty {
-    padding: margin(0.75);
-    margin-top: margin(0.5);
-    background: theme(playlink-background, lighter);
-    box-shadow: theme(playlink-shadow, shadow);
-    border-radius: theme(playlink-border-radius, border-radius);
-    white-space: initial;
-    line-height: 1.35;
-  }
 </style>

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

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { t } from '$lib/localization'
+  import type { PlaylinkData } from '$lib/types/playlink'
+
+  interface Props {
+    playlinks: PlaylinkData[]
+  }
+
+  const { playlinks }: Props = $props()
+</script>
+
+{#if playlinks.length}
+  <div class="disclaimer" data-testid="commission-disclaimer">
+    {window?.PlayPilotLinkInjections?.config?.playlinks_disclaimer_text || t('Commission Disclaimer')}
+    <a href="https://playpilot.com/" target="_blank" rel="sponsored">PlayPilot.com</a>
+  </div>
+{:else}
+  <div class="empty" data-testid="playlinks-empty">
+    {t('Title Unavailable')}
+  </div>
+{/if}
+
+<style lang="scss">
+  .disclaimer {
+    margin: theme(playlinks-disclaimer-margin, margin(0.5)) 0;
+    opacity: theme(playlinks-disclaimer-opacity, 0.65);
+    color: theme(playlinks-disclaimer-text-color, text-color-alt);
+    font-size: theme(playlinks-disclaimer-font-size, margin(0.625));
+    font-style: theme(playlinks-disclaimer-font-style, normal);
+
+    a {
+      color: inherit;
+      font-size: inherit;
+      font-style: inherit;
+
+      &:hover {
+        color: theme(playlinks-disclaimer-text-color-hover, text-color);
+      }
+    }
+  }
+
+  .empty {
+    padding: margin(0.75);
+    margin-top: margin(0.5);
+    background: theme(playlink-background, lighter);
+    box-shadow: theme(playlink-shadow, shadow);
+    border-radius: theme(playlink-border-radius, border-radius);
+    white-space: initial;
+    line-height: 1.35;
+  }
+</style>