@playpilot/tpi 3.3.0 → 3.3.1

package/package.json

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

package/src/lib/linkInjection.ts

@@ -1,4 +1,5 @@
 import { mount, unmount } from 'svelte'
+import TitleModal from '../routes/components/TitleModal.svelte'
 import TitlePopover from '../routes/components/TitlePopover.svelte'
 import AfterArticlePlaylinks from '../routes/components/AfterArticlePlaylinks.svelte'
 import { cleanPhrase, findTextNodeContaining, isNodeInLink, replaceStartingFrom } from './text'
@@ -12,6 +13,7 @@ const activePopovers: Record<string, { injection: LinkInjection; component: obje
 
 let currentlyHoveredInjection: EventTarget | null = null
 let afterArticlePlaylinkInsertedComponent: object | null = null
+let activeModalInsertedComponent: object | null = null
 
 /**
  * Return a list of all valid text containing elements that may get injected into.
@@ -28,7 +30,7 @@ export function getLinkInjectionElements(parentElement: HTMLElement): HTMLElemen
     if (validElements.includes(element)) continue
 
     // Ignore links, buttons, and headers
-    if (/^(A|BUTTON|SCRIPT|NOSCRIPT|STYLE|IFRAME|H[1-6])$/.test(element.tagName)) continue
+    if (/^(A|BUTTON|SCRIPT|NOSCRIPT|STYLE|IFRAME|FIGCAPTION|H[1-6])$/.test(element.tagName)) continue
 
     // Check if this element has a direct text node
     const hasTextNode = Array.from(element.childNodes).some(
@@ -90,9 +92,10 @@ export function getLinkInjectionsParentElement(): HTMLElement {
  * Replace all found injections within all given elements on the page
  * @returns Returns an array of injections with injections that failed to be inserted marked as `failed`.
  */
-export function injectLinksInDocument(elements: HTMLElement[], onclick: (LinkInjection: LinkInjection) => void, injections: LinkInjectionTypes = { aiInjections: [], manualInjections: [] }): LinkInjection[] {
-  const mergedInjections = mergeInjectionTypes(injections)
+export function injectLinksInDocument(elements: HTMLElement[], injections: LinkInjectionTypes = { aiInjections: [], manualInjections: [] }): LinkInjection[] {
+  clearLinkInjections()
 
+  const mergedInjections = mergeInjectionTypes(injections)
   if (!mergedInjections) return []
 
   // Find injection in text content of all elements together, ignore potential HTML elements.
@@ -162,11 +165,11 @@ export function injectLinksInDocument(elements: HTMLElement[], onclick: (LinkInj
     }
   }
 
-  addLinkInjectionEventListeners(validInjections, onclick)
+  addLinkInjectionEventListeners(validInjections)
   addCSSVariablesToLinks()
 
   const afterArticleInjections = filterInvalidAfterArticleInjections(mergedInjections)
-  if (afterArticleInjections.length) insertAfterArticlePlaylinks(elements, afterArticleInjections, onclick)
+  if (afterArticleInjections.length) insertAfterArticlePlaylinks(elements, afterArticleInjections)
 
   return mergedInjections.filter(i => i.title_details).map((injection, index) => {
     // Favour manual injections over AI injections
@@ -219,7 +222,7 @@ function addCSSVariablesToLinks(): void {
 /**
  * Add event listeners to all injected links. These events are for both the popover and the modal.
  */
-function addLinkInjectionEventListeners(injections: LinkInjection[], onclick: (injection: LinkInjection) => void): void {
+function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
   // Open modal on click
   window.addEventListener('click', (event) => {
     const target = event.target as HTMLElement | null
@@ -231,7 +234,7 @@ function addLinkInjectionEventListeners(injections: LinkInjection[], onclick: (i
     const injection = injections.find(injection => key === injection.key)
     if (!injection) return
 
-    openLinkModal(event, injection, onclick)
+    openLinkModal(event, injection)
   })
 
   const createdInjectionElements = Array.from(document.querySelectorAll(keySelector)) as HTMLElement[]
@@ -250,16 +253,27 @@ function addLinkInjectionEventListeners(injections: LinkInjection[], onclick: (i
 }
 
 /**
- * Prevent default click and run onclick from parent. Ignore clicks that used modifier keys or that were not left click.
- * The event is not fired when the click happens from inside a popover.
+ * Open modal for the corresponding injection by mounting the component and saving it to a variable.
+ * Ignore clicks that used modifier keys or that were not left click.
  */
-function openLinkModal(event: MouseEvent, injection: LinkInjection, onclick: (injection: LinkInjection) => void): void {
+function openLinkModal(event: MouseEvent, injection: LinkInjection): void {
   if (event.ctrlKey || event.metaKey || event.button !== 0) return
+  if (activeModalInsertedComponent) return
 
   event.preventDefault()
 
-  onclick(injection)
   destroyLinkPopover(injection)
+  activeModalInsertedComponent = mount(TitleModal, { target: document.body, props: { title: injection.title_details!, onclose: destroyLinkModal } })
+}
+
+/**
+ * Unmount the modal, removing it from the dom
+ */
+function destroyLinkModal(outro: boolean = true): void {
+  if (!activeModalInsertedComponent) return
+
+  unmount(activeModalInsertedComponent, { outro })
+  activeModalInsertedComponent = null
 }
 
 /**
@@ -303,7 +317,8 @@ function destroyLinkPopover(injection: LinkInjection, outro: boolean = true) {
  * The config object contains a selector option as well as a position. This way a selector can be given and you can
  * choose to insert the after article before or after the given element.
  */
-export function insertAfterArticlePlaylinks(elements: HTMLElement[], injections: LinkInjection[], onclickmodal: (linkInjection: LinkInjection) => void) {
+export function insertAfterArticlePlaylinks(elements: HTMLElement[], injections: LinkInjection[]): void {
+  if (afterArticlePlaylinkInsertedComponent) return
   if (!injections.length) return
 
   const target = document.createElement('div')
@@ -314,7 +329,7 @@ export function insertAfterArticlePlaylinks(elements: HTMLElement[], injections:
   target.dataset.playpilotAfterArticlePlaylinks = 'true'
   insertElement.insertAdjacentElement(insertPosition, target)
 
-  afterArticlePlaylinkInsertedComponent = mount(AfterArticlePlaylinks, { target, props: { linkInjections: injections, onclickmodal } })
+  afterArticlePlaylinkInsertedComponent = mount(AfterArticlePlaylinks, { target, props: { linkInjections: injections, onclickmodal: (event, injection) => openLinkModal(event, injection) } })
 }
 
 function clearAfterArticlePlaylinks(): void {
@@ -337,6 +352,7 @@ export function clearLinkInjections(): void {
   Object.values(activePopovers).forEach(({ injection }) => destroyLinkPopover(injection, false))
 
   clearAfterArticlePlaylinks()
+  destroyLinkModal()
 }
 
 /**

package/src/lib/scss/_mixins.scss

@@ -6,3 +6,16 @@
     fill: none;
   }
 }
+
+@mixin global-outlines() {
+  :global(a),
+  :global(button),
+  :global(input) {
+    transition: outline-offset 100ms;
+
+    &:focus-visible {
+      outline: 2px solid white;
+      outline-offset: 2px;
+    }
+  }
+}

package/src/routes/+page.svelte

@@ -7,7 +7,6 @@
   import { isCrawler } from '$lib/crawler'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { authorize, getAuthToken, isEditorialModeEnabled, removeAuthCookie, setEditorialParamInUrl } from '$lib/auth'
-  import TitleModal from './components/TitleModal.svelte'
   import Editor from './components/Editorial/Editor.svelte'
   import EditorTrigger from './components/Editorial/EditorTrigger.svelte'
   import type { LinkInjectionResponse, LinkInjection, LinkInjectionTypes } from '$lib/types/injection'
@@ -17,7 +16,6 @@
   const htmlString = elements.map(p => p.outerHTML).join('')
 
   let response: LinkInjectionResponse | null = $state(null)
-  let activeInjection: LinkInjection | null = $state(null)
   let isEditorialMode = $state(isEditorialModeEnabled())
   let hasAuthToken = $state(!!getAuthToken())
   let authorized = $state(false)
@@ -91,14 +89,13 @@
   }
 
   function rerender(): void {
-    clearLinkInjections()
     inject(separateLinkInjectionTypes(linkInjections))
   }
 
   function inject(injections: LinkInjectionTypes = { aiInjections, manualInjections }): void {
     // Get filtered injections as they are shown on the page.
     // Only update state if it they are different from current injections.
-    const filteredInjections = injectLinksInDocument(elements, setTarget, injections)
+    const filteredInjections = injectLinksInDocument(elements, injections)
     if (JSON.stringify(filteredInjections) !== JSON.stringify(linkInjections)) linkInjections = filteredInjections
 
     const successfulInjections = filteredInjections.filter(i => !i.failed)
@@ -112,10 +109,6 @@
     })
   }
 
-  function setTarget(injection: LinkInjection): void {
-    activeInjection = injection
-  }
-
   function openEditorialMode() {
     isEditorialMode = true
     setEditorialParamInUrl()
@@ -145,10 +138,6 @@
         percentage: response?.ai_progress_percentage,
       }} />
   {/if}
-
-  {#if activeInjection && activeInjection.title_details}
-    <TitleModal title={activeInjection.title_details} onclose={() => activeInjection = null} />
-  {/if}
 </div>
 
 <style lang="scss">
@@ -160,16 +149,5 @@
     :global(*) {
       box-sizing: border-box;
     }
-
-    :global(.playpilot-link-injections button),
-    :global(.playpilot-link-injections input) {
-      transition: outline-offset 100ms;
-
-      &:focus-visible,
-      &:focus-visible {
-        outline: 2px solid white;
-        outline-offset: 2px;
-      }
-    }
   }
 </style>

package/src/routes/components/AfterArticlePlaylinks.svelte

@@ -8,11 +8,10 @@
   interface Props {
     linkInjections: LinkInjection[],
     // eslint-disable-next-line no-unused-vars
-    onclickmodal?: (linkInjection: LinkInjection) => void
+    onclickmodal?: (event: MouseEvent, linkInjection: LinkInjection) => void
   }
 
-  // eslint-disable-next-line no-unused-vars
-  const { linkInjections, onclickmodal = (linkInjection) => null }: Props = $props()
+  const { linkInjections, onclickmodal = () => null }: Props = $props()
 
   function onclick(title: TitleData, playlink: string): void {
     track(TrackingEvent.AfterArticlePlaylinkClick, title, { playlink })
@@ -21,9 +20,9 @@
   /**
    * Open a modal for the given injection and track the click
    */
-  function openModal(title: TitleData, linkInjection: LinkInjection): void {
+  function openModal(event: MouseEvent, title: TitleData, linkInjection: LinkInjection): void {
     track(TrackingEvent.AfterArticleModalButtonClick, title)
-    onclickmodal(linkInjection)
+    onclickmodal(event, linkInjection)
   }
 </script>
 
@@ -39,7 +38,7 @@
             "{title}" {t('Is Available To Stream')}
 
             <span>
-              <button onclick={() => openModal(title_details as TitleData, linkInjection)}>
+              <button onclick={(event) => openModal(event, title_details as TitleData, linkInjection)}>
                 {t('View Streaming Options')}
               </button>
             </span>

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

@@ -243,6 +243,7 @@
     line-height: normal;
 
     @include reset-svg();
+    @include global-outlines();
   }
 
   .panel-open {

package/src/routes/components/Modal.svelte

@@ -65,6 +65,7 @@
     }
 
     @include reset-svg();
+    @include global-outlines();
   }
 
 

package/src/routes/components/Popover.svelte

@@ -77,6 +77,7 @@
     z-index: 2147483647; // As high as she goes
 
     @include reset-svg();
+    @include global-outlines();
 
     &.flip {
       top: auto;