@playpilot/tpi 1.3.0 → 1.4.0

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/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/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

@@ -22,6 +22,8 @@
 <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>

package/src/routes/components/AfterArticlePlaylinks.svelte

@@ -1,5 +1,6 @@
 <script>
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { t } from '$lib/localization'
   import { track } from '$lib/tracking'
 
   /** @type {{ linkInjections: LinkInjection[], onclickmodal?: (linkInjection: LinkInjection) => void }} */
@@ -34,18 +35,18 @@
       <span data-playpilot-injection-key={key}>
         {#if playlinks.length}
           {#if after_article_style === 'modal_button'}
-            "{title}" is available to stream.
+            "{title}" {t('Is Available To Stream')}
 
             <span>
               <button onclick={() => openModal(/** @type {TitleData} */ (title_details), linkInjection)}>
-                View streaming options
+                {t('View Streaming Options')}
               </button>
             </span>
           {:else}
-            "{title}" is available to stream on
+            "{title}" {t('Is Available To Stream On')}
             {#each playlinks as { name, url }, i}
               {#if i}
-                {i === playlinks.length - 1 ? ', and' : ','}
+                {i === playlinks.length - 1 ? `, ${t('And')}` : ','}
               {/if}
 
               <a onclick={() => onclick(/** @type {TitleData} */ (title_details), name)} href={url} target="_blank">
@@ -55,7 +56,7 @@
           {/if}
           <br>
         {:else}
-          "{title}" is not currently available to stream. <br>
+          "{title}" {t('Title Unavailable Suffix')} <br>
         {/if}
       </span>
     {/each}

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

@@ -160,7 +160,7 @@
   }
 
   .editor {
-    z-index: 1000;
+    z-index: 2147483646; // 1 less than as high as she goes;
     display: flex;
     flex-direction: column;
     position: fixed;

package/src/routes/components/Genres.svelte

@@ -1,5 +1,6 @@
 <script>
   import genreData from '$lib/genres.json'
+  import { t } from '$lib/localization'
 
   /** @type {{ genres: string[] }} */
   const { genres } = $props()
@@ -9,9 +10,13 @@
 </script>
 
 {#each shownGenres as genre}
-  <div class="genre">
-    {genreData.find(g => g.slug === genre)?.name}
-  </div>
+  {@const genreName = genreData.find(g => g.slug === genre)?.name}
+
+  {#if genreName}
+    <div class="genre">
+      {t(genreName)}
+    </div>
+  {/if}
 {/each}
 
 {#if !expanded && genres.length > 1}

package/src/routes/components/Modal.svelte

@@ -48,7 +48,7 @@
 
 <style lang="scss">
   .modal {
-    z-index: 9999;
+    z-index: 2147483647; // As high as she goes
     position: fixed;
     display: flex;
     justify-content: center;

package/src/routes/components/Playlinks.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { t } from '$lib/localization'
   import { mergePlaylinks } from '$lib/playlink'
 	import { track } from '$lib/tracking'
   import IconContinue from './Icons/IconContinue.svelte'
@@ -15,10 +16,10 @@
   const mergedPlaylink = $derived(mergePlaylinks(filteredPlaylinks))
 
   const categoryStrings = {
-    SVOD: 'Stream',
-    BUY: 'Buy',
-    RENT: 'Rent',
-    TVOD: 'Rent or Buy',
+    SVOD: t('Stream'),
+    BUY: t('Buy'),
+    RENT: t('Rent'),
+    TVOD: t('Rent Or Buy'),
   }
 
   /**
@@ -29,7 +30,7 @@
   }
 </script>
 
-<h2>Where to stream online</h2>
+<h2>{t('Where To Stream Online')}</h2>
 
 <div class="playlinks" class:list>
   {#each mergedPlaylink as { name, url, logo_url, extra_info: { category } }}
@@ -38,7 +39,7 @@
 
       <div>
         <span class="name">{name}</span>
-        <div class="category">{categoryStrings[category] || 'Stream'}</div>
+        <div class="category">{categoryStrings[category] || t('Stream')}</div>
       </div>
 
       {#if list}
@@ -51,7 +52,7 @@
 
   {#if !playlinks.length}
     <div class="playlink empty">
-      This title is not currently available to stream. Save it and we'll notify you when it's available.
+      {t('Title Unavailable')}
     </div>
   {/if}
 </div>

package/src/routes/components/Popover.svelte

@@ -73,7 +73,7 @@
     max-width: margin(20);
     padding: var(--offset) 0;
     transform: translateY(calc(-100% + var(--offset)));
-    z-index: 999;
+    z-index: 2147483647; // As high as she goes
 
     &.flip {
       top: auto;

package/src/routes/components/Title.svelte

@@ -4,6 +4,7 @@
   import Description from './Description.svelte'
   import Participants from './Participants.svelte'
   import IconIMDb from './Icons/IconIMDb.svelte'
+  import { t } from '$lib/localization'
 
   /** @type {{ title: TitleData, small?: boolean, compact?: boolean }} */
   const { title, small = false, compact = false } = $props()
@@ -28,10 +29,10 @@
       <Genres genres={title.genres} />
 
       <div>{title.year}</div>
-      <div class="capitalize">{title.type}</div>
+      <div class="capitalize">{t(`Type: ${title.type}`)}</div>
 
       {#if title.length}
-        <div>{title.length} minutes</div>
+        <div>{title.length} {t('Minutes')}</div>
       {/if}
     </div>
   </header>

package/src/tests/lib/api.test.js

@@ -38,6 +38,11 @@ describe('$lib/api', () => {
           body: JSON.stringify({
             hash: 'some-hash',
             url: 'https://some-url',
+            metadata: {
+              heading: null,
+              modified_time: null,
+              published_time: null,
+            },
             page_text: 'some-html',
           }),
           method: 'POST',

package/src/tests/lib/localization.test.js

@@ -0,0 +1,67 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { getLanguage, t } from '$lib/localization'
+import { Language } from '$lib/enums/Language'
+import { translations } from '$lib/data/translations'
+
+describe('localization.js', () => {
+  describe('t', () => {
+    it('Should return the value for the given language and key', () => {
+      expect(t(Object.keys(translations)[0], Language.English)).toBe(Object.values(translations)[0][Language.English])
+      expect(t(Object.keys(translations)[0], Language.Swedish)).toBe(Object.values(translations)[0][Language.Swedish])
+    })
+
+    it('Should return the key if key is not found in the object', () => {
+      expect(t('Some Random Key')).toBe('Some Random Key')
+    })
+
+    it('Should return the key if key is not found for the given language', () => {
+      // @ts-ignore
+      expect(t(Object.keys(translations)[0], 'Some Invalid Language')).toBe(Object.keys(translations)[0])
+    })
+  })
+
+  describe('getLanguage', () => {
+    afterEach(() => {
+      // @ts-expect-error
+      window.PlayPilotLinkInjections = {}
+    })
+
+    it('Should return the language given in config object before document language', () => {
+      // @ts-expect-error
+      window.PlayPilotLinkInjections = { language: 'sv-SE' }
+
+      const html = /** @type {HTMLElement} */ (document.querySelector('html'))
+      html.setAttribute('lang', 'en-US')
+
+      expect(getLanguage()).toBe('sv-SE')
+    })
+
+    it('Should return the language given as document language when config language is invalid', () => {
+      // @ts-expect-error
+      window.PlayPilotLinkInjections = { language: 'no' }
+
+      const html = /** @type {HTMLElement} */ (document.querySelector('html'))
+      html.setAttribute('lang', 'sv-SE')
+
+      expect(getLanguage()).toBe('sv-SE')
+    })
+
+    it('Should return the language given as document language when no config object is set', () => {
+      const html = /** @type {HTMLElement} */ (document.querySelector('html'))
+      html.setAttribute('lang', 'sv-SE')
+
+      expect(getLanguage()).toBe('sv-SE')
+    })
+
+    it('Should return the default language when document language is invalid', () => {
+      const html = /** @type {HTMLElement} */ (document.querySelector('html'))
+      html.setAttribute('lang', 'no')
+
+      expect(getLanguage()).toBe('en-US')
+    })
+
+    it('Should return the default language no document language or config language is given', () => {
+      expect(getLanguage()).toBe('en-US')
+    })
+  })
+})