@playpilot/tpi 3.8.2 → 3.10.0

package/eslint.config.js

@@ -48,6 +48,21 @@ export default [
       'comma-dangle': ['error', 'always-multiline'],
       'no-trailing-spaces': ['error'],
       'indent': ['warn', 2],
+      'no-unused-vars': [
+        'error',
+        {
+          vars: 'all',
+          args: 'after-used',
+          ignoreRestSiblings: true,
+          argsIgnorePattern: '^_',
+        },
+      ],
+      'prefer-const': [
+        'error',
+        {
+          destructuring: 'all',
+        },
+      ],
     },
   },
 ]

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "3.8.2",
+	"version": "3.10.0",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/enums/TrackingEvent.ts

@@ -18,4 +18,6 @@ export const TrackingEvent = Object.freeze({
   TotalInjectionsCount: 'ali_injection_count',
   FetchingConfigFailed: 'ali_fetch_config_failed',
   AuthFailed: 'ali_auth_failed',
+
+  ManualReport: 'ali_manual_report',
 })

package/src/lib/linkInjection.ts

@@ -6,6 +6,7 @@ import { cleanPhrase, findTextNodeContaining, isNodeInLink, replaceStartingFrom
 import type { LinkInjection, LinkInjectionTypes } from './types/injection'
 import { isHoldingSpecialKey } from './event'
 import { playFallbackViewTransition } from './viewTransition'
+import { prefersReducedMotion } from 'svelte/motion'
 
 const keyDataAttribute = 'data-playpilot-injection-key'
 const keySelector = `[${keyDataAttribute}]`
@@ -243,7 +244,7 @@ function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
     playFallbackViewTransition(() => {
       destroyLinkPopover(false)
       openLinkModal(event, injection)
-    }, window.innerWidth >= 600 && !window.matchMedia("(pointer: coarse)").matches)
+    }, !prefersReducedMotion.current && window.innerWidth >= 600 && !window.matchMedia("(pointer: coarse)").matches)
   })
 
   window.addEventListener('mousemove', (event) => {

package/src/lib/tracking.ts

@@ -10,7 +10,7 @@ const baseUrl = 'https://insights.playpilot.net'
  * @param [title] Title related to the event
  * @param [payload] Any data that will be included with the event
  */
-export async function track(event: string, title: TitleData | null = null, payload: Record<string, string | number | null> = {}): Promise<void> {
+export async function track(event: string, title: TitleData | null = null, payload: Record<string, string | number | null | undefined> = {}): Promise<void> {
   const headers = new Headers({ 'Content-Type': 'application/json' })
 
   if (title) {

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

@@ -3,6 +3,8 @@ export type PlaylinkData = {
   name: string
   url: string
   logo_url: string
+  highlighted?: boolean
+  cta_text?: string | null
   extra_info: {
     category: PlaylinkCategory
   }

package/src/routes/components/ContextMenu.svelte

@@ -63,8 +63,7 @@
     position: absolute;
     top: 100%;
     right: 0;
-    max-height: margin(5);
-    max-width: margin(10);
+    max-width: margin(15);
     border-radius: margin(0.5);
     background: var(--playpilot-lighter);
   }

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

@@ -3,10 +3,10 @@
 
   interface Props {
     aiRunning?: boolean
-    automationEnabled?: boolean,
-    message?: string,
-    percentage?: number,
-    aiInjectionsCount?: number,
+    automationEnabled?: boolean
+    message?: string
+    percentage?: number
+    aiInjectionsCount?: number
   }
 
   const { aiRunning = false, automationEnabled = false, message = '', percentage = 0, aiInjectionsCount = 0 }: Props = $props()
@@ -33,7 +33,7 @@
             {message}
 
             <span class="ellipses">
-              {#each { length: 3 }}
+              {#each { length: 3 } as _}
                 <span>.</span>
               {/each}
             </span>
@@ -44,7 +44,7 @@
               <div class="loading-bar-fill" data-testid="loading-bar" style:width="{Math.max(percentage, 3)}%"></div>
             </div>
 
-            <div class="loading-bar-label">{percentage}%</div>
+            <div class="loading-bar-label">{Math.floor(percentage)}%</div>
           </div>
         {:else}
           <p>

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

@@ -43,9 +43,10 @@
   const editorPositionKey = 'editor-position'
   const editorHeightKey = 'editor-height'
 
+  const position: Position = JSON.parse(localStorage.getItem(editorPositionKey) || '{ "x": 0, "y": 0 }')
+  const height: number = parseInt(localStorage.getItem(editorHeightKey) || '0')
+
   let editorElement: HTMLElement | null = $state(null)
-  let position: Position = $state(JSON.parse(localStorage.getItem(editorPositionKey) || '{ "x": 0, "y": 0 }'))
-  let height: number = $state(parseInt(localStorage.getItem(editorHeightKey) || '0'))
   let manualInjectionActive = $state(false)
   let saving = $state(false)
   let hasError = $state(false)

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

@@ -7,7 +7,7 @@
   import PlaylinkTypeSelect from './PlaylinkTypeSelect.svelte'
   import Alert from './Alert.svelte'
   import ContextMenu from '../ContextMenu.svelte'
-  import { onMount } from 'svelte'
+  import { mount, onMount, unmount } from 'svelte'
   import { track } from '$lib/tracking'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import type { LinkInjection } from '$lib/types/injection'
@@ -16,6 +16,7 @@
   import { getLinkInjectionElements, getLinkInjectionsParentElement, isValidPlaylinkType } from '$lib/linkInjection'
   import { imagePlaceholderDataUrl } from '$lib/constants'
   import { removeImageUrlPrefix } from '$lib/image'
+  import ReportIssueModal from './ReportIssueModal.svelte'
 
   interface Props {
     linkInjection: LinkInjection,
@@ -90,6 +91,13 @@
       return cleanPhrase(element.innerText).includes(cleanPhrase(linkInjection.sentence))
     }) || []
   }
+
+  function showReportIssueModal(): void {
+    const component: any = mount(ReportIssueModal, {
+      target: document.body,
+      props: { linkInjection, onclose: () => unmount(component) },
+    })
+  }
 </script>
 
 <svelte:window on:mouseover={setInEditorHighlight} />
@@ -126,6 +134,7 @@
     <div class="context-menu">
       <ContextMenu ariaLabel="More options">
         <button class="context-menu-action" onclick={onremove}>Remove</button>
+        <button class="context-menu-action" onclick={showReportIssueModal}>Report issue</button>
       </ContextMenu>
     </div>
   </div>
@@ -257,13 +266,25 @@
     appearance: none;
     background: transparent;
     border: 0;
-    padding: margin(1);
+    padding: margin(0.5) margin(1);
+    width: 100%;
+    text-align: left;
     font-family: inherit;
+    white-space: nowrap;
     color: var(--playpilot-text-color-alt);
     cursor: pointer;
 
     &:hover {
       color: var(--playpilot-text-color);
+      background-color: var(--playpilot-content-light);
+    }
+
+    &:first-child {
+      margin-top: margin(0.5);
+    }
+
+    &:last-child {
+      margin-bottom: margin(0.5);
     }
   }
 

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

@@ -20,7 +20,7 @@
     onclose?: () => void
   }
 
-  let { pageText = '', onsave, onclose = () => null }: Props = $props()
+  const { pageText = '', onsave, onclose = () => null }: Props = $props()
 
   let currentSelection = $state('')
   let selectionSentence = $state('')

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

@@ -0,0 +1,156 @@
+<script lang="ts">
+  import { heading } from '$lib/actions/heading'
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { track } from '$lib/tracking'
+  import { truncateAroundPhrase } from '$lib/text'
+  import type { LinkInjection } from '$lib/types/injection'
+  import Modal from '../Modal.svelte'
+  import { fade } from 'svelte/transition'
+
+  interface Props {
+    onclose: () => void,
+    linkInjection: LinkInjection
+  }
+
+  const { onclose, linkInjection }: Props = $props()
+
+  const options = [{
+    value: 'failed_injection',
+    label: 'The link failed to appear on the page.',
+  }, {
+    value: 'layout_issue',
+    label: 'The link is breaking the layout or formatting of my page.',
+  }, {
+    value: 'wrong_content',
+    label: 'The link points to the wrong movie or show.',
+  }, {
+    value: 'inappropriate_title',
+    label: 'The link points to an inappropriate movie or show.',
+  }, {
+    value: 'broken_link',
+    label: 'The link is broken or leads to an error page.',
+  }, {
+    value: 'other',
+    label: 'My issue is not listed, but please have a look regardless.',
+  }]
+
+  let reason = $state('')
+  let reportSent = $state(false)
+
+  function sendReport() {
+    if (!reason) return
+
+    track(TrackingEvent.ManualReport, linkInjection.title_details, {
+      report_reason: reason,
+      sid: linkInjection.sid,
+      title: linkInjection.title,
+      sentence: linkInjection.sentence,
+      failed: linkInjection.failed?.toString(),
+      failed_message: linkInjection.failed_message,
+      manual: linkInjection.manual?.toString(),
+    })
+
+    reportSent = true
+    setTimeout(onclose, 3000)
+  }
+</script>
+
+<Modal {onclose}>
+  <div class="form">
+    <div class="heading" use:heading={2}>Report issue</div>
+
+    <div class="info">
+      <div><strong>Title</strong>: {linkInjection.title}</div>
+      <div>
+        <strong>Sentence</strong>:
+        {truncateAroundPhrase(linkInjection.sentence, linkInjection.title, 100)}
+      </div>
+    </div>
+
+    <label for="reason">What would you like to report?</label>
+    <select id="reason" name="reason" bind:value={reason}>
+      <option value=''>Select an issue...</option>
+
+      {#each options as { value, label }}
+        <!-- This onclick exists purely for Vitest, the bind:value above would just not work :( -->
+        <option {value} onclick={() => reason = value}>{label}</option>
+      {/each}
+    </select>
+
+    <div>
+      {#if reportSent}
+        <div class="sent" in:fade={{ duration: 200 }}>Report has been sent, thank you! Closing window...</div>
+      {:else}
+        <button class="submit" onclick={sendReport} disabled={!reason}>Send report</button>
+      {/if}
+    </div>
+  </div>
+</Modal>
+
+<style lang="scss">
+  select {
+    background: var(--playpilot-content);
+    padding: margin(0.5) margin(1);
+    width: 100%;
+    border: 0;
+    border-radius: margin(0.5);
+    color: var(--playpilot-text-color);
+    font-family: inherit;
+    font-size: margin(0.85);
+  }
+
+  option:hover,
+  option:active,
+  option:checked {
+    background-color: var(--playpilot-content-light);
+    font-weight: bold;
+  }
+
+  .form {
+    padding: margin(2);
+    font-family: var(--playpilot-font-family);
+    color: var(--playpilot-text-color);
+  }
+
+  .heading {
+    font-size: margin(1.25);
+  }
+
+  .info {
+    margin: margin(1) 0;
+    font-size: margin(0.85);
+    color: var(--playpilot-text-color-alt);
+
+    strong {
+      color: var(--playpilot-text-color);
+    }
+  }
+
+  .submit {
+    margin-top: margin(1);
+    padding: margin(0.5) margin(1);
+    border: 0;
+    border-radius: margin(2);
+    background: var(--playpilot-green);
+    box-shadow: var(--playpilot-shadow);
+    font-family: inherit;
+    color: var(--playpilot-text-color);
+    font-size: margin(0.85);
+    cursor: pointer;
+
+    &[disabled] {
+      background: var(--playpilot-content);
+      color: var(--playpilot-text-color-alt);
+      box-shadow: none;
+      opacity: 0.5;
+      cursor: default;
+    }
+  }
+
+  .sent {
+    margin-top: margin(1);
+    padding: margin(0.5) 0;
+    color: var(--playpilot-green);
+    font-size: margin(0.85);
+  }
+</style>

package/src/routes/components/Modal.svelte

@@ -3,6 +3,7 @@
   import IconClose from './Icons/IconClose.svelte'
   import RoundButton from './RoundButton.svelte'
   import { onMount, setContext, type Snippet } from 'svelte'
+  import { prefersReducedMotion } from 'svelte/motion'
 
   interface Props {
     children: Snippet
@@ -22,6 +23,8 @@
   })
 
   function scaleOrFly(node: Element): TransitionConfig {
+    if (prefersReducedMotion.current) return fade(node, { duration: 0 })
+
     const shouldFly = window.innerWidth < 600
 
     if (shouldFly) return fly(node, { duration: 250, y: window.innerHeight })
@@ -31,8 +34,8 @@
 
 <svelte:window on:keydown={({ key }) => { if (key === 'Escape') onclose() }} />
 
-<div class="modal" transition:fade={{ duration: 150 }}>
-  <div class="dialog" {onscroll} role="dialog" transition:scaleOrFly|global data-view-transition-new>
+<div class="modal" transition:fade|global={{ duration: 150 }}>
+  <div class="dialog" {onscroll} role="dialog" aria-labelledby="title" transition:scaleOrFly|global data-view-transition-new>
     <div class="close">
       <RoundButton onclick={() => onclose()}>
         <IconClose />

package/src/routes/components/Playlinks.svelte

@@ -36,16 +36,16 @@
   }
 </script>
 
-<div class="heading" use:heading={2}>{t('Where To Stream Online')}</div>
+<div class="heading" use:heading={3}>{t('Where To Stream Online')}</div>
 
 <div class="playlinks" class:list>
-  {#each mergedPlaylink as { name, url, logo_url, extra_info: { category } }}
-    <a href={url} target="_blank" class="playlink" onclick={() => onclick(name)} data-playlink={name} rel="sponsored">
+  {#each mergedPlaylink as { name, url, logo_url, highlighted, cta_text, extra_info: { category } }}
+    <a href={url} target="_blank" class="playlink" class:highlighted={highlighted && cta_text} onclick={() => onclick(name)} data-playlink={name} rel="sponsored">
       <img src={removeImageUrlPrefix(logo_url)} alt="" height="32" width="32" />
 
       <div>
         <span class="name">{name}</span>
-        <div class="category">{categoryStrings[category] || t('Stream')}</div>
+        <div class="category">{cta_text || categoryStrings[category] || t('Stream')}</div>
       </div>
 
       {#if list}
@@ -112,6 +112,7 @@
   }
 
   .playlink {
+    position: relative;
     display: flex;
     align-items: center;
     gap: margin(0.75);
@@ -134,6 +135,23 @@
       text-decoration: none !important;
     }
 
+    &.highlighted {
+      &::before {
+        content: "";
+        z-index: 1;
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        border-radius: inherit;
+        box-shadow: inset 0 0 0 2px currentColor;
+        opacity: 0.35;
+        pointer-events: none;
+      }
+    }
+
     img {
       margin: 0;
     }

package/src/routes/components/Popover.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount, setContext, tick, type Snippet } from 'svelte'
+  import { prefersReducedMotion } from 'svelte/motion'
   import { fly } from 'svelte/transition'
 
   interface Props {
@@ -59,7 +60,7 @@
 </script>
 
 <div class="popover" class:flip bind:this={element} style:--max-height={maxHeight ? maxHeight + 'px' : null} tabindex="-1" aria-hidden="true">
-  <div class="dialog" transition:fly|global={{ duration: 100, y: 10 }} data-view-transition-old>
+  <div class="dialog" transition:fly|global={{ duration: prefersReducedMotion.current ? 0 : 100, y: 10 }} data-view-transition-old>
     {@render children()}
   </div>
 </div>

package/src/routes/components/Title.svelte

@@ -34,7 +34,7 @@
       </div>
     {/if}
 
-    <div class="heading" use:heading class:truncate={small}>{title.title}</div>
+    <div class="heading" use:heading={2} class:truncate={small} id="title">{title.title}</div>
 
     <div class="info">
       <div class="imdb">

package/src/routes/components/TitlePopover.svelte

@@ -42,7 +42,7 @@
   }
 </script>
 
-<div class="title-popover" bind:this={element} data-playpilot-title-popover>
+<div class="title-popover" bind:this={element} data-playpilot-title-popover role="region" aria-labelledby="title">
   <Popover bind:maxHeight>
     <Title {title} small compact={!!maxHeight && maxHeight < 250} />
   </Popover>

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

@@ -70,7 +70,7 @@ describe('$lib/auth', () => {
 
     it('Should not authorize is fetch response was negative', async () => {
       fakeFetch({ response: '', ok: false, status: 403 })
-      let authorized = await authorize('https://example.com/some-path?articleReplacementEditToken=some-token')
+      const authorized = await authorize('https://example.com/some-path?articleReplacementEditToken=some-token')
 
       expect(authorized).not.toBeTruthy()
       expect(track).toHaveBeenCalled()

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

@@ -804,7 +804,7 @@ describe('linkInjection.js', () => {
       const result = getLinkInjectionElements(parent, '[data-exclude]')
       expect(result).toHaveLength(1)
       expect(result[0].innerText).toBe('I am a regular element')
-    });
+    })
 
     it('Should return paragraphs fully even if they contain no direct text nodes, skipping empty paragraphs', () => {
       document.body.innerHTML = `<section>

package/src/tests/routes/components/Editorial/AiIndicator.test.js

@@ -38,6 +38,13 @@ describe('AIIndicator.svelte', () => {
     expect(getByText('25%')).toBeTruthy()
   })
 
+  it('Should floor the percentage label if a decimal is given', () => {
+    const { getByText, getByTestId } = render(AIIndicator, { aiRunning: true, automationEnabled: true, percentage: 25.55 })
+
+    expect(getByTestId('loading-bar').style.width).toBe('25.55%')
+    expect(getByText('25%')).toBeTruthy()
+  })
+
   it('Should limit progress to minimum value in loading bar style only', () => {
     const { getByText, getByTestId } = render(AIIndicator, { aiRunning: true, automationEnabled: true, percentage: 0 })
 

package/src/tests/routes/components/Editorial/EditorItem.test.js

@@ -165,14 +165,14 @@ describe('EditorItem.svelte', () => {
     expect(onremove).toHaveBeenCalled()
   })
 
-  it('Should display an inactive injection as being so with text and classname', async () => {
+  it('Should display an inactive injection as being so with text and classname', () => {
     const { getByText, container } = render(EditorItem, { linkInjection: { ...linkInjection, inactive: true  } })
 
     expect(getByText('Inactive')).toBeTruthy()
     expect(container.querySelector('.inactive')).toBeTruthy()
   })
 
-  it('Should not display an active injection as being inactive', async () => {
+  it('Should not display an active injection as being inactive', () => {
     const { queryByText, container } = render(EditorItem, { linkInjection })
 
     expect(queryByText('Inactive')).not.toBeTruthy()
@@ -180,15 +180,24 @@ describe('EditorItem.svelte', () => {
     expect(container.querySelector('.inactive')).not.toBeTruthy()
   })
 
-  it('Should display an icon when playlink types are invalid', async () => {
+  it('Should display an icon when playlink types are invalid', () => {
     const { getByLabelText } = render(EditorItem, { linkInjection: { ...linkInjection, in_text: false  } })
 
     expect(getByLabelText('Invalid playlink settings')).toBeTruthy()
   })
 
-  it('Should not display an icon when playlink types are valid', async () => {
+  it('Should not display an icon when playlink types are valid', () => {
     const { queryByLabelText } = render(EditorItem, { linkInjection: { ...linkInjection, in_text: true  } })
 
     expect(queryByLabelText('Invalid playlink settings')).not.toBeTruthy()
   })
+
+  it('Should mount component when clicking report issue button', async () => {
+    const { getByLabelText, getByText } = render(EditorItem, { linkInjection })
+
+    await fireEvent.click(getByLabelText('More options'))
+    await fireEvent.click(getByText('Report issue'))
+
+    expect(getByText('What would you like to report?')).toBeTruthy()
+  })
 })

package/src/tests/routes/components/Editorial/ReportIssueModal.test.js

@@ -0,0 +1,63 @@
+import { fireEvent, render  } from '@testing-library/svelte'
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+
+import ReportIssueModal from '../../../../routes/components/Editorial/ReportIssueModal.svelte'
+import { track } from '$lib/tracking'
+import { TrackingEvent } from '$lib/enums/TrackingEvent'
+import { generateInjection } from '../../../helpers'
+
+vi.mock('$lib/tracking', () => ({
+  track: vi.fn(),
+}))
+
+describe('ReportIssueModal.svelte', () => {
+  beforeEach(() => {
+    vi.resetAllMocks()
+  })
+
+  const onclose = vi.fn()
+  const linkInjection = generateInjection('a word', 'Some sentence with a word')
+
+  it('Should enable button after selecting issue', async () => {
+    const { getByRole, getAllByRole, getByText } = render(ReportIssueModal, { onclose, linkInjection })
+
+    expect(/** @type {HTMLButtonElement } */ (getByText('Send report')).disabled).toBeTruthy()
+
+    await fireEvent.click(getByRole('combobox'))
+    await fireEvent.click(getAllByRole('option')[1])
+
+    expect(/** @type {HTMLButtonElement } */ (getByText('Send report')).disabled).not.toBeTruthy()
+  })
+
+  it('Should submit form when clicked', async () => {
+    const { getByRole, getAllByRole, getByText } = render(ReportIssueModal, { onclose, linkInjection })
+
+    await fireEvent.click(getByRole('combobox'))
+    await fireEvent.click(getAllByRole('option')[1])
+    await fireEvent.click(getByText('Send report'))
+
+    expect(track).toHaveBeenCalledWith(
+      TrackingEvent.ManualReport,
+      linkInjection.title_details,
+      {
+        report_reason: /** @type {HTMLOptionElement} */ (getAllByRole('option')[1]).value,
+        sid: linkInjection.sid,
+        title: linkInjection.title,
+        sentence: linkInjection.sentence,
+        failed: linkInjection.failed?.toString(),
+        failed_message: linkInjection.failed_message,
+        manual: linkInjection.manual?.toString(),
+      },
+    )
+
+    expect(getByText('Report has been sent', { exact: false }))
+  })
+
+  it('Should not submit form when no reason is selected', async () => {
+    const { getByText } = render(ReportIssueModal, { onclose, linkInjection })
+
+    await fireEvent.click(getByText('Send report'))
+
+    expect(track).not.toHaveBeenCalled()
+  })
+})