@playpilot/tpi 2.0.5 → 3.0.0

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

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { fade, fly, slide } from 'svelte/transition'
   import { flip } from 'svelte/animate'
   import EditorItem from './EditorItem.svelte'
@@ -10,16 +10,22 @@
   import { untrack } from 'svelte'
   import AIIndicator from './AIIndicator.svelte'
   import { isEquivalentInjection, isValidInjection } from '$lib/linkInjection'
+  import type { Position } from '$lib/types/position'
+  import type { LinkInjection } from '$lib/types/injection'
+
+  interface Props {
+    linkInjections: LinkInjection[],
+    htmlString?: string,
+    loading?: boolean,
+    aiRunning?: boolean
+  }
 
-  /** @type {{ linkInjections: LinkInjection[], htmlString?: string, loading?: boolean, aiRunning?: boolean }} */
-  let { linkInjections = $bindable(), htmlString = '', loading = false, aiRunning = false } = $props()
+  let { linkInjections = $bindable(), htmlString = '', loading = false, aiRunning = false }: Props = $props()
 
   const editorPositionKey = 'editor-position'
 
-  /** @type {HTMLElement | null} */
-  let editorElement = $state(null)
-  /** @type {Position} */
-  let position = $state(JSON.parse(localStorage.getItem(editorPositionKey) || '{ "x": 0, "y": 0 }'))
+  let editorElement: HTMLElement | null = $state(null)
+  let position: Position = $state(JSON.parse(localStorage.getItem(editorPositionKey) || '{ "x": 0, "y": 0 }'))
   let manualInjectionActive = $state(false)
   let saving = $state(false)
   let hasError = $state(false)
@@ -29,14 +35,14 @@
 
   const linkInjectionsString = $derived(JSON.stringify(linkInjections))
   const hasChanged = $derived(initialStateString !== linkInjectionsString)
-  const filteredInjections = $derived(linkInjections.filter(i => i.title_details && !i.removed && !i.duplicate))
+  const filteredInjections = $derived(linkInjections.filter((i) => i.title_details && !i.removed && !i.duplicate))
 
   $effect(() => {
     if (!loading) untrack(() => initialStateString = linkInjectionsString)
   })
 
   /** Save the given injections in their current state and rewrite object to returned value */
