@playpilot/tpi 1.1.1 → 1.4.0

package/src/lib/api.js

@@ -1,6 +1,8 @@
 import { authorize, getAuthToken, isEditorialModeEnabled } from './auth'
 import { apiBaseUrl } from './constants'
 import { stringToHash } from './hash'
+import { getPageMetaData } from './meta'
+import { getFullUrlPath } from './url'
 
 /** @type {NodeJS.Timeout | number | null} */
 let pollTimeout = null
@@ -19,6 +21,7 @@ export async function fetchLinkInjections(url, html, { hash = stringToHash(html)
   const headers = new Headers({ 'Content-Type': 'application/json' })
   const apiToken = getApiToken()
   const isEditorialMode = isEditorialModeEnabled() ? await authorize() : false
+  const metadata = getPageMetaData()
 
   if (!apiToken) throw new Error('No token was provided')
 
@@ -28,6 +31,7 @@ export async function fetchLinkInjections(url, html, { hash = stringToHash(html)
     body: JSON.stringify(({
       hash,
       url,
+      metadata,
       page_text: html,
       ...params,
     })),
@@ -119,7 +123,7 @@ export async function saveLinkInjections(linkInjections, html) {
     inactive: !!linkInjection.inactive,
   }))
 
-  const response = await fetchLinkInjections(window.location.host + location.pathname, html, {
+  const response = await fetchLinkInjections(getFullUrlPath(), html, {
     params: {
       private_token: getAuthToken(),
       automation_enabled: false,

package/src/lib/data/translations.js

@@ -0,0 +1,238 @@
+import { Language } from '$lib/enums/Language.js'
+
+export const translations = {
+  'Where To Stream Online': {
+    [Language.English]: 'Where to stream online',
+    [Language.Swedish]: 'Var kan man streama online',
+  },
+  'Affiliate Disclaimer': {
+    [Language.English]: 'We may earn a commission if you make a purchase through these links. In collaboration with',
+    [Language.Swedish]: 'Vi kan få provision om du gör ett köp via dessa länkar. I samarbete med',
+  },
+  'An Error Occurred': {
+    [Language.English]: 'An error occurred',
+    [Language.Swedish]: 'Ett fel inträffade',
+  },
+  'Title Unavailable': {
+    [Language.English]: 'This title is not currently available to stream.',
+    [Language.Swedish]: 'Den här titeln går inte att streama just nu.',
+  },
+  'Title Unavailable Suffix': {
+    [Language.English]: 'is not currently available to stream.',
+    [Language.Swedish]: 'går inte att streama just nu.',
+  },
+  'Is Available To Stream On': {
+    [Language.English]: 'is available to stream on',
+    [Language.Swedish]: 'finns att streama på',
+  },
+  'Is Available To Stream': {
+    [Language.English]: 'is available to stream.',
+    [Language.Swedish]: 'finns att streama.',
+  },
+  'View Streaming Options': {
+    [Language.English]: 'View streaming options',
+    [Language.Swedish]: 'Se streamingalternativ',
+  },
+  'And': {
+    [Language.English]: 'and',
+    [Language.Swedish]: 'och',
+  },
+  'Minutes': {
+    [Language.English]: 'minutes',
+    [Language.Swedish]: 'minuter',
+  },
+  'Type: movie': {
+    [Language.English]: 'Movie',
+    [Language.Swedish]: 'Film',
+  },
+  'Type: series': {
+    [Language.English]: 'Series',
+    [Language.Swedish]: 'Serie',
+  },
+  'Stream': {
+    [Language.English]: 'Stream',
+    [Language.Swedish]: 'Strömma',
+  },
+  'Buy': {
+    [Language.English]: 'Buy',
+    [Language.Swedish]: 'Köp',
+  },
+  'Rent': {
+    [Language.English]: 'Rent',
+    [Language.Swedish]: 'Hyra',
+  },
+  'Rent Or Buy': {
+    [Language.English]: 'Rent or Buy',
+    [Language.Swedish]: 'Hyra',
+  },
+
+  // Genres
+  'All': {
+    [Language.English]: 'All',
+    [Language.Swedish]: 'Alla',
+  },
+  'Unscripted': {
+    [Language.English]: 'Unscripted',
+    [Language.Swedish]: 'Oscripterat',
+  },
+  'Independent': {
+    [Language.English]: 'Independent',
+    [Language.Swedish]: 'Indie',
+  },
+  'Game Show': {
+    [Language.English]: 'Game Show',
+    [Language.Swedish]: 'Gameshow',
+  },
+  'Film Noir': {
+    [Language.English]: 'Film Noir',
+    [Language.Swedish]: 'Film noir',
+  },
+  'Entertainment': {
+    [Language.English]: 'Entertainment',
+    [Language.Swedish]: 'Underhållning',
+  },
+  'News': {
+    [Language.English]: 'News',
+    [Language.Swedish]: 'Nyheter',
+  },
+  'Short': {
+    [Language.English]: 'Short',
+    [Language.Swedish]: 'Kortfilm',
+  },
+  'Bollywood': {
+    [Language.English]: 'Bollywood',
+    [Language.Swedish]: 'Bollywood',
+  },
+  'Concert': {
+    [Language.English]: 'Concert',
+    [Language.Swedish]: 'Konsert',
+  },
+  'Arthouse': {
+    [Language.English]: 'Arthouse',
+    [Language.Swedish]: 'Arthouse',
+  },
+  'Alternate Version': {
+    [Language.English]: 'Alternate Version',
+    [Language.Swedish]: 'Alternativ version',
+  },
+  'Reality TV': {
+    [Language.English]: 'Reality TV',
+    [Language.Swedish]: 'Reality-TV',
+  },
+  'Culture': {
+    [Language.English]: 'Culture',
+    [Language.Swedish]: 'Kultur',
+  },
+  'Drama': {
+    [Language.English]: 'Drama',
+    [Language.Swedish]: 'Drama',
+  },
+  'Crime': {
+    [Language.English]: 'Crime',
+    [Language.Swedish]: 'Kriminal',
+  },
+  'Western': {
+    [Language.English]: 'Western',
+    [Language.Swedish]: 'Western',
+  },
+  'Thriller': {
+    [Language.English]: 'Thriller',
+    [Language.Swedish]: 'Thriller',
+  },
+  'Animation': {
+    [Language.English]: 'Animation',
+    [Language.Swedish]: 'Animerat',
+  },
+  'Mystery': {
+    [Language.English]: 'Mystery',
+    [Language.Swedish]: 'Mysterium',
+  },
+  'Science': {
+    [Language.English]: 'Science',
+    [Language.Swedish]: 'Vetenskap',
+  },
+  'Nature': {
+    [Language.English]: 'Nature',
+    [Language.Swedish]: 'Natur',
+  },
+  'War': {
+    [Language.English]: 'War',
+    [Language.Swedish]: 'Krig',
+  },
+  'Sci-Fi': {
+    [Language.English]: 'Sci-Fi',
+    [Language.Swedish]: 'Sci-fi',
+  },
+  'Documentary': {
+    [Language.English]: 'Documentary',
+    [Language.Swedish]: 'Dokumentär',
+  },
+  'Stand-up': {
+    [Language.English]: 'Stand-up',
+    [Language.Swedish]: 'Standup',
+  },
+  'Talk Show': {
+    [Language.English]: 'Talk Show',
+    [Language.Swedish]: 'Talkshow',
+  },
+  'Fantasy': {
+    [Language.English]: 'Fantasy',
+    [Language.Swedish]: 'Fantasy',
+  },
+  'History': {
+    [Language.English]: 'History',
+    [Language.Swedish]: 'Historia',
+  },
+  'Adventure': {
+    [Language.English]: 'Adventure',
+    [Language.Swedish]: 'Äventyr',
+  },
+  'Action': {
+    [Language.English]: 'Action',
+    [Language.Swedish]: 'Action',
+  },
+  'Horror': {
+    [Language.English]: 'Horror',
+    [Language.Swedish]: 'Skräck',
+  },
+  'Comedy': {
+    [Language.English]: 'Comedy',
+    [Language.Swedish]: 'Komedi',
+  },
+  'Biography': {
+    [Language.English]: 'Biography',
+    [Language.Swedish]: 'Biografi',
+  },
+  'Music': {
+    [Language.English]: 'Music',
+    [Language.Swedish]: 'Musik',
+  },
+  'Sport': {
+    [Language.English]: 'Sport',
+    [Language.Swedish]: 'Sport',
+  },
+  'Romance': {
+    [Language.English]: 'Romance',
+    [Language.Swedish]: 'Romantik',
+  },
+  'Kids': {
+    [Language.English]: 'Kids',
+    [Language.Swedish]: 'Barn',
+  },
+  'Lifestyle': {
+    [Language.English]: 'Lifestyle',
+    [Language.Swedish]: 'Livsstil',
+  },
+  'Musical': {
+    [Language.English]: 'Musical',
+    [Language.Swedish]: 'Musikal',
+  },
+  'Anime': {
+    [Language.English]: 'Anime',
+    [Language.Swedish]: 'Anime',
+  },
+  'Family': {
+    [Language.English]: 'Family',
+    [Language.Swedish]: 'Familj',
+  },
+}

package/src/lib/enums/Language.js

@@ -0,0 +1,4 @@
+export const Language = Object.freeze({
+  English: 'en-US',
+  Swedish: 'sv-SE',
+})

package/src/lib/linkInjection.js

@@ -18,10 +18,10 @@ let afterArticlePlaylinkInsertedComponent = null
 export function getLinkInjectionElements(parentElement) {
   let validElements = []
 
-  let remainingChildren = [...parentElement.children]
+  let remainingChildren = [parentElement]
 
   while (remainingChildren.length > 0) {
-    const element = /** @type {HTMLElement} */ (remainingChildren.shift())
+    const element = /** @type {HTMLElement} */ (remainingChildren.pop())
 
     // Ignore links, buttons, and headers
     if (/^(A|BUTTON|SCRIPT|NOSCRIPT|STYLE|IFRAME|H[1-6])$/.test(element.tagName)) continue
@@ -33,8 +33,15 @@ export function getLinkInjectionElements(parentElement) {
 
     // If this element has a text node we add it to the valid elements and stop there
     // Otherwise we add all children to be checked in this same loop.
-    if (hasTextNode) validElements.push(element)
-    else remainingChildren.push(...element.children)
+    if (hasTextNode) {
+      validElements.push(element)
+      continue
+    }
+
+    const children = /** @type {HTMLElement[]} */ (Array.from(element.children))
+    for (let i = children.length - 1; i >= 0; i--) {
+      remainingChildren.push(children[i])
+    }
   }
 
   return validElements

package/src/lib/localization.js

@@ -0,0 +1,36 @@
+import { translations } from '$lib/data/translations'
+import { Language } from '$lib/enums/Language'
+
+/**
+ * Super basic implementation to get a string for the given key and language
+ * @param {string} key Key of the wanted translation
+ * @param {LanguageCode} language Language code
+ * @returns
+ */
+export function t(key, language = getLanguage()) {
+  // @ts-ignore It's ok if a key is not found.
+  return translations[key]?.[language] || key
+}
+
+/**
+ * @returns {LanguageCode}
+ */
+export function getLanguage() {
+  // @ts-ignore
+  const configLanguage = window.PlayPilotLinkInjections?.language
+  const languageCodes = /** @type {string[]} */ (Object.values(Language))
+
+  if (configLanguage) {
+    if (languageCodes.includes(configLanguage)) return configLanguage
+
+    console.warn(`PlayPilot Link Injections: ${configLanguage} is not an accepted language`)
+  }
+
+  const documentLanguage = document.querySelector('html')?.getAttribute('lang')
+
+  if (documentLanguage && languageCodes.includes(documentLanguage)) {
+    return /** @type {LanguageCode} */ (documentLanguage)
+  }
+
+  return Language.English
+}

package/src/lib/meta.js

@@ -0,0 +1,82 @@
+import { getLinkInjectionsParentElement } from './linkInjection'
+
+/**
+ * Returns meta data to be included with injections.
+ * @returns {ArticleMetaData}
+ */
+export function getPageMetaData() {
+  const parent = getLinkInjectionsParentElement()
+
+  return {
+    heading: getPageHeading(parent),
+    modified_time: getPageModifiedTime(parent),
+    published_time: getPageModifiedTime(parent),
+  }
+}
+
+/**
+ * Returns the most relevant `h1` content on the page.
+ * A page should only ever contain exactly 1 `h1` tag, but we don't control these things.
+ * @param {HTMLElement} parent
+ * @returns {string | null}
+ */
+export function getPageHeading(parent) {
+  const heading = parent.querySelector('h1') || document.querySelector('h1')
+
+  return heading?.innerText.trim() || null
+}
+
+/**
+ * Returns the datetime for the article, intended to be the last time the article was modified.
+ * @param {HTMLElement} parent
+ * @returns {string | null}
+ */
+export function getPageModifiedTime(parent) {
+  const element =
+    /** @type {HTMLElement | null} */
+    (document.querySelector('meta[property*="modified_time"]') ||
+    parent.querySelector('[itemprop="dateModified"]') ||
+    document.querySelector('[itemprop="dateModified"]') || null)
+
+  const datetime = element?.getAttribute('content') || element?.getAttribute('datetime') || element?.innerText
+
+  if (!datetime) return null
+
+  return getDatetime(datetime)
+}
+
+/**
+ * Returns the datetime for the article, intended to be the date the article was first published
+ * @param {HTMLElement} parent
+ * @returns {string | null}
+ */
+export function getPagePublishedTime(parent) {
+  const element =
+    /** @type {HTMLElement | null} */
+    (document.querySelector('meta[property*="published_time"]') ||
+    parent.querySelector('[itemprop="datePublished"]') ||
+    document.querySelector('[itemprop="datePublished"]') ||
+    parent.querySelector('time') ||
+    document.querySelector('time') ||
+    parent.querySelector('[datetime]') ||
+    document.querySelector('[datetime]') || null)
+
+  const datetime = element?.getAttribute('content') || element?.getAttribute('datetime') || element?.innerText
+
+  if (!datetime) return null
+
+  return getDatetime(datetime)
+}
+
+/**
+ * Get datetime string as ISO datetime string
+ * @param {string} datetime
+ * @returns {string | null}
+ */
+function getDatetime(datetime) {
+  try {
+    return new Date(datetime).toISOString()
+  } catch {
+    return null
+  }
+}

package/src/lib/playlink.js

@@ -0,0 +1,28 @@
+/**
+ * Merge playlinks of the same provider of BUY and RENT categories into a shared TVOD category.
+ * @param {PlaylinkData[]} playlinks
+ * @returns {PlaylinkData[]}
+ */
+export function mergePlaylinks(playlinks) {
+  /** @type {PlaylinkData[]} */
+  let merged = []
+
+  for (const playlink of playlinks) {
+    let newPlaylink = playlink
+    const existingPlaylink = merged.find(p => p.name === newPlaylink.name)
+
+    const category1 = existingPlaylink?.extra_info.category
+    const category2 = newPlaylink.extra_info.category
+
+    // If a playlink for the same provider already exists in a BUY or RENT category, we remove it from
+    // the array and re-add it as a new entry with the TVOD category
+    if ((category1 === 'RENT' && category2 === 'BUY') || (category1 === 'BUY' && category2 === 'RENT')) {
+      merged = merged.filter(p => p.name !== newPlaylink.name)
+      newPlaylink = { ...newPlaylink, extra_info: { ...newPlaylink.extra_info, category: 'TVOD' } }
+    }
+
+    merged.push(newPlaylink)
+  }
+
+  return merged
+}

package/src/lib/scss/_functions.scss

@@ -0,0 +1,3 @@
+@function margin($value) {
+  @return 16px * $value;
+}

package/src/lib/scss/global.scss

@@ -0,0 +1,75 @@
+@use "./_functions" as *;
+
+[data-playpilot-injection-key] {
+  position: relative;
+
+  &.injection-highlight {
+    outline: margin(0.25) solid var(--playpilot-primary) !important;
+    outline-offset: margin(0.5) !important;
+    border-radius: margin(0.05);
+    scroll-margin: margin(5);
+  }
+}
+
+.playpilot-styled-scrollbar {
+  scrollbar-color: var(--playpilot-content-light) var(--playpilot-lighter);
+  scrollbar-width: thin;
+}
+
+.playpilot-styled-scrollbed {
+  &::-webkit-scrollbar {
+    width: margin(0.75);
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--playpilot-light);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border: 2px solid var(--playpilot-light);
+    border-radius: margin(1);
+    background: var(--playpilot-lighter);
+
+    &:hover {
+      background: var(--playpilot-content-light);
+    }
+
+    &:active {
+      background: var(--playpilot-text-color-alt);
+    }
+  }
+}
+
+/*
+  Styling for individual CSS variables, with a selector for each variable.
+  This is very verbose, but necessary in order to only use the CSS variable when they are actually set.
+*/
+[data-playpilot-injection-key] {
+  &[data-used-css-variables*="--playpilot-injection-font-weight"] {
+    font-weight: var(--playpilot-injection-font-weight);
+  }
+
+  &[data-used-css-variables*="--playpilot-injection-text-color"] {
+    color: var(--playpilot-injection-text-color);
+  }
+
+  &[data-used-css-variables*="--playpilot-injection-text-color-hover"]:hover {
+    color: var(--playpilot-injection-text-color-hover);
+  }
+
+  &[data-used-css-variables*="--playpilot-injection-text-decoration"] {
+    text-decoration: var(--playpilot-injection-text-decoration);
+  }
+
+  &[data-used-css-variables*="--playpilot-injection-text-decoration-hover"]:hover {
+    text-decoration: var(--playpilot-injection-text-decoration-hover);
+  }
+
+  &[data-used-css-variables*="--playpilot-injection-background-color"] {
+    background-color: var(--playpilot-injection-background-color);
+  }
+
+  &[data-used-css-variables*="--playpilot-injection-background-color-hover"]:hover {
+    background-color: var(--playpilot-injection-background-color-hover);
+  }
+}

package/src/lib/{variables.css → scss/variables.scss}

@@ -1,3 +1,5 @@
+@use "./_functions" as *;
+
 :root {
   --playpilot-primary: #fa548a;
   --playpilot-dark: #101426;
@@ -9,8 +11,12 @@
   --playpilot-font-family: "Poppins", sans-serif;
   --playpilot-text-color: #fff;
   --playpilot-text-color-alt: #c8d4de;
-  --playpilot-shadow: 0.2rem 0.15rem 0.15rem rgba(0, 0, 0, 0.2);
-  --playpilot-shadow-large: 0.15rem 0.15rem 0.2rem rgba(0, 0, 0, 0.05), 0.2rem 0.35rem 0.35rem rgba(0, 0, 0, 0.1), 0.1rem 0.1rem 0.75rem rgba(0, 0, 0, 0.25);
+  --playpilot-shadow:
+    #{margin(0.2) margin(0.15) margin(0.15)} rgba(0, 0, 0, 0.2);
+  --playpilot-shadow-large:
+    #{margin(0.15) margin(0.15) margin(0.2)} rgba(0, 0, 0, 0.05),
+    #{margin(0.2) margin(0.35) margin(0.35)} rgba(0, 0, 0, 0.1),
+    #{margin(0.1) margin(0.1) margin(0.75)} rgba(0, 0, 0, 0.25);
   --playpilot-error: #ea5a5a;
   --playpilot-error-dark: #442533;
 }

package/src/lib/url.js

@@ -0,0 +1,7 @@
+/**
+ * Get the full path, including host and protocol, but excluding url params
+ * @returns {string}
+ */
+export function getFullUrlPath() {
+  return location.protocol + '//' + location.host + location.pathname
+}

package/src/main.js

@@ -8,9 +8,10 @@ window.PlayPilotLinkInjections = {
   token: '',
   editorial_token: '',
   selector: '',
+  language: null,
   app: null,
 
-  initialize(config = { token: '', selector: '', editorial_token: '' }) {
+  initialize(config = { token: '', selector: '', language: null, editorial_token: '' }) {
     if (!config.token) {
       console.error('An API token is required.')
       return
@@ -19,6 +20,7 @@ window.PlayPilotLinkInjections = {
     this.token = config.token
     this.editorial_token = config.editorial_token
     this.selector = config.selector
+    this.language = config.language
 
     if (this.app) this.destroy()
 

package/src/routes/+layout.svelte

@@ -19,35 +19,39 @@
   if (browser) window.PlayPilotLinkInjections = { token: 'ZoAL14yqzevMyQiwckbvyetOkeIUeEDN', selector: 'article' }
 </script>
 
-{#key Math.random()}
-  <article use:noClass>
-    <p use:noClass>Following the success of John M. Chu's 2018 romantic-comedy Crazy Rich Asians, Quan was inspired to return to acting. He first scored a supporting role in the Netflix movie Finding 'Ohana, before securing a starring role in the absurdist comedy-drama Everything Everywhere all At Once. A critical and commercial success, the film earned $143 million against a budget of $14-25 million, and saw Quan win the Academy Award for Best Supporting Actor. Following his win, Quan struggled to choose projects he was satisfied with, passing on an action-comedy three times, before finally taking his first leading role in it, following advice from Spielberg.</p>
-    <p use:noClass>In an interview with Epire &amp; Magazine, Quan reveals he quested starring in Love Hurts, which sees him in the leading role of a former assassin turned successful realtor, whose past returns when his brother attempts to hunt him down. The movie is in a similar vein to successful films such as The Long Kiss Goodnight and Nobody, and Quan discussed how he was reluctant to take the part due to his conditioned beliefs about how an action hero should look. But he reveals that he changed his mind following a meeting with Spielberg, who convinced him to do it.</p>
-  </article>
-
-  {#if browser}
-    {@render children()}
-  {/if}
-{/key}
-
-
-<style>
-  :global {
+<div>
+  {#key Math.random()}
+    <article use:noClass>
+      <h1 use:noClass>Some heading</h1>
+      <time datetime="13:00">1 hour ago</time>
+      <p use:noClass>Following the success of John M. Chu's 2018 romantic-comedy Crazy Rich Asians, Quan was inspired to return to acting. He first scored a supporting role in the Netflix movie Finding 'Ohana, before securing a starring role in the absurdist comedy-drama Everything Everywhere all At Once. A critical and commercial success, the film earned $143 million against a budget of $14-25 million, and saw Quan win the Academy Award for Best Supporting Actor. Following his win, Quan struggled to choose projects he was satisfied with, passing on an action-comedy three times, before finally taking his first leading role in it, following advice from Spielberg.</p>
+      <p use:noClass>In an interview with Epire &amp; Magazine, Quan reveals he quested starring in Love Hurts, which sees him in the leading role of a former assassin turned successful realtor, whose past returns when his brother attempts to hunt him down. The movie is in a similar vein to successful films such as The Long Kiss Goodnight and Nobody, and Quan discussed how he was reluctant to take the part due to his conditioned beliefs about how an action hero should look. But he reveals that he changed his mind following a meeting with Spielberg, who convinced him to do it.</p>
+    </article>
+
+    {#if browser}
+      {@render children()}
+    {/if}
+  {/key}
+</div>
+
+<style lang="scss">
+  div :global {
     article {
       min-height: 100vh;
-      padding: 2rem;
+      padding: margin(2);
       background: #222;
       color: white;
       font-family: sans-serif;
       line-height: 1.4em;
-    }
 
-    article > :first-child {
-      margin-top: 0;
-    }
+      > :first-child {
+        margin-top: 0;
+      }
 
-    article a {
-      color: hotpink;
+      a {
+        color: hotpink;
+        font-style: italic;
+      }
     }
   }
 </style>