@playpilot/tpi 5.20.2 → 5.21.0-beta.share.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "5.20.2",
+	"version": "5.21.0-beta.share.2",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/clipboard.ts

@@ -0,0 +1,14 @@
+export function copyToClipboard(text: string): void {
+  const textarea = document.createElement("textarea")
+
+  textarea.value = text
+  textarea.style.position = "fixed"
+  textarea.style.left = "-9999px"
+
+  document.body.appendChild(textarea)
+
+  textarea.select()
+
+  document.execCommand("copy")
+  document.body.removeChild(textarea)
+}

package/src/lib/data/translations.ts

@@ -91,6 +91,21 @@ export const translations = {
     [Language.Swedish]: 'Se',
     [Language.Danish]: 'Se',
   },
+  'Share': {
+    [Language.English]: 'Share',
+    [Language.Swedish]: 'Dela',
+    [Language.Danish]: 'Del',
+  },
+  'Copy URL': {
+    [Language.English]: 'Copy URL',
+    [Language.Swedish]: 'Kopiera URL',
+    [Language.Danish]: 'Kopiér URL',
+  },
+  'Email': {
+    [Language.English]: 'Email',
+    [Language.Swedish]: 'E-post',
+    [Language.Danish]: 'E-mail',
+  },
 
   // Genres
   'All': {

package/src/lib/enums/TrackingEvent.ts

@@ -50,4 +50,7 @@ export const TrackingEvent = Object.freeze({
   // Split tests
   SplitTestView: 'ali_split_test_view',
   SplitTestAction: 'ali_split_test_action',
+
+  // Share
+  ShareTitle: 'ali_share_title'
 })

package/src/lib/injection.ts

@@ -254,7 +254,7 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
     }
   }
 
-  addLinkInjectionEventListeners(foundInjections)
+  addLinkInjectionEventListeners(validInjections)
   addCSSVariablesToLinks()
 
   const afterArticleInjections = filterInvalidAfterArticleInjections(mergedInjections)
@@ -269,7 +269,7 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
 
     const matchingElement = document.querySelector(`[${keyDataAttribute}="${injection.key}"]`)
     const failed = isValidPlaylinkType(injection) && !injection.inactive && !injection.removed && !injection.after_article && !matchingElement
-    const containsSentence = foundInjections.find(i => i.key === injection.key)
+    const containsSentence = !!elements.find(element => cleanPhrase(element.innerText).includes(cleanPhrase(injection.sentence)))
     const failedMessage =
       !failed ? '' :
         failedMessages[injection.key] ||

package/src/lib/text.ts

