@playpilot/tpi 5.32.3 → 5.33.0-beta.explore.10

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "5.32.3",
+	"version": "5.33.0-beta.explore.10",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/afterArticle.ts

@@ -0,0 +1,40 @@
+import { mount, unmount } from 'svelte'
+import AfterArticlePlaylinks from '../routes/components/Playlinks/AfterArticlePlaylinks.svelte'
+import type { LinkInjection } from './types/injection'
+import { openModal } from './modal'
+
+export let afterArticlePlaylinkInsertedComponent: object | null = null
+
+/**
+ * Insert AfterArticlePlaylinks after the last valid element or at the position given in the window config object.
+ * The config object contains a selector option as well as a position. This way a selector can be given and you can
+ * choose to insert the after article before or after the given element.
+ */
+export function insertAfterArticlePlaylinks(elements: HTMLElement[], injections: LinkInjection[]): void {
+  if (afterArticlePlaylinkInsertedComponent) return
+  if (!injections.length) return
+
+  const target = document.createElement('div')
+  const afterArticleSelector = window.PlayPilotLinkInjections?.after_article_selector
+  const insertElement = (afterArticleSelector ? document.querySelector(afterArticleSelector) : null) || elements[elements.length - 1]
+  const insertPosition = window.PlayPilotLinkInjections?.after_article_insert_position || 'afterend'
+
+  target.dataset.playpilotAfterArticlePlaylinks = 'true'
+  insertElement.insertAdjacentElement(insertPosition, target)
+
+  afterArticlePlaylinkInsertedComponent = mount(AfterArticlePlaylinks, {
+    target,
+    props: {
+      linkInjections: injections,
+      onclickmodal: (event, injection) => openModal({ event, injection, data: injection.title_details }),
+    },
+  })
+}
+
+export function clearAfterArticlePlaylinks(): void {
+  if (!afterArticlePlaylinkInsertedComponent) return
+
+  unmount(afterArticlePlaylinkInsertedComponent)
+  document.querySelector('[data-playpilot-after-article-playlinks]')?.remove()
+  afterArticlePlaylinkInsertedComponent = null
+}

package/src/lib/api/api.ts

