@playpilot/tpi 1.0.0

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

@@ -0,0 +1,260 @@
+<script>
+  import { slide } from 'svelte/transition'
+  import IconChevron from '../Icons/IconChevron.svelte'
+  import IconIMDb from '../Icons/IconIMDb.svelte'
+  import Switch from './Switch.svelte'
+  import TextInput from './TextInput.svelte'
+  import PlaylinkTypeSelect from './PlaylinkTypeSelect.svelte'
+  import Alert from './Alert.svelte'
+  import ContextMenu from '../ContextMenu.svelte'
+
+  /** @type {{ linkInjection: LinkInjection, onremove?: () => void, onhighlight?: (element: HTMLElement) => void }} */
+  const { linkInjection = $bindable(), onremove = () => null, onhighlight = () => null } = $props()
+
+  const { key, title_details, failed } = $derived(linkInjection || {})
+
+  /** @type {TitleData} */
+  // @ts-ignore Definitely not null
+  const title = /** @type {TitleData} */ $derived(title_details)
+
+  let expanded = $state(false)
+  let highlighted = $state(false)
+  /** @type {HTMLElement | null} */
+  let element = $state(null)
+
+  /**
+   * Highlight links beloning to this item in the article itself.
+   * @param {boolean} state
+   */
+  function toggleOnPageResultHighlight(state = true) {
+    const matchingElements = getMatchingElements()
+    matchingElements.forEach(element => {
+      element.classList.toggle('injection-highlight', state)
+    })
+  }
+
+  /**
+   * Highlight this editor when hovering links in the article itself.
+   * @param {MouseEvent} event
+   */
+  function setInEditorHighlight(event) {
+    let target = /** @type {HTMLElement | null} */ (event.target)
+    let injectionKey = target?.dataset.playpilotInjectionKey
+
+    if (target && !injectionKey) {
+      target = /** @type {HTMLElement | null} */ (target.closest(`[data-playpilot-injection-key="${key}"]`))
+      injectionKey = target?.dataset.playpilotInjectionKey
+    }
+
+    highlighted = injectionKey === key
+
+    if (element && highlighted) onhighlight(element)
+  }
+
+  /** @param {MouseEvent} event */
+  function scrollLinkIntoView(event) {
+    requestAnimationFrame(() => toggleOnPageResultHighlight()) // Reset highlight in case the playlink type changed
+
+    const target = /** @type {HTMLElement} */ (event.target)
+    if (['BUTTON', 'INPUT'].includes(target.nodeName)) return
+    if (target.closest('button') || target.closest('input')) return
+
+    const matchingElement = getMatchingElements()[0]
+    if (matchingElement) matchingElement.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  /** @returns {Element[]} */
+  function getMatchingElements() {
+    return Array.from(document.querySelectorAll(`[data-playpilot-injection-key="${key}"]`))
+  }
+</script>
+
+<svelte:window on:mouseover={setInEditorHighlight} />
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<div
+  class="item"
+  class:highlighted
+  onmouseenter={() => toggleOnPageResultHighlight(true)}
+  onmouseleave={() => toggleOnPageResultHighlight(false)}
+  onclick={scrollLinkIntoView}
+  bind:this={element}
+  out:slide|global={{ duration: 200 }}>
+  <div class="header">
+    <img class="poster" src={title.standing_poster} alt="" />
+
+    <div class="info">
+      <div class="title">{title.title}</div>
+
+      <div class="meta">
+        <span><IconIMDb /> 7.1</span>
+        <span>{title.year}</span>
+        <span>{title.type}</span>
+
+        {#if title.length}
+          <span data-testid="length">{title.length}m</span>
+        {/if}
+      </div>
+    </div>
+
+    <div class="context-menu">
+      <ContextMenu ariaLabel="More options">
+        <button class="context-menu-action" onclick={onremove}>Remove</button>
+      </ContextMenu>
+    </div>
+  </div>
+
+  <div class="content">
+    {#if failed}
+      <Alert>A match was found, but the link could not be injected.</Alert>
+    {:else}
+      <div class="actions">
+        <button class="expand" onclick={() => expanded = !expanded} aria-label="Expand" aria-expanded={expanded}>
+          <IconChevron {expanded} />
+        </button>
+
+        <Switch label="Visible" active={!linkInjection.inactive} onclick={(active) => linkInjection.inactive = !active}>
+          Visible
+        </Switch>
+      </div>
+    {/if}
+
+    {#if expanded}
+      <div class="expanded" transition:slide={{ duration: 100 }}>
+        <div class="label">Link URL</div>
+        <TextInput bind:value={linkInjection.playpilot_url} label="Playlink URL" />
+
+        <div class="label offset">Layout options</div>
+        <div class="type-select">
+          <PlaylinkTypeSelect {linkInjection} />
+        </div>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .item {
+    padding: 1rem 0.5rem 1rem 0.5rem;
+    border-bottom: 1px solid var(--playpilot-lighter);
+    transition: outline-offset 100ms;
+  }
+
+  .item:hover,
+  .item.highlighted {
+    border-radius: 0.5rem;
+    border-color: transparent;
+    outline: 2px solid var(--playpilot-content);
+    outline-offset: 1px;
+  }
+
+  .item.highlighted {
+    outline: 2px solid var(--playpilot-primary);
+  }
+
+  .header {
+    display: flex;
+    gap: 1rem;
+    width: 100%;
+  }
+
+  .poster {
+    display: block;
+    width: 2rem;
+    height: 3rem;
+    border-radius: 0.25rem;
+    background: var(--playpilot-content);
+  }
+
+  .title {
+    font-size: 0.875rem;
+    word-break: break-word;
+  }
+
+  .meta {
+    display: flex;
+    gap: 0.5rem;
+    font-size: 0.75rem;
+    color: var(--playpilot-text-color-alt);
+  }
+
+  .meta span {
+    display: flex;
+    align-items: center;
+  }
+
+  .meta :global(svg) {
+    display: block;
+    margin: -0.125rem 0.125rem 0 0;
+    height: 1em;
+  }
+
+  .content {
+    padding-top: 1rem;
+  }
+
+  .context-menu {
+    margin: 0 -0.25rem 0 auto;
+  }
+
+  .context-menu-action {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 1rem;
+    font-family: inherit;
+    color: var(--playpilot-text-color-alt);
+    cursor: pointer;
+  }
+
+  .context-menu-action:hover {
+    color: var(--playpilot-text-color);
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .expand {
+    appearance: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    border: 0;
+    border-radius: 50%;
+    background: var(--playpilot-content);
+    color: var(--playpilot-text-color);
+    box-shadow: var(--playpilot-shadow);
+    cursor: pointer;
+  }
+
+  .expand:hover {
+    filter: brightness(1.2);
+  }
+
+  .expanded {
+    padding-top: 1rem;
+  }
+
+  .type-select {
+    margin-top: 0.5rem;
+  }
+
+  .label {
+    margin-bottom: 0.25rem;
+    opacity: 0.75;
+    font-size: 0.675rem;
+    color: var(--playpilot-text-color-alt);
+  }
+
+  .offset {
+    margin-top: 0.75rem;
+  }
+</style>
+

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

@@ -0,0 +1,192 @@
+<script>
+  import { onMount } from 'svelte'
+  import IconBack from '../Icons/IconBack.svelte'
+  import RoundButton from '../RoundButton.svelte'
+  import Alert from './Alert.svelte'
+  import TextInput from './TextInput.svelte'
+  import TitleSearch from './Search/TitleSearch.svelte'
+  import { playPilotBaseUrl } from '$lib/constants'
+  import { generateInjectionKey } from '$lib/api'
+  import { decodeHtmlEntities } from '$lib/html'
+
+  /** @type {{ htmlString: string, onsave: (linkInjection: LinkInjection) => void, onclose?: () => void }} */
+  let { htmlString = '', onsave, onclose = () => null } = $props()
+
+  let currentSelection = $state('')
+  let selectionSentence = $state('')
+  /** @type {TitleData | null} */
+  let selectedTitle = $state(null)
+  let error = $state('')
+  let query = $state('')
+
+  onMount(updateSelection)
+
+  /**
+   * 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() {
+    const selection = window.getSelection()
+    if (!selection) return
+
+    const selectionText = selection.toString().trim()
+    if (!selectionText) return // No content was selected
+
+    error = ''
+    currentSelection = selectionText
+    query = currentSelection
+    selectionSentence = findSentenceForSelection(selection, selectionText)
+
+    const nodeContent = selection.getRangeAt(0).commonAncestorContainer.textContent
+    const documentTextContent = decodeHtmlEntities(htmlString)
+
+    if (!nodeContent || !documentTextContent.includes(nodeContent)) { // Selected content is not within the ALI selector
+      error = 'Selection was not inside of given content'
+    }
+  }
+
+  /**
+   * 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) {
+    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.
+    // This is meant for content that is inside of other elements such as <p>Some <strong>word</strong> in a sentence</p>
+    // If we selected "word", we'd still want the full sentence, rather than just the "word".
+    let node = range.startContainer
+    if ((node.textContent || '').length <= selectionText.length * 2 && range.startContainer.parentNode) {
+      node = range.startContainer.parentNode
+    }
+
+    if (!node) return ''
+
+    const fullText = node.textContent || ''
+    const startOffset = range.startOffset
+    const endOffset = range.endOffset
+
+    const before = fullText.slice(0, startOffset).lastIndexOf('.') // Character at start of the sentence
+    const after = fullText.slice(endOffset).search(/[.!?]/) // Character at end of the sentence
+
+    const sentenceStart = before === -1 ? 0 : before + 1
+    const sentenceEnd = after === -1 ? fullText.length : endOffset + after + 1
+
+    return fullText.slice(sentenceStart, sentenceEnd).trim()
+  }
+
+  /**
+   * @returns {void}
+   */
+  function save() {
+    if (!currentSelection) return
+    if (!selectedTitle) return
+
+    const typePath = selectedTitle.type === 'movie' ? 'movie' : 'show'
+    const url = playPilotBaseUrl + `/${typePath}/${selectedTitle.slug}`
+
+    /** @type {LinkInjection} */
+    const linkInjection = {
+      sid: selectedTitle.sid,
+      title: currentSelection,
+      sentence: selectionSentence,
+      playpilot_url: url,
+      key: generateInjectionKey(selectedTitle.sid),
+      title_details: selectedTitle,
+    }
+
+    onsave(linkInjection)
+    onclose()
+  }
+</script>
+
+<svelte:window onmouseup={updateSelection} />
+
+<section class="layout">
+  <div class="header">
+    <RoundButton onclick={onclose} size="1.5rem"><IconBack /></RoundButton>
+    <h2>Add Playlink manually</h2>
+  </div>
+
+  <p>Highlight the text section in your post that you want to turn into a Playlink.</p>
+
+  <label for="text">Selected text</label>
+  <TextInput value={currentSelection} label="Select text on the page" name="selected-text" readonly />
+
+  {#if error}
+    <div class="error">
+      <Alert>{error}</Alert>
+    </div>
+  {/if}
+
+  <label for="text">Paired title</label>
+  <TitleSearch onselect={(title) => selectedTitle = title} bind:query />
+
+  <button class="save" onclick={save} disabled={!currentSelection || !selectedTitle}>
+    Add playlink
+  </button>
+</section>
+
+<style>
+  h2 {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: normal
+  }
+
+  p,
+  label {
+    font-size: 0.75rem;
+    max-width: 15rem;
+    color: var(--playpilot-text-color-alt);
+  }
+
+  label {
+    display: block;
+    margin-top: 1rem;
+  }
+
+  .layout {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+  }
+
+  .error {
+    margin-top: 0.5rem;
+  }
+
+  .save {
+    cursor: pointer;
+    appearance: none;
+    width: 100%;
+    margin-top: auto;
+    padding: 0.5rem;
+    border: 0;
+    border-radius: 2rem;
+    background: var(--playpilot-content);
+    transition: opacity 100ms;
+    font-family: inherit;
+    color: var(--playpilot-text-color-alt);
+  }
+
+  .save:not([disabled]):hover {
+    background: var(--playpilot-content-light);
+    color: var(--playpilot-text-color);
+  }
+
+  .save[disabled] {
+    cursor: default;
+    opacity: 0.5;
+  }
+</style>

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

@@ -0,0 +1,132 @@
+<script>
+  import { slide } from 'svelte/transition'
+  import IconAlign from '../Icons/IconAlign.svelte'
+  import Switch from './Switch.svelte'
+
+  /** @type {{ linkInjection: LinkInjection }} */
+  let { linkInjection } = $props()
+
+  let isAfterArticleButton = $derived(linkInjection.after_article_style === 'modal_button')
+</script>
+
+<div class="switches">
+  <Switch
+    fullwidth
+    active={linkInjection.in_text ?? true}
+    onclick={(active) => linkInjection.in_text = active}
+    label="In-text Playlink">
+    <IconAlign align="center" />
+    In-text Playlink
+  </Switch>
+
+  <Switch
+    fullwidth
+    active={linkInjection.after_article ?? false}
+    onclick={(active) => linkInjection.after_article = active}
+    label="Bottom Playlink">
+    <IconAlign align="bottom" />
+    Bottom Playlink
+  </Switch>
+</div>
+
+{#if linkInjection.after_article}
+  <div transition:slide={{ duration: 100 }}>
+    <div class="label">Bottom playlinks style</div>
+
+    <div
+      class="group"
+      role="listbox"
+      tabindex="0"
+      aria-label="Playlink type"
+      aria-activedescendant="playlinks-{isAfterArticleButton ? 'after-article' : 'in-text'}">
+      <button
+        class:active={!isAfterArticleButton}
+        role="option"
+        id="playlinks-in-text"
+        aria-selected={!isAfterArticleButton || null}
+        onclick={() => linkInjection.after_article_style = 'playlinks'}>
+        Playlinks sentence
+      </button>
+
+      <button
+        class:active={isAfterArticleButton}
+        role="option"
+        id="playlinks-after-article"
+        aria-selected={isAfterArticleButton || null}
+        onclick={() => linkInjection.after_article_style = 'modal_button'}>
+        Modal button
+      </button>
+
+      <div class="active-marker" class:right={isAfterArticleButton}></div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  button {
+    z-index: 1;
+    appearance: none;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    border: 0;
+    border-radius: 2rem;
+    padding: 0.5rem;
+    background: transparent;
+    font-family: var(--playpilot-font-family);
+    font-size: 0.65rem;
+    color: var(--playpilot-text-color-alt);
+    cursor: pointer;
+  }
+
+  button:hover,
+  button.active {
+    color: var(--playpilot-text-color);
+  }
+
+  .group {
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.25rem;
+    border: 0;
+    border-radius: 2rem;
+    background: var(--playpilot-light);
+    color: var(--playpilot-text-color-alt);
+    font-size: 0.75rem;
+    font-family: var(--playpilot-font-family);
+  }
+
+  .active-marker {
+    z-index: 0;
+    position: absolute;
+    width: calc(50% - 0.5rem);
+    height: calc(100% - 0.5rem);
+    left: 0.25rem;
+    top: 0.25rem;
+    border-radius: 2rem;
+    background: var(--playpilot-content);
+    transition: left 100ms;
+  }
+
+  .right {
+    left: calc(50% + 0.25rem);
+  }
+
+  .label {
+    margin: 0.675rem 0 0.25rem;
+    opacity: 0.75;
+    font-size: 0.675rem;
+    color: var(--playpilot-text-color-alt);
+  }
+</style>