@playpilot/tpi 2.0.5 → 3.0.0

package/src/lib/{meta.js → meta.ts}

@@ -1,10 +1,10 @@
 import { getLinkInjectionsParentElement } from './linkInjection'
+import type { ArticleMetaData } from './types/injection'
 
 /**
  * Returns meta data to be included with injections.
- * @returns {ArticleMetaData}
  */
-export function getPageMetaData() {
+export function getPageMetaData(): ArticleMetaData {
   const parent = getLinkInjectionsParentElement()
 
   return {
@@ -17,10 +17,8 @@ export function getPageMetaData() {
 /**
  * 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) {
+export function getPageHeading(parent: HTMLElement): string | null {
   const heading = parent.querySelector('h1') || document.querySelector('h1')
 
   return heading?.innerText.trim() || null
@@ -28,15 +26,12 @@ export function getPageHeading(parent) {
 
 /**
  * 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) {
+export function getPageModifiedTime(parent: HTMLElement): string | null {
   const element =
-    /** @type {HTMLElement | null} */
     (document.querySelector('meta[property*="modified_time"]') ||
     parent.querySelector('[itemprop="dateModified"]') ||
-    document.querySelector('[itemprop="dateModified"]') || null)
+    document.querySelector('[itemprop="dateModified"]') || null) as HTMLElement | null
 
   const datetime = element?.getAttribute('content') || element?.getAttribute('datetime') || element?.innerText
 
@@ -47,19 +42,16 @@ export function getPageModifiedTime(parent) {
 
 /**
  * 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) {
+export function getPagePublishedTime(parent: HTMLElement): string | null {
   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)
+    document.querySelector('[datetime]') || null) as HTMLElement | null
 
   const datetime = element?.getAttribute('content') || element?.getAttribute('datetime') || element?.innerText
 
@@ -70,10 +62,8 @@ export function getPagePublishedTime(parent) {
 
 /**
  * Get datetime string as ISO datetime string
- * @param {string} datetime
- * @returns {string | null}
  */
-function getDatetime(datetime) {
+function getDatetime(datetime: string): string | null {
   try {
     return new Date(datetime).toISOString()
   } catch {

package/src/lib/{playlink.js → playlink.ts}

@@ -1,11 +1,10 @@
+import type { PlaylinkData } from "./types/playlink"
+
 /**
  * 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 = []
+export function mergePlaylinks(playlinks: PlaylinkData[]): PlaylinkData[] {
+  let merged: PlaylinkData[] = []
 
   for (const playlink of playlinks) {
     let newPlaylink = playlink

package/src/lib/{search.js → search.ts}

@@ -1,12 +1,11 @@
 import { getApiToken } from './api'
 import { apiBaseUrl } from './constants'
+import type { TitleData } from './types/title'
 
 /**
  * Search for movies & shows. Requires valid API token.
- * @param {*} query
- * @returns {Promise<TitleData[]>}
  */
-export async function searchTitles(query) {
+export async function searchTitles(query: string): Promise<TitleData[]> {
   const headers = new Headers({ 'Content-Type': 'application/json' })
   const apiToken = getApiToken()
 

package/src/lib/{text.js → text.ts}

@@ -4,13 +4,10 @@ import { decodeHtmlEntities, encodeHtmlEntities } from './html'
  * Find the node that a particular string is in. For example:
  * <p>Some sentence <strong>with words</strong> in it</p>
  * findTextNodeContaining('words') would return the <strong> node.
- *
- * @param {string} text
- * @param {HTMLElement} element The parent element from which to search for the given text
- * @param {string[]} ignoredParentNodes Filtered out parent nodes
- * @returns {Node | null}
+ * @param element The parent element from which to search for the given text
+ * @param ignoredParentNodes Filtered out parent nodes
  */
-export function findTextNodeContaining(text, element, ignoredParentNodes = []) {
+export function findTextNodeContaining(text: string, element: HTMLElement, ignoredParentNodes: string[] = []): Node | null {
   const walker = document.createTreeWalker(element)
 
   let node
@@ -23,11 +20,9 @@ export function findTextNodeContaining(text, element, ignoredParentNodes = []) {
 
 /**
  * Returns whether or not the node itself is a link or is inside of a link tag.
- * @param {Node} node
- * @returns {boolean}
  */
-export function isNodeInLink(node) {
-  const parentNode = /** @type {HTMLElement} */ (node.parentNode)
+export function isNodeInLink(node: Node): boolean {
+  const parentNode = node.parentNode as HTMLElement | null
 
   if (!parentNode) return false
 
@@ -38,13 +33,8 @@ export function isNodeInLink(node) {
  * Replace a string in a bit of text, but only if it's after the given startIndex.
  * This replace method matches html entities against their decoded and encoded variant.
  * For instance &amp; and & are treated as one and the same character.
- * @param {string} text
- * @param {string} search
- * @param {string} replacement
- * @param {number} startIndex
- * @return {string}
  */
-export function replaceStartingFrom(text, search, replacement, startIndex) {
+export function replaceStartingFrom(text: string, search: string, replacement: string, startIndex: number): string {
   const encodedSearch = encodeHtmlEntities(search)
   const decodedSearch = decodeHtmlEntities(search)
 
@@ -61,9 +51,7 @@ export function replaceStartingFrom(text, search, replacement, startIndex) {
 
 /**
  * Returns a string for most consistent string comparisons, decoding Html symbols and removing spaces.
- * @param {string} phrase
- * @returns {string}
  */
-export function cleanPhrase(phrase) {
+export function cleanPhrase(phrase: string): string {
   return decodeHtmlEntities(phrase).toLowerCase().replace(/\s+/g, '')
 }

package/src/lib/{tracking.js → tracking.ts}

@@ -1,13 +1,15 @@
+import type { TitleData } from "./types/title"
+
 const baseUrl = 'https://insights.playpilot.net'
 
 /**
  * Track events via PlayPilot insights tracking. Inserts data about the title when a title is passed.
  * Other data can be passed via the `payload` param.
- * @param {string} event Name of the event
- * @param {TitleData | null} [title] Title related to the event
- * @param {Record<string, string>} [payload] Any data that will be included with the event
+ * @param event Name of the event
+ * @param [title] Title related to the event
+ * @param [payload] Any data that will be included with the event
  */
-export async function track(event, title = null, payload = {}) {
+export async function track(event: string, title: TitleData | null = null, payload: Record<string, string> = {}): Promise<void> {
   const headers = new Headers({ 'Content-Type': 'application/json' })
 
   if (title) {

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

@@ -0,0 +1,13 @@
+declare global {
+  interface Window {
+    PlayPilotLinkInjections: {
+      token: string
+      editorial_token: string
+      selector: string
+      language: string | null
+    }
+  }
+}
+
+export { }
+

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

@@ -0,0 +1,41 @@
+import type { TitleData } from "./title"
+
+export type LinkInjection = {
+  sid: string
+  title: string
+  sentence: string
+  playpilot_url: string
+  key: string
+  title_details?: TitleData
+  inactive?: boolean
+  failed?: boolean
+  in_text?: boolean
+  after_article?: boolean
+  after_article_style?: 'modal_button' | 'playlinks' | null
+  manual?: boolean
+  removed?: boolean
+  duplicate?: boolean
+}
+
+export type LinkInjectionRanges = Record<string, { elementIndex: number, from: number, to: number }>
+
+export type LinkInjectionResponse = {
+  injections_ready: boolean
+  page_updated: boolean
+  automation_enabled: boolean
+  injections_enabled: boolean
+  ai_running: boolean
+  ai_injections: LinkInjection[] | null
+  link_injections: LinkInjection[] | null
+}
+
+export type LinkInjectionTypes = {
+  aiInjections: LinkInjection[]
+  manualInjections: LinkInjection[]
+}
+
+export type ArticleMetaData = {
+  heading: string | null
+  modified_time: string | null
+  published_time: string | null
+}

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

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

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

@@ -0,0 +1,13 @@
+export type Participant = {
+  sid: string
+  name: string
+  birth_date: string
+  death_date: string | null
+  jobs: Job[]
+  image: string | null
+  image_uuid: string | null
+  gender: string
+  character: string | null
+}
+
+export type Job = 'actor' | 'writer' | 'director'

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

@@ -0,0 +1,11 @@
+export type PlaylinkData = {
+  sid: string
+  name: string
+  url: string
+  logo_url: string
+  extra_info: {
+    category: PlaylinkCategory
+  }
+}
+
+export type PlaylinkCategory = 'SVOD' | 'BUY' | 'RENT' | 'TVOD'

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

@@ -0,0 +1,6 @@
+export type Position = {
+  x: number
+  y: number
+}
+
+export type Alignment = 'bottom' | 'center'

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

@@ -0,0 +1,23 @@
+import type { Participant } from "./participant"
+import type { PlaylinkData } from "./playlink"
+
+export type TitleData = {
+  sid: string
+  slug: string
+  poster_uuid: string
+  standing_poster_uuid: string
+  genres: string[]
+  year: number
+  imdb_score: number
+  type: string
+  providers: PlaylinkData[]
+  description: string
+  small_poster: string
+  medium_poster: string
+  standing_poster: string
+  title: string
+  original_title: string
+  length?: number
+  participants?: Participant[]
+  blurb?: string
+}

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

@@ -0,0 +1,7 @@
+export type User = {
+  username: string
+  profile: {
+    display_name: string
+    profile_photo: string
+  }
+}

package/src/lib/{url.js → url.ts}

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

package/src/routes/+layout.svelte

@@ -1,5 +1,5 @@
-<script>
-	import { browser } from '$app/environment'
+<script lang="ts">
+  import { browser } from '$app/environment'
 
   /**
    * This layout file is for development purposes only and will not be compiled with the final script.
@@ -10,7 +10,7 @@
   // This is used to remove the scoped classes in Svelte in order to prevent articles
   // from having to be re-generated between different HMR builds.
   // This is purely for development.
-  const noClass = (/** @type {HTMLElement} */ node) => {
+  const noClass = (node: HTMLElement) => {
     node.classList.forEach(e => {if (e.startsWith('s-')) node.classList.remove(e)})
   }
 

package/src/routes/+page.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { onMount } from 'svelte'
   import { pollLinkInjections } from '$lib/api'
   import { clearLinkInjections, getLinkInjectionElements, getLinkInjectionsParentElement, injectLinksInDocument, separateLinkInjectionTypes } from '$lib/linkInjection'
@@ -8,21 +8,18 @@
   import { authorize, isEditorialModeEnabled } from '$lib/auth'
   import TitleModal from './components/TitleModal.svelte'
   import Editor from './components/Editorial/Editor.svelte'
+  import type { LinkInjectionResponse, LinkInjection, LinkInjectionTypes } from '$lib/types/injection'
 
   const parentElement = getLinkInjectionsParentElement()
-  /** @type {HTMLElement[]} */
-  const elements = getLinkInjectionElements(parentElement)
+  const elements: HTMLElement[] = getLinkInjectionElements(parentElement)
   const htmlString = elements.map(p => p.outerHTML).join('')
   const isEditorialMode = isEditorialModeEnabled()
 
-  /** @type {LinkInjectionResponse | null} */
-  let response = $state(null)
-  /** @type {LinkInjection | null} */
-  let activeInjection = $state(null)
+  let response: LinkInjectionResponse | null = $state(null)
+  let activeInjection: LinkInjection | null = $state(null)
   let authorized = $state(false)
   let loading = $state(true)
-  /** @type {LinkInjection[]} */
-  let linkInjections = $state([])
+  let linkInjections: LinkInjection[] = $state([])
   let editor = $state()
 
   // @ts-ignore It's ok if the response is empty
@@ -41,7 +38,7 @@
     return () => clearLinkInjections()
   })
 
-  async function initialize() {
+  async function initialize(): Promise<void> {
     if (isEditorialMode) authorized = await authorize()
 
     // Only trying once when not in editorial mode to prevent late injections (as well as a ton of requests)
@@ -60,18 +57,17 @@
     if (!isEditorialMode) return
 
     const continuedResponse = await pollLinkInjections(getFullUrlPath(), htmlString, { requireCompletedResult: true })
+
+    // @ts-ignore
     editor.requestNewAIInjections(continuedResponse?.ai_injections || [])
   }
 
-  function rerender() {
+  function rerender(): void {
     clearLinkInjections()
     inject(separateLinkInjectionTypes(linkInjections))
   }
 
-  /**
-   * @param {LinkInjectionTypes} injections
-   */
-  function inject(injections = { aiInjections, manualInjections }) {
+  function inject(injections: LinkInjectionTypes = { aiInjections, manualInjections }): void {
     if (!aiInjections.length && !manualInjections.length) return
 
     // Get filtered injections as they are shown on the page.
@@ -80,8 +76,7 @@
     if (JSON.stringify(filteredInjections) !== JSON.stringify(linkInjections)) linkInjections = filteredInjections
   }
 
-  /** @param {LinkInjection} injection */
-  function setTarget(injection) {
+  function setTarget(injection: LinkInjection): void {
     activeInjection = injection
   }
 </script>

package/src/routes/components/AfterArticlePlaylinks.svelte

@@ -1,26 +1,27 @@
-<script>
+<script lang="ts">
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { t } from '$lib/localization'
   import { track } from '$lib/tracking'
+  import type { LinkInjection } from '$lib/types/injection'
+  import type { TitleData } from '$lib/types/title'
+
+  interface Props {
+    linkInjections: LinkInjection[],
+    // eslint-disable-next-line no-unused-vars
+    onclickmodal?: (linkInjection: LinkInjection) => void
+  }
 
-  /** @type {{ linkInjections: LinkInjection[], onclickmodal?: (linkInjection: LinkInjection) => void }} */
   // eslint-disable-next-line no-unused-vars
-  const { linkInjections, onclickmodal = (linkInjection) => null } = $props()
+  const { linkInjections, onclickmodal = (linkInjection) => null }: Props = $props()
 
-  /**
-   * @param {TitleData} title The full title data of the clicked playlink
-   * @param {string} playlink Name of the clicked playlink
-   */
-  function onclick(title, playlink) {
+  function onclick(title: TitleData, playlink: string): void {
     track(TrackingEvent.AfterArticlePlaylinkClick, title, { playlink })
   }
 
   /**
    * Open a modal for the given injection and track the click
-   * @param {TitleData} title The full title data of the title the modal button was clicked for
-   * @param {LinkInjection} linkInjection
    */
-  function openModal(title, linkInjection) {
+  function openModal(title: TitleData, linkInjection: LinkInjection): void {
     track(TrackingEvent.AfterArticleModalButtonClick, title)
     onclickmodal(linkInjection)
   }
@@ -38,7 +39,7 @@
             "{title}" {t('Is Available To Stream')}
 
             <span>
-              <button onclick={() => openModal(/** @type {TitleData} */ (title_details), linkInjection)}>
+              <button onclick={() => openModal(title_details as TitleData, linkInjection)}>
                 {t('View Streaming Options')}
               </button>
             </span>
@@ -49,7 +50,7 @@
                 {i === playlinks.length - 1 ? `, ${t('And')}` : ','}
               {/if}
 
-              <a onclick={() => onclick(/** @type {TitleData} */ (title_details), name)} href={url} target="_blank">
+              <a onclick={() => onclick(title_details as TitleData, name)} href={url} target="_blank">
                 {name}
               </a>
             {/each}.

package/src/routes/components/ContextMenu.svelte

@@ -1,20 +1,24 @@
-<script>
+<script lang="ts">
   import { fly } from 'svelte/transition'
   import IconDots from './Icons/IconDots.svelte'
+  import type { Snippet } from 'svelte'
 
-  /** @type {{ ariaLabel: string, children: import('svelte').Snippet }} */
-  const { ariaLabel, children } = $props()
+  interface Props {
+    ariaLabel: string
+    children: Snippet
+  }
+
+  const { ariaLabel, children }: Props = $props()
 
   let active = $state(false)
-  /** @type {HTMLElement | null} */
-  let buttonElement = $state(null)
+  let buttonElement: HTMLElement | null = $state(null)
 
   /**
    * Close the context menu when clicking anything but the toggle button.
    * @param {MouseEvent} event
    */
-  function closeOnOutsideClick(event) {
-    const target = /** @type {HTMLElement} */ (event.target)
+  function closeOnOutsideClick(event: MouseEvent): void {
+    const target = event.target as HTMLElement
 
     if (target === buttonElement || buttonElement?.contains(target)) return
 

package/src/routes/components/Description.svelte

@@ -1,9 +1,14 @@
-<script>
-  /** @type {{ text: string, blurb?: string, limit?: number }} */
-  const { text, blurb = '', limit = 200 } = $props()
+<script lang="ts">
+  interface Props {
+    text: string
+    blurb?: string
+    limit?: number
+  }
+
+  const { text, blurb = '', limit = 200 }: Props = $props()
 
   let expanded = $state(false)
-  let limitedText = $derived(text.slice(0, limit))
+  const limitedText = $derived(text.slice(0, limit))
 </script>
 
 <div>

package/src/routes/components/Editorial/AIIndicator.svelte

@@ -1,21 +1,24 @@
-<script>
+<script lang="ts">
+  import type { LinkInjection } from '$lib/types/injection'
   import IconAi from '../Icons/IconAi.svelte'
 
-  /** @type {{ onadd: (injections: LinkInjection[]) => void }} */
-  let { onadd } = $props()
+  interface Props {
+    // eslint-disable-next-line no-unused-vars
+    onadd: (injections: LinkInjection[]) => void
+  }
+
+  let { onadd }: Props = $props()
 
   let running = $state(true)
-  /** @type {LinkInjection[]} */
-  let injectionsToBeInserted = $state([])
+  let injectionsToBeInserted: LinkInjection[] = $state([])
   let dismissed = $state(false)
 
   /**
    * This is called from the Editor component when AI links are ready.
    * From here we determine what to show the user. Either we show them an option
    * to inject new links, or we tell them no new injections were found.
-   * @param {LinkInjection[]} injections
    */
-  export function notifyUserOfNewState(injections) {
+  export function notifyUserOfNewState(injections: LinkInjection[]) {
     running = false
     injectionsToBeInserted = injections
   }

package/src/routes/components/Editorial/Alert.svelte

@@ -1,6 +1,11 @@
-<script>
-  /** @type {{ children: import('svelte').Snippet }} */
-  const { children } = $props()
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    children: Snippet
+  }
+
+  const { children }: Props = $props()
 </script>
 
 <div class="alert">

package/src/routes/components/Editorial/DragHandle.svelte

@@ -1,25 +1,27 @@
-<script>
+<script lang="ts">
+  import type { Position } from '$lib/types/position'
   import { onMount } from 'svelte'
 
-  /** @type {{ element: HTMLElement, position: Position, limit?: Position, onchange?: (position: Position) => void }} */
-  let { element, position = { x: 0, y: 0 }, limit = { x: 0, y: 0 }, onchange = () => null } = $props()
+  interface Props {
+    element: HTMLElement,
+    position: Position,
+    limit?: Position,
+    // eslint-disable-next-line no-unused-vars
+    onchange?: (position: Position) => void
+  }
+
+  let { element, position = { x: 0, y: 0 }, limit = { x: 0, y: 0 }, onchange = () => null }: Props = $props()
 
   let isDragging = false
 
-  /** @type {Position} */
-  let dragStartPosition = { x: 0, y: 0 }
-  /** @type {Position} */
-  let elementStartPosition = position
+  let dragStartPosition: Position = { x: 0, y: 0 }
+  let elementStartPosition: Position = position
 
   onMount(() => {
     setPosition(position.x, position.y)
   })
 
-  /**
-   * @param {number} x
-   * @param {number} y
-   */
-  function setPosition(x, y) {
+  function setPosition(x: number, y: number): void {
     const windowWidth = window.innerWidth
     const windowHeight = window.innerHeight
     const elementWidth = element.clientWidth
@@ -36,11 +38,7 @@
     onchange(position)
   }
 
-  /**
-   * @param {MouseEvent | TouchEvent} event
-   * @returns {Position}
-   */
-  function getPositionFromEvent(event) {
+  function getPositionFromEvent(event: MouseEvent | TouchEvent): Position {
     return {
       // @ts-ignore
       x: event.pageX || event.touches?.[0].pageX || 0,
@@ -49,20 +47,14 @@
     }
   }
 
-  /**
-   * @param {MouseEvent | TouchEvent} event
-   */
-  function start(event) {
+  function start(event: MouseEvent | TouchEvent): void {
     isDragging = true
 
     dragStartPosition = getPositionFromEvent(event)
     elementStartPosition = position
   }
 
-  /**
-   * @param {MouseEvent | TouchEvent} event
-   */
-  function move(event) {
+  function move(event: MouseEvent | TouchEvent): void {
     if (!isDragging) return
 
     const dragCurrentPosition = getPositionFromEvent(event)
@@ -75,7 +67,7 @@
     setPosition(newX, newY)
   }
 
-  function end() {
+  function end(): void {
     if (!isDragging) return
 
     isDragging = false