@@ -16,7 +16,7 @@ export async function api<T>(path: string, { headers = {}, method = 'GET', body
   const useCache = !isEditorialModeEnabled() && method === 'GET'
   if (useCache && (path in cache)) return cache[path]
 
-  const baseHeaders = { 'Content-Type': 'application/json' }
+  const baseHeaders: Record<string, string> = method === 'GET' ? {} : { 'Content-Type': 'application/json' }
 
   const response = await fetch(apiBaseUrl + path, {
     method,

package/src/lib/api/titles.ts

@@ -1,9 +1,21 @@
 import { getApiToken } from '$lib/token'
+import type { APIPaginatedResult } from '$lib/types/api'
 import type { TitleData } from '../types/title'
 import { api } from './api'
 
+export async function fetchTitles(params: Record<string, string | number> = {}): Promise<APIPaginatedResult<TitleData>> {
+  const apiToken = getApiToken()
+
+  if (!apiToken) throw new Error('No token was provided')
+
+  const paramsAsString = Object.entries(params).map(([key, value]) => `${key}=${value}`).join('&')
+  const response = await api<APIPaginatedResult<TitleData>>(`/titles/browse?api-token=${apiToken}&` + paramsAsString)
+
+  return response
+}
+
 export async function fetchSimilarTitles(title: TitleData): Promise<TitleData[]> {
-  const response = await api<{ results: TitleData[] }>(`/titles/browse?api-token=${getApiToken()}&related_to_sid=${title.sid}`)
+  const response = await fetchTitles({ related_to_sid: title.sid })
 
   return response.results
 }

package/src/lib/color.ts

@@ -0,0 +1,19 @@
+/** Adjust the lightness of an RGB color. */
+export function colorLuminance(input: string, luminosity: number): string {
+	const match = input
+		.replace(/\s+/g, '')
+		.match(/^rgb\((\d+),(\d+),(\d+)\)$/i)
+
+	if (!match) return ''
+
+	const [, r, g, b] = match
+
+	const adjust = (v: string) => {
+		const color = parseInt(v, 10)
+		return Math.round(Math.min(Math.max(0, color + color * luminosity), 255))
+	}
+
+	return `rgb(${adjust(r)}, ${adjust(g)}, ${adjust(b)})`
+}
+
+

package/src/lib/data/countries.json

@@ -0,0 +1,216 @@
+[
+  { "label": "Aruba", "value": "AW" },
+  { "label": "Afghanistan", "value": "AF" },
+  { "label": "Angola", "value": "AO" },
+  { "label": "Anguilla", "value": "AI" },
+  { "label": "Albania", "value": "AL" },
+  { "label": "Andorra", "value": "AD" },
+  { "label": "United Arab Emirates", "value": "AE" },
+  { "label": "Argentina", "value": "AR" },
+  { "label": "Armenia", "value": "AM" },
+  { "label": "American Samoa", "value": "AS" },
+  { "label": "Antigua and Barbuda", "value": "AG" },
+  { "label": "Australia", "value": "AU" },
+  { "label": "Austria", "value": "AT" },
+  { "label": "Azerbaijan", "value": "AZ" },
+  { "label": "Burundi", "value": "BI" },
+  { "label": "Belgium", "value": "BE" },
+  { "label": "Benin", "value": "BJ" },
+  { "label": "Burkina Faso", "value": "BF" },
+  { "label": "Bangladesh", "value": "BD" },
+  { "label": "Bulgaria", "value": "BG" },
+  { "label": "Bahrain", "value": "BH" },
+  { "label": "Bahamas", "value": "BS" },
+  { "label": "Bosnia and Herzegovina", "value": "BA" },
+  { "label": "Belarus", "value": "BY" },
+  { "label": "Belize", "value": "BZ" },
+  { "label": "Bermuda", "value": "BM" },
+  { "label": "Bolivia", "value": "BO" },
+  { "label": "Brazil", "value": "BR" },
+  { "label": "Barbados", "value": "BB" },
+  { "label": "Brunei", "value": "BN" },
+  { "label": "Bhutan", "value": "BT" },
+  { "label": "Botswana", "value": "BW" },
+  { "label": "Central African Republic", "value": "CF" },
+  { "label": "Canada", "value": "CA" },
+  { "label": "Switzerland", "value": "CH" },
+  { "label": "Chile", "value": "CL" },
+  { "label": "China", "value": "CN" },
+  { "label": "Côte d'Ivoire", "value": "CI" },
+  { "label": "Cameroon", "value": "CM" },
+  { "label": "DR Congo", "value": "CD" },
+  { "label": "Congo", "value": "CG" },
+  { "label": "Cook Islands", "value": "CK" },
+  { "label": "Colombia", "value": "CO" },
+  { "label": "Comoros", "value": "KM" },
+  { "label": "Cabo Verde", "value": "CV" },
+  { "label": "Costa Rica", "value": "CR" },
+  { "label": "Cuba", "value": "CU" },
+  { "label": "Curaçao", "value": "CW" },
+  { "label": "Cayman Islands", "value": "KY" },
+  { "label": "Cyprus", "value": "CY" },
+  { "label": "Czechia", "value": "CZ" },
+  { "label": "Germany", "value": "DE" },
+  { "label": "Djibouti", "value": "DJ" },
+  { "label": "Dominica", "value": "DM" },
+  { "label": "Denmark", "value": "DK" },
+  { "label": "Dominican Republic", "value": "DO" },
+  { "label": "Algeria", "value": "DZ" },
+  { "label": "Ecuador", "value": "EC" },
+  { "label": "Egypt", "value": "EG" },
+  { "label": "Eritrea", "value": "ER" },
+  { "label": "Spain", "value": "ES" },
+  { "label": "Estonia", "value": "EE" },
+  { "label": "Ethiopia", "value": "ET" },
+  { "label": "Finland", "value": "FI" },
+  { "label": "Fiji", "value": "FJ" },
+  { "label": "Falkland Islands", "value": "FK" },
+  { "label": "France", "value": "FR" },
+  { "label": "Faroe Islands", "value": "FO" },
+  { "label": "Micronesia", "value": "FM" },
+  { "label": "Gabon", "value": "GA" },
+  { "label": "United Kingdom", "value": "GB" },
+  { "label": "Georgia", "value": "GE" },
+  { "label": "Ghana", "value": "GH" },
+  { "label": "Gibraltar", "value": "GI" },
+  { "label": "Guinea", "value": "GN" },
+  { "label": "Guadeloupe", "value": "GP" },
+  { "label": "Gambia", "value": "GM" },
+  { "label": "Guinea-Bissau", "value": "GW" },
+  { "label": "Equatorial Guinea", "value": "GQ" },
+  { "label": "Greece", "value": "GR" },
+  { "label": "Grenada", "value": "GD" },
+  { "label": "Greenland", "value": "GL" },
+  { "label": "Guatemala", "value": "GT" },
+  { "label": "Guyana", "value": "GY" },
+  { "label": "Hong Kong", "value": "HK" },
+  { "label": "Honduras", "value": "HN" },
+  { "label": "Croatia", "value": "HR" },
+  { "label": "Haiti", "value": "HT" },
+  { "label": "Hungary", "value": "HU" },
+  { "label": "Indonesia", "value": "ID" },
+  { "label": "India", "value": "IN" },
+  { "label": "Ireland", "value": "IE" },
+  { "label": "Iran", "value": "IR" },
+  { "label": "Iraq", "value": "IQ" },
+  { "label": "Iceland", "value": "IS" },
+  { "label": "Israel", "value": "IL" },
+  { "label": "Italy", "value": "IT" },
+  { "label": "Jamaica", "value": "JM" },
+  { "label": "Jordan", "value": "JO" },
+  { "label": "Japan", "value": "JP" },
+  { "label": "Kazakhstan", "value": "KZ" },
+  { "label": "Kenya", "value": "KE" },
+  { "label": "Kyrgyzstan", "value": "KG" },
+  { "label": "Cambodia", "value": "KH" },
+  { "label": "Kiribati", "value": "KI" },
+  { "label": "Saint Kitts and Nevis", "value": "KN" },
+  { "label": "South Korea", "value": "KR" },
+  { "label": "Kuwait", "value": "KW" },
+  { "label": "Laos", "value": "LA" },
+  { "label": "Lebanon", "value": "LB" },
+  { "label": "Liberia", "value": "LR" },
+  { "label": "Libya", "value": "LY" },
+  { "label": "Saint Lucia", "value": "LC" },
+  { "label": "Liechtenstein", "value": "LI" },
+  { "label": "Sri Lanka", "value": "LK" },
+  { "label": "Lesotho", "value": "LS" },
+  { "label": "Lithuania", "value": "LT" },
+  { "label": "Luxembourg", "value": "LU" },
+  { "label": "Latvia", "value": "LV" },
+  { "label": "Macao", "value": "MO" },
+  { "label": "Morocco", "value": "MA" },
+  { "label": "Monaco", "value": "MC" },
+  { "label": "Moldova", "value": "MD" },
+  { "label": "Madagascar", "value": "MG" },
+  { "label": "Maldives", "value": "MV" },
+  { "label": "Mexico", "value": "MX" },
+  { "label": "Marshall Islands", "value": "MH" },
+  { "label": "North Macedonia", "value": "MK" },
+  { "label": "Mali", "value": "ML" },
+  { "label": "Malta", "value": "MT" },
+  { "label": "Myanmar", "value": "MM" },
+  { "label": "Montenegro", "value": "ME" },
+  { "label": "Mongolia", "value": "MN" },
+  { "label": "Mozambique", "value": "MZ" },
+  { "label": "Mauritania", "value": "MR" },
+  { "label": "Martinique", "value": "MQ" },
+  { "label": "Mauritius", "value": "MU" },
+  { "label": "Malawi", "value": "MW" },
+  { "label": "Malaysia", "value": "MY" },
+  { "label": "Namibia", "value": "NA" },
+  { "label": "New Caledonia", "value": "NC" },
+  { "label": "Niger", "value": "NE" },
+  { "label": "Nigeria", "value": "NG" },
+  { "label": "Nicaragua", "value": "NI" },
+  { "label": "Niue", "value": "NU" },
+  { "label": "Netherlands", "value": "NL" },
+  { "label": "Norway", "value": "NO" },
+  { "label": "Nepal", "value": "NP" },
+  { "label": "Nauru", "value": "NR" },
+  { "label": "New Zealand", "value": "NZ" },
+  { "label": "Oman", "value": "OM" },
+  { "label": "Pakistan", "value": "PK" },
+  { "label": "Panama", "value": "PA" },
+  { "label": "Peru", "value": "PE" },
+  { "label": "Philippines", "value": "PH" },
+  { "label": "Palau", "value": "PW" },
+  { "label": "Papua New Guinea", "value": "PG" },
+  { "label": "Poland", "value": "PL" },
+  { "label": "Puerto Rico", "value": "PR" },
+  { "label": "North Korea", "value": "KP" },
+  { "label": "Portugal", "value": "PT" },
+  { "label": "Paraguay", "value": "PY" },
+  { "label": "Palestine", "value": "PS" },
+  { "label": "French Polynesia", "value": "PF" },
+  { "label": "Qatar", "value": "QA" },
+  { "label": "Romania", "value": "RO" },
+  { "label": "Russian Federation", "value": "RU" },
+  { "label": "Rwanda", "value": "RW" },
+  { "label": "Saudi Arabia", "value": "SA" },
+  { "label": "Sudan", "value": "SD" },
+  { "label": "Senegal", "value": "SN" },
+  { "label": "Singapore", "value": "SG" },
+  { "label": "Solomon Islands", "value": "SB" },
+  { "label": "Sierra Leone", "value": "SL" },
+  { "label": "El Salvador", "value": "SV" },
+  { "label": "San Marino", "value": "SM" },
+  { "label": "Somalia", "value": "SO" },
+  { "label": "Serbia", "value": "RS" },
+  { "label": "South Sudan", "value": "SS" },
+  { "label": "São Tomé and Príncipe", "value": "ST" },
+  { "label": "Suriname", "value": "SR" },
+  { "label": "Slovakia", "value": "SK" },
+  { "label": "Slovenia", "value": "SI" },
+  { "label": "Sweden", "value": "SE" },
+  { "label": "Eswatini", "value": "SZ" },
+  { "label": "Seychelles", "value": "SC" },
+  { "label": "Syria", "value": "SY" },
+  { "label": "Chad", "value": "TD" },
+  { "label": "Togo", "value": "TG" },
+  { "label": "Thailand", "value": "TH" },
+  { "label": "Tajikistan", "value": "TJ" },
+  { "label": "Turkmenistan", "value": "TM" },
+  { "label": "Timor-Leste", "value": "TL" },
+  { "label": "Tonga", "value": "TO" },
+  { "label": "Trinidad and Tobago", "value": "TT" },
+  { "label": "Tunisia", "value": "TN" },
+  { "label": "Turkey", "value": "TR" },
+  { "label": "Tuvalu", "value": "TV" },
+  { "label": "Taiwan", "value": "TW" },
+  { "label": "Tanzania", "value": "TZ" },
+  { "label": "Uganda", "value": "UG" },
+  { "label": "Ukraine", "value": "UA" },
+  { "label": "Uruguay", "value": "UY" },
+  { "label": "United States", "value": "US" },
+  { "label": "Uzbekistan", "value": "UZ" },
+  { "label": "Saint Vincent and the Grenadines", "value": "VC" },
+  { "label": "Venezuela", "value": "VE" },
+  { "label": "Vietnam", "value": "VN" },
+  { "label": "Vanuatu", "value": "VU" },
+  { "label": "Samoa", "value": "WS" },
+  { "label": "Yemen", "value": "YE" },
+  { "label": "South Africa", "value": "ZA" },
+  { "label": "Zambia", "value": "ZM" },
+  { "label": "Zimbabwe", "value": "ZW" }
+]

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

@@ -0,0 +1,27 @@
+import { mount, unmount } from 'svelte'
+import InTextDisclaimer from '../routes/components/InTextDisclaimer.svelte'
+
+export let inTextDisclaimerInsertComponent: object | null = null
+
+export function insertInTextDisclaimer(elements: HTMLElement[]): void {
+  if (!window.PlayPilotLinkInjections?.config?.in_text_disclaimer_enabled) return
+  if (inTextDisclaimerInsertComponent) return
+
+  const target = document.createElement('div')
+  const selector = window.PlayPilotLinkInjections?.config?.in_text_disclaimer_selector
+  const insertElement = (selector ? document.querySelector(selector) : null) || elements[0]
+  const insertPosition = window.PlayPilotLinkInjections?.config?.in_text_disclaimer_insert_position || 'beforebegin'
+
+  target.dataset.playpilotInTextDisclaimer = 'true'
+  insertElement.insertAdjacentElement(insertPosition, target)
+
+  inTextDisclaimerInsertComponent = mount(InTextDisclaimer, { target })
+}
+
+export function clearInTextDisclaimer(): void {
+  if (!inTextDisclaimerInsertComponent) return
+
+  unmount(inTextDisclaimerInsertComponent)
+  document.querySelector('[data-playpilot-in-text-disclaimer]')?.remove()
+  inTextDisclaimerInsertComponent = null
+}

package/src/lib/enums/SplitTest.ts

@@ -9,6 +9,11 @@ export const SplitTest = {
     numberOfVariants: 2,
     variantNames: ['Image', 'Label'] as string[],
   },
+  InTextEngagement: {
+    key: 'in-text-engagement',
+    numberOfVariants: 4,
+    variantNames: ['Default', 'Clapper Icon', 'Play Icon', 'Animated Link'] as string[]
+  },
   UserTimeSpent: {
     key: 'user_time_spent',
     numberOfVariants: 10,

package/src/lib/explore.ts

@@ -0,0 +1,59 @@
+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/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[] = [{