@playpilot/tpi 1.0.0

package/src/routes/components/AfterArticlePlaylinks.svelte

@@ -0,0 +1,90 @@
+<script>
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { track } from '$lib/tracking'
+
+  /** @type {{ linkInjections: LinkInjection[], onclickmodal?: (linkInjection: LinkInjection) => void }} */
+  // eslint-disable-next-line no-unused-vars
+  const { linkInjections, onclickmodal = (linkInjection) => null } = $props()
+
+  /**
+   * @param {TitleData} title The full title data of the clicked playlink
+   * @param {string} playlink Name of the clicked playlink
+   */
+  function onclick(title, playlink) {
+    track(TrackingEvent.AfterArticlePlaylinkClick, title, { playlink })
+  }
+
+  /**
+   * Open a modal for the given injection and track the click
+   * @param {TitleData} title The full title data of the title the modal button was clicked for
+   * @param {LinkInjection} linkInjection
+   */
+  function openModal(title, linkInjection) {
+    track(TrackingEvent.AfterArticleModalButtonClick, title)
+    onclickmodal(linkInjection)
+  }
+</script>
+
+{#if linkInjections.length}
+  <p>
+    {#each linkInjections as linkInjection}
+      {@const { key, title, title_details, after_article_style } = linkInjection}
+      {@const playlinks = title_details?.providers || []}
+
+      <span data-playpilot-injection-key={key}>
+        {#if playlinks.length}
+          {#if after_article_style === 'modal_button'}
+            "{title}" is available to stream.
+
+            <span>
+              <button onclick={() => openModal(/** @type {TitleData} */ (title_details), linkInjection)}>
+                View streaming options
+              </button>
+            </span>
+          {:else}
+            "{title}" is available to stream on
+            {#each playlinks as { name, url }, i}
+              {#if i}
+                {i === playlinks.length - 1 ? ', and' : ','}
+              {/if}
+
+              <a onclick={() => onclick(/** @type {TitleData} */ (title_details), name)} href={url} target="_blank">
+                {name}
+              </a>
+            {/each}.
+          {/if}
+          <br>
+        {:else}
+          "{title}" is not currently available to stream. <br>
+        {/if}
+      </span>
+    {/each}
+  </p>
+{/if}
+
+<style>
+  span {
+    display: block;
+  }
+
+  button {
+    appearance: none;
+    padding: var(--playpilot-after-article-button-padding, 0.25rem 0.75rem);
+    margin: var(--playpilot-after-article-button-margin, 0.25rem 0 0);
+    background: var(--playpilot-after-article-button-background, transparent);
+    border: var(--playpilot-after-article-button-border, 2px solid currentColor);
+    border-radius: var(--playpilot-after-article-button-border-radius, 1rem);
+    color: var(--playpilot-after-article-button-text-color, inherit);
+    font-weight: var(--playpilot-after-article-button-font-weight, bold);
+    font-size: var(--playpilot-after-article-button-font-size, 1rem);
+    cursor: pointer;
+    transition: all 50ms;
+  }
+
+  button:hover {
+    background: var(--playpilot-after-article-button-background-hover, transparent);
+    border: var(--playpilot-after-article-button-border-hover, 2px solid currentColor);
+    color: var(--playpilot-after-article-button-text-color-hover, inherit);
+    transform: var(--playpilot-after-article-button-transform-hover, scale(1.02));
+  }
+</style>

package/src/routes/components/ContextMenu.svelte

@@ -0,0 +1,67 @@
+<script>
+  import { fly } from 'svelte/transition'
+  import IconDots from './Icons/IconDots.svelte'
+
+  /** @type {{ ariaLabel: string, children: import('svelte').Snippet }} */
+  const { ariaLabel, children } = $props()
+
+  let active = $state(false)
+  /** @type {HTMLElement | null} */
+  let buttonElement = $state(null)
+
+  /**
+   * Close the context menu when clicking anything but the toggle button.
+   * @param {MouseEvent} event
+   */
+  function closeOnOutsideClick(event) {
+    const target = /** @type {HTMLElement} */ (event.target)
+
+    if (target === buttonElement || buttonElement?.contains(target)) return
+
+    active = false
+  }
+</script>
+
+<svelte:window onclick={closeOnOutsideClick} />
+
+<div class="context-menu">
+  <button aria-label={ariaLabel} aria-expanded={active} onclick={() => active = !active} bind:this={buttonElement}>
+    <IconDots />
+  </button>
+
+  {#if active}
+    <div class="content" in:fly={{ duration: 150, y: 5 }}>
+      {@render children()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  button {
+    appearance: none;
+    border: 0;
+    border-radius: 0.25rem;
+    background: transparent;
+    color: var(--playpilot-text-color-alt);
+  }
+
+  button:hover {
+    cursor: pointer;
+    color: white;
+  }
+
+  .context-menu {
+    position: relative;
+  }
+
+  .content {
+    z-index: 1;
+    position: absolute;
+    top: 100%;
+    right: 0;
+    max-height: 5rem;
+    max-width: 10rem;
+    border-radius: 0.5rem;
+    background: var(--playpilot-lighter);
+  }
+</style>

package/src/routes/components/Description.svelte

@@ -0,0 +1,47 @@
+<script>
+  /** @type {{ text: string, blurb?: string, limit?: number }} */
+  const { text, blurb = '', limit = 200 } = $props()
+
+  let expanded = $state(false)
+  let limitedText = $derived(text.slice(0, limit))
+</script>
+
+<div>
+  <span class="paragraph">
+    {expanded ? text : limitedText}{#if !expanded && text.length > limit}...{/if}
+
+    {#if !expanded && (text.length > limit || blurb)}
+      <button class="show-more" onclick={() => expanded = true}>Show more</button>
+    {/if}
+  </span>
+
+  {#if expanded}
+    <p>{blurb}</p>
+  {/if}
+</div>
+
+<style>
+  p,
+  .paragraph {
+    display: block;
+    margin: 1rem 0 0;
+  }
+
+  .show-more {
+    display: inline;
+    appearance: none;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    color: var(--playpilot-read-more-text-color, var(--playpilot-text-color-alt));
+    font-weight: var(--playpilot-read-more-font-weight, inherit);
+    font-family: inherit;
+    font-size: inherit;
+  }
+
+  .show-more:hover {
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    cursor: pointer;
+  }
+</style>

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

@@ -0,0 +1,18 @@
+<script>
+  /** @type {{ children: import('svelte').Snippet }} */
+  const { children } = $props()
+</script>
+
+<div class="alert">
+  {@render children()}
+</div>
+
+<style>
+  .alert {
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+    border: 1px solid var(--playpilot-error);
+    background: var(--playpilot-error-dark);
+    font-size: 0.75rem;
+  }
+</style>

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

@@ -0,0 +1,134 @@
+<script>
+  import { onMount } from 'svelte'
+
+  /** @type {{ element: HTMLElement, position: Position, limit?: Position, onchange?: (position: Position) => void }} */
+  let { element, position = { x: 0, y: 0 }, limit = { x: 0, y: 0 }, onchange = () => null } = $props()
+
+  let isDragging = false
+
+  /** @type {Position} */
+  let dragStartPosition = { x: 0, y: 0 }
+  /** @type {Position} */
+  let elementStartPosition = position
+
+  onMount(() => {
+    setPosition(position.x, position.y)
+  })
+
+  /**
+   * @param {number} x
+   * @param {number} y
+   */
+  function setPosition(x, y) {
+    const windowWidth = window.innerWidth
+    const windowHeight = window.innerHeight
+    const elementWidth = element.clientWidth
+    const elementHeight = element.clientHeight
+
+    x = Math.min(Math.max(x, limit.x), windowWidth - elementWidth - limit.x)
+    y = Math.min(Math.max(y, limit.y), windowHeight - elementHeight - limit.y)
+
+    element.style.right = x + 'px'
+    element.style.bottom = Math.max(y, limit.y) + 'px'
+
+    position = { x, y }
+
+    onchange(position)
+  }
+
+  /**
+   * @param {MouseEvent | TouchEvent} event
+   * @returns {Position}
+   */
+  function getPositionFromEvent(event) {
+    return {
+      // @ts-ignore
+      x: event.pageX || event.touches?.[0].pageX || 0,
+      // @ts-ignore
+      y: event.pageY || event.touches?.[0].pageY || 0,
+    }
+  }
+
+  /**
+   * @param {MouseEvent | TouchEvent} event
+   */
+  function start(event) {
+    isDragging = true
+
+    dragStartPosition = getPositionFromEvent(event)
+    elementStartPosition = position
+  }
+
+  /**
+   * @param {MouseEvent | TouchEvent} event
+   */
+  function move(event) {
+    if (!isDragging) return
+
+    const dragCurrentPosition = getPositionFromEvent(event)
+    const differenceX = dragCurrentPosition.x - dragStartPosition.x
+    const differenceY = dragCurrentPosition.y - dragStartPosition.y
+
+    const newX = elementStartPosition.x - differenceX
+    const newY = elementStartPosition.y - differenceY
+
+    setPosition(newX, newY)
+  }
+
+  function end() {
+    if (!isDragging) return
+
+    isDragging = false
+  }
+</script>
+
+<svelte:window
+  onmousemove={move}
+  ontouchmove={move}
+  onmouseup={end}
+  ontouchend={end}
+  onresize={() => setPosition(position.x, position.y)} />
+
+<button class="drag-handle" onmousedown={start} ontouchstart={start} aria-label="Move editor"></button>
+
+<style>
+  .drag-handle {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 30%;
+    width: 40%;
+    height: 1rem;
+    background: transparent;
+    border: 0;
+    cursor: grab;
+  }
+
+  .drag-handle:active {
+    cursor: grabbing;
+  }
+
+  .drag-handle::before {
+    display: block;
+    content: "";
+    position: absolute;
+    top: 40%;
+    right: 0;
+    bottom: 40%;
+    left: 0;
+    border-radius: 1rem;
+    background: var(--playpilot-text-color);
+    opacity: 0.15;
+    transition: opacity 100ms, transform 50ms;
+  }
+
+  .drag-handle:hover::before {
+    opacity: 0.65;
+    transform: scale(1.05);
+  }
+
+  .drag-handle:active::before {
+    opacity: 0.9;
+    transform: scale(0.95);
+  }
+</style>

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

@@ -0,0 +1,277 @@
+<script>
+  import { fly, slide } from 'svelte/transition'
+  import EditorItem from './EditorItem.svelte'
+  import DragHandle from './DragHandle.svelte'
+  import Alert from './Alert.svelte'
+  import ManualInjection from './ManualInjection.svelte'
+  import RoundButton from '../RoundButton.svelte'
+  import { saveLinkInjections } from '$lib/api'
+
+  /** @type {{ linkInjections: LinkInjection[], htmlString?: string, loading?: boolean }} */
+  let { linkInjections = $bindable(), htmlString = '', loading = false } = $props()
+
+  const editorPositionKey = 'editor-position'
+
+  /** @type {HTMLElement | null} */
+  let editorElement = $state(null)
+  /** @type {Position} */
+  let position = $state(JSON.parse(localStorage.getItem(editorPositionKey) || '{ "x": 0, "y": 0 }'))
+  let manualInjectionActive = $state(false)
+  let saving = $state(false)
+  let hasError = $state(false)
+  let scrollDistance = $state(0)
+
+  /** Save the given injections in their current state and rewrite object to returned value */
+  async function save() {
+    try {
+      saving = true
+      hasError = false
+
+      linkInjections = await saveLinkInjections(linkInjections, htmlString)
+    } catch {
+      hasError = true
+    } finally {
+      saving = false
+    }
+  }
+
+  /**
+   * @param {Position} position
+   */
+  function savePosition(position) {
+    localStorage.setItem(editorPositionKey, JSON.stringify(position))
+  }
+
+  /**
+   * @param {string} key
+   */
+  function removeInjection(key) {
+    linkInjections = linkInjections.filter(i => i.key !== key)
+  }
+
+  /**
+   * @param {HTMLElement} itemElement
+   */
+  function scrollToItem(itemElement) {
+    if (!editorElement) return
+
+    const itemTop = itemElement.offsetTop
+    const itemBottom = itemTop + itemElement.offsetHeight
+    const editorElementTop = editorElement.scrollTop
+    const editorElementBottom = editorElementTop + editorElement.clientHeight
+
+    const isFullyVisible = itemTop >= editorElementTop && itemBottom <= editorElementBottom
+
+    if (!isFullyVisible) {
+      editorElement.scrollTo({
+        top: itemTop - editorElement.clientHeight / 2,
+        behavior: 'smooth',
+      })
+    }
+  }
+
+  /**
+   * @param {Event} event
+   */
+  function onscroll(event) {
+    const target = /** @type {HTMLElement} */ (event.target)
+    scrollDistance = target.scrollTop
+  }
+</script>
+
+<section class="editor playpilot-styled-scrollbar" class:panel-open={manualInjectionActive} class:loading bind:this={editorElement} {onscroll}>
+  {#if editorElement}
+    <div class="drag-handle">
+      <DragHandle element={editorElement} {position} limit={{ x: 16, y: 16 }} onchange={savePosition} />
+    </div>
+  {/if}
+
+  <header class="header">
+    <h1>Playlinks</h1>
+
+    {#if loading}
+      <div class="loading">Loading...</div>
+    {:else}
+      <div class="bubble" aria-label="{linkInjections.length} found playlinks">
+        {linkInjections.length}
+      </div>
+
+      <RoundButton onclick={() => manualInjectionActive = true} size="2rem" aria-label="Add manual injection">
+        +
+      </RoundButton>
+    {/if}
+  </header>
+
+  {#if !loading}
+    {#if hasError}
+      <div class="error" transition:slide|global={{ duration: 150 }}>
+        <Alert>Something went wrong, check your links below.</Alert>
+      </div>
+    {/if}
+
+    <div class="items">
+      {#each linkInjections as linkInjection, i (linkInjection.key)}
+        <div transition:slide={{ duration: 100 }}>
+          <EditorItem bind:linkInjection={linkInjections[i]} onremove={() => removeInjection(linkInjection.key)} onhighlight={scrollToItem} />
+        </div>
+      {:else}
+        <div class="empty">No link injections are present</div>
+      {/each}
+    </div>
+
+    {#if linkInjections.length}
+      <button class="save" disabled={saving} onclick={save}>
+        {saving ? 'Saving...' : 'Save links'}
+      </button>
+    {/if}
+  {/if}
+
+  {#if manualInjectionActive}
+    <div
+      class="panel"
+      style:top="{scrollDistance}px"
+      transition:fly={{ x: Math.min(window.innerWidth, 320), duration: 200, opacity: 1 }}>
+      <ManualInjection
+        {htmlString}
+        onclose={() => manualInjectionActive = false}
+        onsave={(linkInjection) => linkInjections.push(linkInjection)} />
+    </div>
+  {/if}
+</section>
+
+<style>
+  h1 {
+    margin: 0 0.75rem 0 0;
+    font-size: 1.25rem;
+    font-weight: normal;
+  }
+
+  .editor {
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    bottom: 1rem;
+    right: 1rem;
+    width: 100%;
+    max-width: 20rem;
+    max-height: min(50vh, 50rem);
+    min-height: 25rem;
+    padding: 1rem;
+    border-radius: 1.5rem;
+    background: var(--playpilot-dark);
+    box-shadow: var(--playpilot-shadow-large);
+    color: var(--playpilot-text-color);
+    font-family: var(--playpilot-font-family);
+    transition: border-radius 100ms;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  .panel-open {
+    overflow: hidden;
+  }
+
+  .loading {
+    min-height: 0;
+    border-radius: 2rem;
+    margin-left: auto;
+    padding-right: 0.5rem;
+    color: var(--playpilot-text-color-alt);
+    font-size: 0.85rem;
+  }
+
+  .drag-handle {
+    opacity: 0;
+    transition: opacity 150ms;
+  }
+
+  .editor:hover .drag-handle {
+    opacity: 1;
+  }
+
+  .header {
+    z-index: 5;
+    position: sticky;
+    top: -1rem;
+    margin: -1rem -1rem 0;
+    padding: 1rem 1rem 1rem 1.5rem;
+    background: var(--playpilot-dark);
+    display: flex;
+    align-items: center;
+  }
+
+  .loading .header  {
+    margin: -1rem;
+  }
+
+  .bubble {
+    appearance: none;
+    width: 1.5rem;
+    height: 1.5rem;
+    border: 0;
+    padding: 0;
+    margin-right: auto;
+    border-radius: 50%;
+    background: var(--playpilot-green);
+    line-height: 1.5rem;
+    text-align: center;
+    font-size: 0.85rem;
+  }
+
+  .items {
+    padding-top: 0.5rem;
+    margin-bottom: auto;
+  }
+
+  .empty {
+    padding: 0.5rem;
+    font-size: 0.85rem;
+    font-style: italic;
+    color: var(--playpilot-text-color-alt);
+  }
+
+  .save {
+    z-index: 1;
+    appearance: none;
+    position: sticky;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    margin-top: 1rem;
+    padding: 0.5rem;
+    border: 0;
+    border-radius: 2rem;
+    background: var(--playpilot-content);
+    box-shadow: 0 0 1rem 1rem var(--playpilot-dark);
+    transition: opacity 100ms;
+    font-family: inherit;
+    color: var(--playpilot-text-color-alt);
+    cursor: pointer;
+  }
+
+  .save:hover {
+    background: var(--playpilot-content-light);
+    color: var(--playpilot-text-color);
+  }
+
+  .save[disabled] {
+    opacity: 0.75;
+  }
+
+  .error {
+    margin-top: 0.5rem;
+  }
+
+  .panel {
+    z-index: 10;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 1.5rem;
+    background: var(--playpilot-dark);
+    overflow-y: auto;
+  }
+</style>