@@ -61,11 +61,7 @@ export function replaceBetween(text: string, replacement: string, startIndex: nu
 export function cleanPhrase(phrase: string): string {
   return decodeHtmlEntities(phrase)
     .toLowerCase()
-    .normalize('NFD')
-    .replace(/\p{Diacritic}/gu, '') // Replace accents and other diacritic symbols (https://stackoverflow.com/a/51874002/1665157)
     .replace(/\s+/g, '') // Replace any number of white space with nothing
-    .replace(/['"‘’“”]/g, '"') // Replace all qoutes with the same type of quote
-    .replace(/^['"]+|['"]+$/g, '') // Remove leading and trailing quotes
     .replace(/\.*$/, '') // Remove trailing periods
     .replaceAll('…', '...') // Replace ellipsis character with regular characters
 }

package/src/routes/components/Genres.svelte

@@ -47,4 +47,8 @@
       background: var(--playpilot-genre-hover-background, var(--playpilot-genre-background, var(--playpilot-content)));
     }
   }
+
+  .expand {
+    margin-left: margin(-0.5);
+  }
 </style>

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

@@ -0,0 +1,3 @@
+<svg viewBox="0 -960 960 960" width="18px" height="18px">
+  <path fill="currentColor" d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg viewBox="0 -960 960 960" width="18px" height="18px">
+  <path fill="currentColor" d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg viewBox="0 -960 960 960" width="18px" height="18px">
+  <path d="M680-80q-50 0-85-35t-35-85q0-6 3-28L282-392q-16 15-37 23.5t-45 8.5q-50 0-85-35t-35-85q0-50 35-85t85-35q24 0 45 8.5t37 23.5l281-164q-2-7-2.5-13.5T560-760q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35q-24 0-45-8.5T598-672L317-508q2 7 2.5 13.5t.5 14.5q0 8-.5 14.5T317-452l281 164q16-15 37-23.5t45-8.5q50 0 85 35t35 85q0 50-35 85t-85 35Zm0-80q17 0 28.5-11.5T720-200q0-17-11.5-28.5T680-240q-17 0-28.5 11.5T640-200q0 17 11.5 28.5T680-160ZM200-440q17 0 28.5-11.5T240-480q0-17-11.5-28.5T200-520q-17 0-28.5 11.5T160-480q0 17 11.5 28.5T200-440Zm480-280q17 0 28.5-11.5T720-760q0-17-11.5-28.5T680-800q-17 0-28.5 11.5T640-760q0 17 11.5 28.5T680-720Zm0 520ZM200-480Zm480-280Z" fill="currentColor" />
+</svg>

package/src/routes/components/Share.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+  import { scale } from 'svelte/transition'
+  import { mobileBreakpoint } from '$lib/constants'
+  import { copyToClipboard } from '$lib/clipboard'
+  import { track } from '$lib/tracking'
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { t } from '$lib/localization'
+  import IconShare from './Icons/IconShare.svelte'
+  import IconLink from './Icons/IconLink.svelte'
+  import IconEmail from './Icons/IconEmail.svelte'
+
+  interface Props {
+    title: string
+    url: string
+  }
+
+  const { title, url }: Props = $props()
+
+  const isMobile = window.innerWidth < mobileBreakpoint
+  const useShareApi = isMobile && typeof navigator.share !== 'undefined'
+
+  let showContextMenu = $state(false)
+
+  async function toggle(event: MouseEvent): Promise<void> {
+    event.stopPropagation()
+
+    if (useShareApi) {
+      await navigator.share({ title, url })
+
+      track(TrackingEvent.ShareTitle, null, { title, url, method: 'native' })
+
+      return
+    }
+
+    showContextMenu = !showContextMenu
+  }
+
+  function copy() {
+    copyToClipboard(url)
+    track(TrackingEvent.ShareTitle, null, { title, url, method: 'copy' })
+  }
+
+  function email() {
+    window.location.href = `mailto:?body=${url}`
+    track(TrackingEvent.ShareTitle, null, { title, url, method: 'email' })
+  }
+</script>
+
+<svelte:window onclick={() => showContextMenu = false} />
+
+<div class="share">
+  <button class="button" onclick={toggle} aria-label={t('Share')}>
+    <IconShare />
+  </button>
+
+  {#if showContextMenu}
+    <div class="context-menu" transition:scale={{ duration: 50, start: 0.85 }}>
+      <button class="item" onclick={copy}>
+        <IconLink /> {t('Copy URL')}
+      </button>
+
+      <button class="item" onclick={email}>
+        <IconEmail /> {t('Email')}
+      </button>
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .share {
+    position: relative;
+  }
+
+  .button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    appearance: none;
+    border: 0;
+    border-radius: margin(3);
+    aspect-ratio: 1 / 1;
+    background: transparent;
+    color: var(--playpilot-detail-text-color-alt, var(--playpilot-text-color-alt));
+
+    &:hover {
+      color: var(--playpilot-detail-text-color, var(--playpilot-text-color));
+      box-shadow: 0 0 0 2px currentColor;
+    }
+  }
+
+  .context-menu {
+    --border-radius: var(--playpilot-context-menu-border-radius, #{margin(0.5)});
+    z-index: 10;
+    position: absolute;
+    bottom: calc(100% + margin(0.5));
+    right: 0;
+    max-width: margin(15);
+    border-radius: var(--border-radius);
+    background: var(--playpilot-context-menu-background, var(--playpilot-detail-background-light, var(--playpilot-lighter)));
+    box-shadow: var(--playpilot-shadow);
+  }
+
+  .item {
+    cursor: pointer;
+    appearance: none;
+    display: flex;
+    align-items: center;
+    gap: margin(0.5);
+    border: 0;
+    padding: margin(0.75) margin(1);
+    width: 100%;
+    border-bottom: 1px solid var(--playpilot-context-menu-border, rgba(255, 255, 255, 0.1));
+    background: transparent;
+    white-space: nowrap;
+    color: var(--playpilot-detail-text-color, var(--playpilot-text-color));
+    font-family: inherit;
+    font-weight: normal;
+    text-align: left;
+
+    &:hover {
+      box-shadow: inset 0 0 0 2px currentColor;
+    }
+
+    &:first-child {
+      border-radius: var(--border-radius) var(--border-radius) 0 0;
+    }
+
+    &:last-child {
+      border-radius: 0 0 var(--border-radius) var(--border-radius);
+      border-bottom: 0;
+    }
+
+    &:not(:hover) :global(svg) {
+      opacity: 0.75;
+    }
+  }
+</style>

package/src/routes/components/Title.svelte

@@ -6,10 +6,12 @@
   import ParticipantsRail from './Rails/ParticipantsRail.svelte'
   import SimilarRail from './Rails/SimilarRail.svelte'
   import TitlePoster from './TitlePoster.svelte'
+  import Share from './Share.svelte'
   import { t } from '$lib/localization'
   import type { TitleData } from '$lib/types/title'
   import { heading } from '$lib/actions/heading'
   import { removeImageUrlPrefix } from '$lib/image'
+  import { titleUrl } from '$lib/routes'
 
   interface Props {
     title: TitleData
@@ -31,20 +33,26 @@
 
     <div class="heading" use:heading={2} class:truncate={small} id="title">{title.title}</div>
 
-    <div class="info">
-      <div class="imdb">
-        <IconIMDb />
-        {title.imdb_score}
-      </div>
+    <div class="row">
+      <div class="info">
+        <div class="imdb">
+          <IconIMDb />
+          {title.imdb_score}
+        </div>
+
+        <Genres genres={title.genres} />
 
-      <Genres genres={title.genres} />
+        <div>{title.year}</div>
+        <div class="capitalize">{t(`Type: ${title.type}`)}</div>
 
-      <div>{title.year}</div>
-      <div class="capitalize">{t(`Type: ${title.type}`)}</div>
+        {#if !small && title.length}
+          <div>{title.length} {t('Minutes')}</div>
+        {/if}
+      </div>
 
-      {#if !small && title.length}
-        <div>{title.length} {t('Minutes')}</div>
-      {/if}
+      <div class="action">
+        <Share title={title.title} url={titleUrl(title)} />
+      </div>
     </div>
   </div>
 
@@ -138,11 +146,20 @@
     }
   }
 
+  .row {
+    display: flex;
+    align-items: flex-start;
+  }
+
   .info {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: margin(0.5) margin(1);
+    gap: margin(0.5) margin(0.75);
+
+    @include desktop() {
+      gap: margin(0.5) margin(1);
+    }
 
     .small & {
       gap: margin(0.5) margin(0.75);
@@ -165,6 +182,10 @@
     }
   }
 
+  .action {
+    margin: margin(-0.125) 0 0 auto;
+  }
+
   .background {
     position: absolute;
     top: 0;

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

@@ -312,50 +312,6 @@ describe('linkInjection.js', () => {
       expect(document.querySelectorAll('[data-playpilot-injection-key]')).toHaveLength(2)
     })
 
-    it('Should disregard missing trailing periods', () => {
-      document.body.innerHTML = '<p>This is a sentence with a phrase in it</p>'
-
-      const elements = Array.from(document.body.querySelectorAll('p'))
-      const injection = generateInjection('This is a sentence with a phrase in it.', 'a phrase')
-
-      injectLinksInDocument(elements, { aiInjections: [injection], manualInjections: [] })
-
-      expect(document.querySelectorAll('[data-playpilot-injection-key]')).toHaveLength(1)
-    })
-
-    it('Should disregard additional quotes', () => {
-      document.body.innerHTML = '<p>This is part of a paragraph. This is a sentence with a phrase in it."</p>'
-
-      const elements = Array.from(document.body.querySelectorAll('p'))
-      const injection = generateInjection('"This is a sentence with a phrase in it."', 'a phrase')
-
-      injectLinksInDocument(elements, { aiInjections: [injection], manualInjections: [] })
-
-      expect(document.querySelectorAll('[data-playpilot-injection-key]')).toHaveLength(1)
-    })
-
-    it('Should disregard differences in accents', () => {
-      document.body.innerHTML = '<p>This is à sentence with a phràse in it."</p>'
-
-      const elements = Array.from(document.body.querySelectorAll('p'))
-      const injection = generateInjection('This is a sentence with a phrase in it.', 'a phràse')
-
-      injectLinksInDocument(elements, { aiInjections: [injection], manualInjections: [] })
-
-      expect(document.querySelectorAll('[data-playpilot-injection-key]')).toHaveLength(1)
-    })
-
-    it('Should treat different types of quotes as the same', () => {
-      document.body.innerHTML = '<p>This is a “sentence” with a "phrase" in it.</p>'
-
-      const elements = Array.from(document.body.querySelectorAll('p'))
-      const injection = generateInjection('This is a "sentence" with a \'phrase’ in it.', 'phrase')
-
-      injectLinksInDocument(elements, { aiInjections: [injection], manualInjections: [] })
-
-      expect(document.querySelectorAll('[data-playpilot-injection-key]')).toHaveLength(1)
-    })
-
     it('Should leave the text intact if no injections were found', () => {
       document.body.innerHTML = '<p>This is a sentence with an injection.</p>'
 

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

@@ -112,32 +112,6 @@ describe('text.js', () => {
     it('Should return given phrase without trailing period', () => {
       expect(cleanPhrase('Some phrase.')).toBe('somephrase')
     })
-
-    it('Should return given phrase without leading or trailing quotes', () => {
-      expect(cleanPhrase('"Some phrase"')).toBe('somephrase')
-      expect(cleanPhrase('Some phrase"')).toBe('somephrase')
-      expect(cleanPhrase('"Some phrase')).toBe('somephrase')
-
-      expect(cleanPhrase('\'Some phrase\'')).toBe('somephrase')
-      expect(cleanPhrase('Some phrase\'')).toBe('somephrase')
-      expect(cleanPhrase('\'Some phrase')).toBe('somephrase')
-    })
-
-    it('Should return given phrase without leading or trailing quotes and trailing period', () => {
-      expect(cleanPhrase('"Some phrase."')).toBe('somephrase')
-    })
-
-    it('Should disregard accents and diacritics', () => {
-      expect(cleanPhrase('María')).toBe(cleanPhrase('Maria'))
-      expect(cleanPhrase('Göteborg')).toBe(cleanPhrase('Goteborg'))
-      expect(cleanPhrase('über')).toBe(cleanPhrase('uber'))
-    })
-
-    it('Should disregard differences in quotes', () => {
-      expect(cleanPhrase('Some "phrase"')).toBe(cleanPhrase('Some \'phrase\''))
-      expect(cleanPhrase('Some ”phrase“')).toBe(cleanPhrase('Some "phrase"'))
-      expect(cleanPhrase('Some ’phrase\'')).toBe(cleanPhrase('Some "phrase"'))
-    })
   })
 
   describe('truncateAroundPhrase', () => {

package/src/tests/routes/components/Share.test.js

@@ -0,0 +1,74 @@
+import { render, fireEvent } from '@testing-library/svelte'
+import { describe, expect, it, vi } from 'vitest'
+
+import Share from '../../../routes/components/Share.svelte'
+import { copyToClipboard } from '$lib/clipboard'
+import { track } from '$lib/tracking'
+import { TrackingEvent } from '$lib/enums/TrackingEvent'
+
+vi.mock('$lib/clipboard', () => ({
+  copyToClipboard: vi.fn(),
+}))
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+describe('Share.svelte', () => {
+  it('Should open context menu on click', async () => {
+    const { getByLabelText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
+
+    expect(queryByText('Copy URL')).not.toBeTruthy()
+    expect(queryByText('Email')).not.toBeTruthy()
+
+    await fireEvent.click(getByLabelText('Share'))
+
+    expect(queryByText('Copy URL')).toBeTruthy()
+    expect(queryByText('Email')).toBeTruthy()
+  })
+
+  it('Should close context menu on click of items', async () => {
+    const { getByLabelText, getByText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
+
+    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(getByText('Copy URL'))
+
+    expect(queryByText('Copy URL')).not.toBeTruthy()
+  })
+
+  it('Should close context menu on click of body', async () => {
+    const { getByLabelText, queryByText } = render(Share, { title: 'Some title', url: 'some-url' })
+
+    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(document.body)
+
+    expect(queryByText('Copy URL')).not.toBeTruthy()
+  })
+
+  it('Should fire copyToClipboard on click of button', async () => {
+    const { getByLabelText, getByText } = render(Share, { title: 'Some title', url: 'some-url' })
+
+    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(getByText('Copy URL'))
+
+    expect(copyToClipboard).toHaveBeenCalledWith('some-url')
+  })
+
+  it('Should fire track function on click of copy URL button', async () => {
+    const { getByLabelText, getByText } = render(Share, { title: 'Some title', url: 'some-url' })
+
+    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(getByText('Copy URL'))
+
+    expect(track).toHaveBeenCalledWith(TrackingEvent.ShareTitle, null, { title: 'Some title', url: 'some-url', method: 'copy' })
+  })
+
+  it('Should fire track function on click of email button', async () => {
+    const { getByLabelText, getByText } = render(Share, { title: 'Some title', url: 'some-url' })
+
+    await fireEvent.click(getByLabelText('Share'))
+    await fireEvent.click(getByText('Email'))
+
+    expect(track).toHaveBeenCalledWith(TrackingEvent.ShareTitle, null, { title: 'Some title', url: 'some-url', method: 'email' })
+  })
+})