-  async function save() {
+  async function save(): Promise<void> {
     try {
       saving = true
       hasError = false
@@ -50,18 +56,12 @@
     }
   }
 
-  /**
-   * @param {Position} position
-   */
-  function savePosition(position) {
+  function savePosition(position: Position): void {
     localStorage.setItem(editorPositionKey, JSON.stringify(position))
   }
 
-  /**
-   * @param {string} key
-   */
-  function removeInjection(key) {
-    const index = linkInjections.findIndex(i => i.key === key)
+  function removeInjection(key: string): void {
+    const index = linkInjections.findIndex((i) => i.key === key)
 
     linkInjections[index].manual = true
     linkInjections[index].removed = true
@@ -72,7 +72,7 @@
   /**
    * @param {HTMLElement} itemElement
    */
-  function scrollToItem(itemElement) {
+  function scrollToItem(itemElement: HTMLElement): void {
     if (!editorElement) return
 
     const itemTop = itemElement.offsetTop
@@ -93,8 +93,8 @@
   /**
    * @param {Event} event
    */
-  function onscroll(event) {
-    const target = /** @type {HTMLElement} */ (event.target)
+  function onscroll(event: Event): void {
+    const target = event.target as HTMLElement
     scrollDistance = target.scrollTop
   }
 
@@ -103,12 +103,13 @@
    * We only pass on links that do not already exist.
    * @param {LinkInjection[]} injections
    */
-  export function requestNewAIInjections(injections) {
+  export function requestNewAIInjections(injections: LinkInjection[]): void {
     const newInjections = injections.filter(injection => {
       if (!isValidInjection(injection)) return
       return !linkInjections.some((i) => isEquivalentInjection(injection, i))
     })
 
+    // @ts-ignore
     aIIndicator.notifyUserOfNewState(newInjections)
   }
 </script>
@@ -150,7 +151,7 @@
     <div class="items">
       {#each filteredInjections as linkInjection (linkInjection.key)}
         <!-- We want to bind to the original object, not the derived object, so we get the index of the injection in the original object by it's key -->
-        {@const index = linkInjections.findIndex(i => i.key === linkInjection.key)}
+        {@const index = linkInjections.findIndex((i) => i.key === linkInjection.key)}
 
         <div animate:flip={{ duration: 300 }}>
           <EditorItem bind:linkInjection={linkInjections[index]} onremove={() => removeInjection(linkInjection.key)} onhighlight={scrollToItem} />

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

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { slide } from 'svelte/transition'
   import IconChevron from '../Icons/IconChevron.svelte'
   import IconIMDb from '../Icons/IconIMDb.svelte'
@@ -10,20 +10,26 @@
   import { onMount } from 'svelte'
   import { track } from '$lib/tracking'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import type { LinkInjection } from '$lib/types/injection'
+  import type { TitleData } from '$lib/types/title'
+
+  interface Props {
+    linkInjection: LinkInjection,
+    onremove?: () => void,
+    // eslint-disable-next-line no-unused-vars
+    onhighlight?: (element: HTMLElement) => void
+  }
 
-  /** @type {{ linkInjection: LinkInjection, onremove?: () => void, onhighlight?: (element: HTMLElement) => void }} */
-  const { linkInjection = $bindable(), onremove = () => null, onhighlight = () => null } = $props()
+  const { linkInjection = $bindable(), onremove = () => null, onhighlight = () => null }: Props = $props()
 
   const { key, sentence, title_details, failed } = $derived(linkInjection || {})
 
-  /** @type {TitleData} */
   // @ts-ignore Definitely not null
-  const title = /** @type {TitleData} */ $derived(title_details)
+  const title: TitleData = $derived(title_details)
 
   let expanded = $state(false)
   let highlighted = $state(false)
-  /** @type {HTMLElement | null} */
-  let element = $state(null)
+  let element: HTMLElement | null = $state(null)
 
   onMount(() => {
     if (failed) track(TrackingEvent.InjectionFailed, title, { phrase: linkInjection.title, sentence })
@@ -31,9 +37,8 @@
 
   /**
    * Highlight links beloning to this item in the article itself.
-   * @param {boolean} state
    */
-  function toggleOnPageResultHighlight(state = true) {
+  function toggleOnPageResultHighlight(state: boolean = true): void {
     const matchingElements = getMatchingElements()
     matchingElements.forEach(element => {
       element.classList.toggle('injection-highlight', state)
@@ -42,14 +47,13 @@
 
   /**
    * Highlight this editor when hovering links in the article itself.
-   * @param {MouseEvent} event
    */
-  function setInEditorHighlight(event) {
-    let target = /** @type {HTMLElement | null} */ (event.target)
+  function setInEditorHighlight(event: MouseEvent): void {
+    let target = event.target as HTMLElement | null
     let injectionKey = target?.dataset.playpilotInjectionKey
 
     if (target && !injectionKey) {
-      target = /** @type {HTMLElement | null} */ (target.closest(`[data-playpilot-injection-key="${key}"]`))
+      target = target.closest(`[data-playpilot-injection-key="${key}"]`) as HTMLElement | null
       injectionKey = target?.dataset.playpilotInjectionKey
     }
 
@@ -58,11 +62,10 @@
     if (element && highlighted) onhighlight(element)
   }
 
-  /** @param {MouseEvent} event */
-  function scrollLinkIntoView(event) {
+  function scrollLinkIntoView(event: MouseEvent): void {
     requestAnimationFrame(() => toggleOnPageResultHighlight()) // Reset highlight in case the playlink type changed
 
-    const target = /** @type {HTMLElement} */ (event.target)
+    const target = event.target as HTMLElement
     if (['BUTTON', 'INPUT'].includes(target.nodeName)) return
     if (target.closest('button') || target.closest('input')) return
 
@@ -70,8 +73,7 @@
     if (matchingElement) matchingElement.scrollIntoView({ behavior: 'smooth' })
   }
 
-  /** @returns {Element[]} */
-  function getMatchingElements() {
+  function getMatchingElements(): Element[] {
     return Array.from(document.querySelectorAll(`[data-playpilot-injection-key="${key}"]`))
   }
 </script>

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

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { onMount } from 'svelte'
   import IconBack from '../Icons/IconBack.svelte'
   import RoundButton from '../RoundButton.svelte'
@@ -9,14 +9,21 @@
   import { generateInjectionKey } from '$lib/api'
   import { decodeHtmlEntities } from '$lib/html'
   import { getLinkInjectionsParentElement } from '$lib/linkInjection'
+  import type { LinkInjection } from '$lib/types/injection'
+  import type { TitleData } from '$lib/types/title'
+
+  interface Props {
+    htmlString: string
+    // eslint-disable-next-line no-unused-vars
+    onsave: (linkInjection: LinkInjection) => void
+    onclose?: () => void
+  }
 
-  /** @type {{ htmlString: string, onsave: (linkInjection: LinkInjection) => void, onclose?: () => void }} */
-  let { htmlString = '', onsave, onclose = () => null } = $props()
+  let { htmlString = '', onsave, onclose = () => null }: Props = $props()
 
   let currentSelection = $state('')
   let selectionSentence = $state('')
-  /** @type {TitleData | null} */
-  let selectedTitle = $state(null)
+  let selectedTitle: TitleData | null = $state(null)
   let error = $state('')
   let query = $state('')
 
@@ -25,9 +32,8 @@
   /**
    * Find the user selected content on the page, if any.
    * Results in a visual error if the selected content was not within the given HTML.
-   * @returns {void}
    */
-  function updateSelection() {
+  function updateSelection(): void {
     const selection = window.getSelection()
     if (!selection?.anchorNode) return
 
@@ -51,11 +57,8 @@
 
   /**
    * Find the sentence that the given selected phrase is in. This is limited by the node that the text is in.
-   * @param {Selection} selection
-   * @param {string} selectionText
-   * @returns {string}
    */
-  function findSentenceForSelection(selection, selectionText) {
+  function findSentenceForSelection(selection: Selection, selectionText: string): string {
     const range = selection.getRangeAt(0)
 
     // Get the node the text is in. If the content of the node is very short we use the parent node instead.
@@ -81,18 +84,14 @@
     return fullText.slice(sentenceStart, sentenceEnd).trim()
   }
 
-  /**
-   * @returns {void}
-   */
-  function save() {
+  function save(): void {
     if (!currentSelection) return
     if (!selectedTitle) return
 
     const typePath = selectedTitle.type === 'movie' ? 'movie' : 'show'
     const url = playPilotBaseUrl + `/${typePath}/${selectedTitle.slug}`
 
-    /** @type {LinkInjection} */
-    const linkInjection = {
+    const linkInjection: LinkInjection = {
       sid: selectedTitle.sid,
       title: currentSelection,
       sentence: selectionSentence,

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

@@ -1,12 +1,16 @@
-<script>
+<script lang="ts">
   import { slide } from 'svelte/transition'
   import IconAlign from '../Icons/IconAlign.svelte'
   import Switch from './Switch.svelte'
+  import type { LinkInjection } from '$lib/types/injection'
 
-  /** @type {{ linkInjection: LinkInjection }} */
-  let { linkInjection } = $props()
+  interface Props {
+    linkInjection: LinkInjection
+  }
+
+  const { linkInjection }: Props = $props()
 
-  let isAfterArticleButton = $derived(linkInjection.after_article_style === 'modal_button')
+  const isAfterArticleButton = $derived(linkInjection.after_article_style === 'modal_button')
 </script>
 
 <div class="switches">

package/src/routes/components/Editorial/Search/TitleSearch.svelte

@@ -1,28 +1,28 @@
-<script>
+<script lang="ts">
   import { playPilotBaseUrl } from '$lib/constants'
   import { searchTitles } from '$lib/search'
+  import type { TitleData } from '$lib/types/title'
   import IconIMDb from '../../Icons/IconIMDb.svelte'
   import IconNewTab from '../../Icons/IconNewTab.svelte'
   import TextInput from '../TextInput.svelte'
 
-  /** @type {{ onselect?: (title: TitleData) => void, query: string }} */
-  let { onselect = () => null, query = $bindable() } = $props()
+  interface Props {
+    // eslint-disable-next-line no-unused-vars
+    onselect?: (title: TitleData) => void,
+    query: string
+  }
+
+  let { onselect = () => null, query = $bindable() }: Props = $props()
 
-  /** @type {TitleData[]} */
-  let results = $state([])
-  /** @type {TitleData | null} */
-  let selectedResult = $state(null)
+  let results: TitleData[] = $state([])
+  let selectedResult: TitleData | null = $state(null)
   let loading = $state(false)
 
   $effect(() => {
     if (query) search(query)
   })
 
-  /**
-   * @param {string} query
-   * @returns {Promise<void>}
-   */
-  async function search(query) {
+  async function search(query: string): Promise<void> {
     loading = true
     selectedResult = null
 
@@ -33,11 +33,7 @@
     }
   }
 
-  /**
-   * @param {TitleData} title
-   * @returns {void}
-   */
-  function select(title) {
+  function select(title: TitleData): void {
     query = title.title
     selectedResult = title
 

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

@@ -1,8 +1,18 @@
-<script>
-  /** @type {{ active: boolean, fullwidth?: boolean, label?: string, onclick?: (active: boolean) => void, children: import('svelte').Snippet }} */
-  let { active = $bindable(), fullwidth = false, label = '', onclick = () => null, children } = $props()
+<script lang="ts">
+  import type { Snippet } from 'svelte'
 
-  function toggle() {
+  interface Props {
+    active: boolean,
+    fullwidth?: boolean,
+    label?: string,
+    // eslint-disable-next-line no-unused-vars
+    onclick?: (active: boolean) => void,
+    children: Snippet
+  }
+
+  let { active = $bindable(), fullwidth = false, label = '', onclick = () => null, children }: Props = $props()
+
+  function toggle(): void {
     active = !active
     onclick(active)
   }

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

@@ -1,6 +1,13 @@
-<script>
-  /** @type {{ value: string, label?: string, name?: string, readonly?: boolean, oninput?: () => void }} */
-  let { value = $bindable(), label = '', name = '', readonly = false, oninput = () => null } = $props()
+<script lang="ts">
+  interface Props {
+    value: string,
+    label?: string,
+    name?: string,
+    readonly?: boolean,
+    oninput?: () => void
+  }
+
+  let { value = $bindable(), label = '', name = '', readonly = false, oninput = () => null }: Props = $props()
 </script>
 
 <input type="text" bind:value {name} aria-label={label} placeholder={label} {readonly} {oninput} />

package/src/routes/components/Genres.svelte

@@ -1,12 +1,15 @@
-<script>
-  import genreData from '$lib/genres.json'
+<script lang="ts">
+  import genreData from '$lib/data/genres.json'
   import { t } from '$lib/localization'
 
-  /** @type {{ genres: string[] }} */
-  const { genres } = $props()
+  interface Props {
+    genres: string[]
+  }
+
+  const { genres }: Props = $props()
 
   let expanded = $state(false)
-  let shownGenres = $derived(expanded ? genres : [genres[0]])
+  const shownGenres = $derived(expanded ? genres : [genres[0]])
 </script>
 
 {#each shownGenres as genre}

package/src/routes/components/Icons/IconAlign.svelte

@@ -1,6 +1,11 @@
-<script>
-  /** @type {{ align?: Alignment }} */
-  let { align = 'bottom' } = $props()
+<script lang="ts">
+  import type { Alignment } from '$lib/types/position'
+
+  interface Props {
+    align: Alignment
+  }
+
+  const { align = 'bottom' }: Props = $props()
 </script>
 
 <svg width="18" height="18" viewBox="0 0 18 18" fill="none">

package/src/routes/components/Icons/IconChevron.svelte

@@ -1,6 +1,9 @@
-<script>
-  /** @type {{ expanded: boolean }} */
-  const { expanded = false } = $props()
+<script lang="ts">
+  interface Props {
+    expanded: boolean
+  }
+
+  const { expanded = false }: Props = $props()
 </script>
 
 <svg width="8" height="4" viewBox="0 0 8 4" fill="none" class:expanded>

package/src/routes/components/Icons/IconEnlarge.svelte

@@ -1,6 +1,9 @@
-<script>
-  /** @type {{ expanded: boolean }} */
-  const { expanded = false } = $props()
+<script lang="ts">
+  interface Props {
+    expanded: boolean
+  }
+
+  const { expanded = false }: Props = $props()
 </script>
 
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">

package/src/routes/components/Modal.svelte

@@ -1,11 +1,16 @@
-<script>
-  import { fade, fly, scale } from 'svelte/transition'
+<script lang="ts">
+  import { fade, fly, scale, type TransitionConfig } from 'svelte/transition'
   import IconClose from './Icons/IconClose.svelte'
   import RoundButton from './RoundButton.svelte'
-  import { onMount, setContext } from 'svelte'
+  import { onMount, setContext, type Snippet } from 'svelte'
 
-  /** @type {{ children: import('svelte').Snippet, onclose?: () => void, onscroll?: () => void }} */
-  const { children, onclose = () => null, onscroll = () => null } = $props()
+  interface Props {
+    children: Snippet
+    onclose?: () => void
+    onscroll?: () => void
+  }
+
+  const { children, onclose = () => null, onscroll = () => null }: Props = $props()
 
   setContext('scope', 'modal')
 
@@ -16,11 +21,7 @@
     return () => document.body.style.overflowY = baseOverflowStyle || ''
   })
 
-  /**
-   * @param {Element} node
-   * @returns {import('svelte/transition').TransitionConfig}
-   */
-  function scaleOrFly(node) {
+  function scaleOrFly(node: Element): TransitionConfig {
     const shouldFly = window.innerWidth < 600
 
     if (shouldFly) return fly(node, { duration: 250, y: window.innerHeight })

package/src/routes/components/Participants.svelte

@@ -1,6 +1,11 @@
-<script>
-  /** @type {{ participants: Participant[] }} */
-  const { participants } = $props()
+<script lang="ts">
+  import type { Participant } from '$lib/types/participant'
+
+  interface Props {
+    participants: Participant[]
+  }
+
+  const { participants }: Props = $props()
 </script>
 
 <h2>Cast</h2>

package/src/routes/components/Playlinks.svelte

@@ -1,13 +1,20 @@
-<script>
+<script lang="ts">
 	import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { t } from '$lib/localization'
   import { mergePlaylinks } from '$lib/playlink'
 	import { track } from '$lib/tracking'
+  import type { PlaylinkData } from '$lib/types/playlink'
+  import type { TitleData } from '$lib/types/title'
   import IconContinue from './Icons/IconContinue.svelte'
   import { getContext } from 'svelte'
 
-  /** @type {{ playlinks: PlaylinkData[], title: TitleData, list?: boolean }} */
-  const { playlinks, title, list = false } = $props()
+  interface Props {
+    playlinks: PlaylinkData[]
+    title: TitleData
+    list?: boolean
+  }
+
+  const { playlinks, title, list = false }: Props = $props()
 
   const isModal = getContext('scope') === 'modal'
 
@@ -22,10 +29,7 @@
     TVOD: t('Rent Or Buy'),
   }
 
-  /**
-   * @param {string} playlink Name of the clicked playlink
-   */
-  function onclick(playlink) {
+  function onclick(playlink: string): void {
     track(isModal ? TrackingEvent.TitleModalPlaylinkClick : TrackingEvent.TitlePopoverPlaylinkClick, title, { playlink })
   }
 </script>

package/src/routes/components/Popover.svelte

@@ -1,14 +1,17 @@
-<script>
-  import { onMount, setContext, tick } from 'svelte'
+<script lang="ts">
+  import { onMount, setContext, tick, type Snippet } from 'svelte'
   import { fly } from 'svelte/transition'
 
-  /** @type {{ children: import('svelte').Snippet, maxHeight?: number }} */
-  let { children, maxHeight = $bindable() } = $props()
+  interface Props {
+    children: Snippet
+    maxHeight?: number
+  }
+
+  let { children, maxHeight = $bindable() }: Props = $props()
 
   setContext('scope', 'popover')
 
-  /** @type {HTMLElement | null} */
-  let element = $state(null)
+  let element: HTMLElement | null = $state(null)
   let flip = $state(false)
 
   onMount(async () => {
@@ -23,9 +26,8 @@
    * Flip the element vertically if it doesn't fit on screen above the link.
    * Move it to the left if it doesn't fit from the right side of the screen.
    * Vertically it is always above or below, but horizontally is a gradual.
-   * @return {void}
    */
-  function positionElement() {
+  function positionElement(): void {
     if (!element) return
 
     const { top, right, bottom, height } = element.getBoundingClientRect()
@@ -40,9 +42,8 @@
 
   /**
    * Set the max height of the dialog so that it always fits on screen, even after flipping.
-   * @return {void}
    */
-  function setMaxHeight() {
+  function setMaxHeight(): void {
     if (!element) return
 
     const { top, height } = element.getBoundingClientRect()

package/src/routes/components/RoundButton.svelte

@@ -1,12 +1,14 @@
-<script>
-  /**
-   * @typedef {Object} Props
-   * @property {string} [size]
-   * @property {import('svelte').Snippet | null} [children]
-   * @property {() => void} [onclick]
-   */
-  /** @type {Props & { [key: string]: any }} */
-  const { children = null, size = 'margin(2)', onclick = () => null, ...rest } = $props()
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    size?: string;
+    children?: Snippet;
+    onclick?: () => void;
+    [key: string]: any;
+  }
+
+  const { children, size = 'margin(2)', onclick = () => null, ...rest }: Props = $props()
 </script>
 
 <svelte:element this={rest.href ? 'a' : 'button'} role={rest.href ? 'link' : 'button'} {onclick} class="button" style:--size={size} {...rest}>

package/src/routes/components/SkeletonText.svelte

@@ -1,6 +1,11 @@
-<script>
-  /** @type {{ lines?: number, max?: number, min?: any }} */
-  const { lines = 4, max = 100, min = (max / 100) * 70 } = $props()
+<script lang="ts">
+  interface Props {
+    lines?: number
+    max?: number
+    min?: number
+  }
+
+  const { lines = 4, max = 100, min = (max / 100) * 70 }: Props = $props()
 </script>
 
 <!-- eslint-disable-next-line no-unused-vars -->

package/src/routes/components/Title.svelte

@@ -1,13 +1,19 @@
-<script>
+<script lang="ts">
   import Genres from './Genres.svelte'
   import Playlinks from './Playlinks.svelte'
   import Description from './Description.svelte'
   import Participants from './Participants.svelte'
   import IconIMDb from './Icons/IconIMDb.svelte'
   import { t } from '$lib/localization'
+  import type { TitleData } from '$lib/types/title'
 
-  /** @type {{ title: TitleData, small?: boolean, compact?: boolean }} */
-  const { title, small = false, compact = false } = $props()
+  interface Props {
+    title: TitleData
+    small?: boolean
+    compact?: boolean
+  }
+
+  const { title, small = false, compact = false }: Props = $props()
 
   let imageLoaded = $state(false)
 </script>