@playpilot/tpi 8.29.10 → 8.30.0

package/eslint.config.js

@@ -50,6 +50,7 @@ export default [
       'comma-dangle': ['error', 'always-multiline'],
       'no-trailing-spaces': ['error'],
       'indent': ['warn', 2],
+      'no-useless-escape': ['off'],
       'no-unused-vars': [
         'error',
         {

package/package.json

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

package/src/lib/afterArticle.ts

@@ -26,7 +26,7 @@ export function insertAfterArticlePlaylinks(elements: HTMLElement[], injections:
     target,
     props: {
       linkInjections: injections,
-      onclickmodal: (event, injection) => openModal({ event, injection, data: injection.title_details }),
+      onclickmodal: (event: MouseEvent, injection: LinkInjection) => openModal({ event, injection, data: injection.title_details }),
     },
   })
 }

package/src/lib/api/participants.ts

@@ -1,4 +1,3 @@
-import { participants } from '$lib/fakeData'
 import { getLanguage } from '$lib/language'
 import { getApiToken } from '$lib/token'
 import type { ParticipantData } from '$lib/types/participant'

package/src/lib/injection.ts

@@ -89,7 +89,7 @@ export function injectLinksInDocument(elements: HTMLElement[], injections: LinkI
           // This is a crude way of checking if a match contains HTML elements
           // If the title is directly inside of an element we discard the rest.
           // This happens sometimes in lists that consists of nothing but titles and may contain special characters
-          if (match.match.includes(">") && match.match.includes("<")) {
+          if (match.match.includes('>') && match.match.includes('<')) {
             const encodedTitle = encodeHtmlEntities(injection.title)
             const matchInsideHTMLIndex = match.match.search(new RegExp(`>\s*${encodedTitle}\s*<`)) + 1
 

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

@@ -12,6 +12,7 @@ declare global {
       mount(): void
       destroy(): void
     }
+    Plyr: any
   }
 }
 

package/src/routes/components/Debugger.svelte

@@ -138,12 +138,16 @@
 
         {#if value?.length}
           {#if Array.isArray(value)}
-            {#each value as { label, data }}
-              <div class="item">
-                <span class="label">{label}</span>:
-                <span class="data">{JSON.stringify(data)}</span>
-              </div>
-            {/each}
+            <table border="0" cellpadding="0">
+              <tbody>
+                {#each value as { label, data }}
+                  <tr>
+                    <td><span class="label">{label}</span></td>
+                    <td><span class="data">{JSON.stringify(data)}</span></td>
+                  </tr>
+                {/each}
+              </tbody>
+            </table>
           {/if}
         {:else}
           No data
@@ -293,12 +297,21 @@
     color: theme(primary);
   }
 
-  .item {
+  table {
+    display: block;
+    max-width: 100%;
+    max-height: 15lh;
     white-space: nowrap;
     overflow-x: auto;
     scrollbar-width: thin;
   }
 
+  tr {
+    &:hover {
+      background: rgba(255, 255, 255, 0.15);
+    }
+  }
+
   .form-group {
     display: flex;
     align-items: center;

package/src/routes/components/Explore/Routes/ExploreModal.svelte

@@ -1,107 +1,107 @@
-<script lang="ts">
-  import { fetchParticipantBySid } from '$lib/api/participants'
-  import { fetchSimilarTitles, fetchTitleBySid } from '$lib/api/titles'
-  import { mobileBreakpoint } from '$lib/constants'
-  import { SplitTest } from '$lib/enums/SplitTest'
-  import { t } from '$lib/localization'
-  import { openModal, type ModalType } from '$lib/modal'
-  import { getSplitTestVariantName, trackSplitTestView } from '$lib/splitTest'
-  import type { TitleData } from '$lib/types/title'
-  import Modal from '../../Modals/Modal.svelte'
-
-  interface Props {
-    navigate?: (key: string, pushState?: boolean) => void
-  }
-
-  const { navigate = () => null }: Props = $props()
-
-  async function openModalViaRoute(): Promise<void> {
-    const currentUrl = new URL(document.location.toString())
-    const sid = currentUrl.searchParams.get('sid')
-
-    if (!sid) return
-
-    let type: ModalType = sid.startsWith('pr') ? 'participant' : 'title' // Sids with with `pr` for participants, `ti` for titles
-    let data: any = null
-
-    if (type === 'title') {
-      const isMobile = window.innerWidth < mobileBreakpoint
-      const isInReelSplitTest = isMobile && getSplitTestVariantName(SplitTest.Reels) === 'Reel'
-
-      if (isMobile) trackSplitTestView(SplitTest.Reels)
-
-      type = isMobile && isInReelSplitTest ? 'titles-reel' : 'titles-rail'
-
-      const [title, railTitles] = (await Promise.allSettled([fetchTitleBySid(sid), fetchSimilarTitles({ sid } as unknown as TitleData)])).map((promise) =>
-        promise.status === 'fulfilled' ? promise.value : null,
-      )
-      data = [title as TitleData, ...(railTitles as TitleData[])]
-    } else if (type === 'participant') {
-      data = await fetchParticipantBySid(sid)
-    }
-
-    openModal({
-      type,
-      data,
-      props: {
-        onclose: () => navigate('home'),
-        pushState: false,
-      },
-    })
-  }
-</script>
-
-{#await openModalViaRoute()}
-  <Modal blur pushState={false}>
-    {#snippet dialog()}
-      <div class="loading">
-        <div class="bar"></div>
-        <div class="bar"></div>
-        <div class="bar"></div>
-      </div>
-    {/snippet}
-  </Modal>
-{:catch}
-  <Modal blur onclose={() => navigate('home')} pushState={false}>
-    <div class="error">
-      {t('An Error Occurred')}
-    </div>
-  </Modal>
-{/await}
-
-<style lang="scss">
-  .loading {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    gap: margin(0.5);
-  }
-
-  @keyframes animate-bar {
-    to {
-      height: margin(3);
-      opacity: 0.5;
-    }
-  }
-
-  .bar {
-    height: margin(4);
-    width: margin(1);
-    border-radius: margin(0.25);
-    background: white;
-    animation: animate-bar 750ms infinite;
-
-    @for $i from 0 through 2 {
-      &:nth-child(#{$i}) {
-        animation-delay: $i * 250ms;
-      }
-    }
-  }
-
-  .error {
-    padding: margin(2);
-    font-size: 1.25em;
-    color: theme(text-color);
-  }
-</style>
+<script lang="ts">
+  import { fetchParticipantBySid } from '$lib/api/participants'
+  import { fetchSimilarTitles, fetchTitleBySid } from '$lib/api/titles'
+  import { mobileBreakpoint } from '$lib/constants'
+  import { SplitTest } from '$lib/enums/SplitTest'
+  import { t } from '$lib/localization'
+  import { openModal, type ModalType } from '$lib/modal'
+  import { getSplitTestVariantName, trackSplitTestView } from '$lib/splitTest'
+  import type { TitleData } from '$lib/types/title'
+  import Modal from '../../Modals/Modal.svelte'
+
+  interface Props {
+    navigate?: (key: string, pushState?: boolean) => void
+  }
+
+  const { navigate = () => null }: Props = $props()
+
+  async function openModalViaRoute(): Promise<void> {
+    const currentUrl = new URL(document.location.toString())
+    const sid = currentUrl.searchParams.get('sid')
+
+    if (!sid) return
+
+    let type: ModalType = sid.startsWith('pr') ? 'participant' : 'title' // Sids with with `pr` for participants, `ti` for titles
+    let data: any = null
+
+    if (type === 'title') {
+      const isMobile = window.innerWidth < mobileBreakpoint
+      const isInReelSplitTest = isMobile && getSplitTestVariantName(SplitTest.Reels) === 'Reel'
+
+      if (isMobile) trackSplitTestView(SplitTest.Reels)
+
+      type = isMobile && isInReelSplitTest ? 'titles-reel' : 'titles-rail'
+
+      const [title, railTitles] = (await Promise.allSettled([fetchTitleBySid(sid), fetchSimilarTitles({ sid } as unknown as TitleData)])).map((promise) =>
+        promise.status === 'fulfilled' ? promise.value : null,
+      )
+      data = [title as TitleData, ...(railTitles as TitleData[])]
+    } else if (type === 'participant') {
+      data = await fetchParticipantBySid(sid)
+    }
+
+    openModal({
+      type,
+      data,
+      props: {
+        onclose: () => navigate('home'),
+        pushState: false,
+      },
+    })
+  }
+</script>
+
+{#await openModalViaRoute()}
+  <Modal blur pushState={false}>
+    {#snippet dialog()}
+      <div class="loading">
+        <div class="bar"></div>
+        <div class="bar"></div>
+        <div class="bar"></div>
+      </div>
+    {/snippet}
+  </Modal>
+{:catch}
+  <Modal blur onclose={() => navigate('home')} pushState={false}>
+    <div class="error">
+      {t('An Error Occurred')}
+    </div>
+  </Modal>
+{/await}
+
+<style lang="scss">
+  .loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    gap: margin(0.5);
+  }
+
+  @keyframes animate-bar {
+    to {
+      height: margin(3);
+      opacity: 0.5;
+    }
+  }
+
+  .bar {
+    height: margin(4);
+    width: margin(1);
+    border-radius: margin(0.25);
+    background: white;
+    animation: animate-bar 750ms infinite;
+
+    @for $i from 0 through 2 {
+      &:nth-child(#{$i}) {
+        animation-delay: $i * 250ms;
+      }
+    }
+  }
+
+  .error {
+    padding: margin(2);
+    font-size: 1.25em;
+    color: theme(text-color);
+  }
+</style>

package/src/routes/components/Modals/TitlesReelModal.svelte

@@ -22,7 +22,7 @@
     onclose?: () => void
   }
 
-  const { titles, onclose = () => null }: Props = $props()
+  const { titles, onclose = () => null, ...restProps }: Props = $props()
 
 
   let interval: ReturnType<typeof setInterval> | null = null
@@ -74,7 +74,7 @@
 {/snippet}
 
 <div class="reel" style:--available-height="{availableHeight}px">
-  <Modal {prepend}>
+  <Modal {prepend} {onclose} {...restProps}>
     {#snippet dialog()}
       <div class="slider" bind:this={element}>
         <TinySlider vertical threshold={50} moveThreshold={10} {onchange}>
@@ -142,7 +142,7 @@
       overscroll-behavior: contain;
     }
 
-    :global(iframe) {
+    :global(.plyr) {
       pointer-events: none;
       z-index: 0;
     }

package/src/routes/components/Rails/TitlesRail.svelte

@@ -309,7 +309,7 @@
     background: black;
     z-index: 1;
 
-    :global(iframe) {
+    :global(.plyr) {
       opacity: 0;
       animation: fade-iframe 500ms 500ms forwards;
 

package/src/routes/components/YouTubeEmbed.svelte

@@ -14,14 +14,14 @@
     fallbackStartTime?: number
   }
 
-  const { embeddable_url = '', controls = [], muted = false, loop = false, captions = false, autoplay = true, showMuteControls = false, fallbackStartTime = 0 }: Props = $props()
+  let { embeddable_url = '', controls = [], muted = false, loop = false, captions = false, autoplay = true, showMuteControls = false, fallbackStartTime = 0 }: Props = $props()
 
   const videoId = $derived(getVideoId(embeddable_url))
   const startTime = $derived((window?.PlayPilotLinkInjections?.video_playtimes?.[videoId || ''] || (fallbackStartTime + 1)) - 1)
   const color = window?.getComputedStyle(document.body).getPropertyValue('--playpilot-primary')?.replace('#', '') || 'fa548a'
 
-  let iframe: HTMLIFrameElement | null = $state(null)
-  let isMuted = $state(muted)
+  let element: HTMLElement | null = $state(null)
+  let player: any
 
   onMount(() => {
     if (!videoId) return
@@ -37,37 +37,74 @@
     return () => clearInterval(interval)
   })
 
-  export function toggleMute(state = !isMuted): void {
-    if (isMuted != state) iframe?.contentWindow?.postMessage('mute', '*')
-    isMuted = state
+  function initialize(): void {
+    if (typeof window.Plyr === 'undefined') return
+    if (!element) return
+
+    element.dataset.plyrEmbedId = videoId!
+    element.style.setProperty('--plyr-color-main', '#' + color)
+
+    player = new window.Plyr(element, {
+      controls,
+      playsinline: true,
+      autoplay,
+      muted,
+      clickToPlay: false,
+      youtube: {
+        noCookie: true,
+        cc_load_policy: captions ? 1 : 0,
+        cc_lang_pref: 'auto',
+      },
+    })
+
+    player.on('ready', () => {
+      player.currentTime = startTime
+      toggleMute(muted)
+    })
+
+    if (!loop) return
+
+    player.on('statechange', (event: { detail: { code: number } }) => {
+      if (event.detail.code !== 0) return
+
+      requestAnimationFrame(() => {
+        player.play()
+        toggleMute(muted)
+      })
+    })
+  }
+
+  export function toggleMute(state = !muted): void {
+    player.muted = state
+    player.volume = muted ? 0 : 1
+
+    muted = state
   }
 
   export function play(event: CustomEvent): void {
-    if (event.detail === embeddable_url) iframe?.contentWindow?.postMessage('play', '*')
+    if (event.detail === embeddable_url) player?.play()
   }
 
   export function pause(event: CustomEvent): void {
-    if (event.detail === embeddable_url) iframe?.contentWindow?.postMessage('pause', '*')
+    if (event.detail === embeddable_url) player?.pause()
   }
 </script>
 
 <svelte:window onplayembed={play} onpauseembed={pause} />
 
+<svelte:head>
+  {#if videoId}
+    <script src="https://unpkg.com/plyr@3" onload={initialize}></script>
+    <link rel="stylesheet" href="https://unpkg.com/plyr@3/dist/plyr.css" />
+  {/if}
+</svelte:head>
+
 {#if videoId}
-  <iframe
-    bind:this={iframe}
-    width="600"
-    height="338"
-    src="https://video.playpilot.net/?video_id={videoId}&color={color}&muted={muted}&loop={loop}&captions={captions}&controls={controls.join(',')}&start_time={startTime}&autoplay={autoplay}&playsinline=true"
-    title="YouTube video player"
-    frameborder="0"
-    referrerpolicy="strict-origin-when-cross-origin"
-    allowfullscreen>
-  </iframe>
+  <div bind:this={element} class="player" data-plyr-provider="youtube" data-plyr-embed-id data-testid={embeddable_url}></div>
 
   {#if showMuteControls}
     <button class="mute" onclick={() => toggleMute()} aria-label="Mute">
-      <IconMute muted={isMuted} />
+      <IconMute {muted} />
     </button>
   {/if}
 {:else}
@@ -75,7 +112,11 @@
 {/if}
 
 <style lang="scss">
-  iframe {
+  .player {
+    --plyr-control-icon-size: 24px;
+    --plyr-video-controls-background: linear-gradient(rgba(0, 0, 0, 0), black);
+    --plyr-font-size-time: 16px;
+    --plyr-font-family: 'Consolas', monospace;
     z-index: -1;
     position: relative;
     width: 100%;

package/src/routes/components/YouTubeEmbedBackground.svelte

@@ -22,6 +22,7 @@
   .video-background {
     background: black;
 
+    :global(.plyr),
     :global(iframe) {
       position: absolute;
       height: var(--height);

package/src/routes/components/YouTubeEmbedOverlay.svelte

@@ -37,7 +37,7 @@
     left: 0;
     background: theme(detail-backdrop, rgba(0, 0, 0, 0.95));
 
-    :global(iframe) {
+    :global(.plyr) {
       z-index: 1;
       position: relative;
       display: block;

package/src/routes/elements/+page.svelte

@@ -22,6 +22,7 @@
   import TitlesRail from '../components/Rails/TitlesRail.svelte'
   import ParticipantsRail from '../components/Rails/ParticipantsRail.svelte'
   import InfiniteTitlesRail from '../components/Rails/InfiniteTitlesRail.svelte'
+  import YouTubeEmbed from '../components/YouTubeEmbed.svelte'
 
   if (browser) {
     // @ts-ignore
@@ -43,6 +44,12 @@
 
 <p>This page lays out various elements used in TPI. It does not currently include editor elements.</p>
 
+<h2>Youtube Embed</h2>
+
+<div class="video">
+  <YouTubeEmbed embeddable_url="https://www.youtube.com/watch?v=bBMajXwi6Cs" controls={['progress', 'play']} loop showMuteControls muted />
+</div>
+
 <h2>Title</h2>
 
 <div class="group">
@@ -267,4 +274,9 @@
     padding: margin(2);
     margin-bottom: margin(1);
   }
+
+  .video {
+    position: relative;
+    max-width: 400px;
+  }
 </style>

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

@@ -469,10 +469,10 @@ describe('injection.ts', () => {
     })
 
     it('Should return sentence message if text was found in full body text but not in individual elements', () => {
-      document.body.innerHTML = `<article><p>Some sentence</p><p>that is broken in two</p></main>`
+      document.body.innerHTML = '<article><p>Some sentence</p><p>that is broken in two</p></main>'
 
       const elements = Array.from(document.body.querySelectorAll('p'))
-      const linkInjections = [generateInjection('Some sentence that is broken in two', 'broken'),]
+      const linkInjections = [generateInjection('Some sentence that is broken in two', 'broken')]
 
       const results = injectLinksInDocument(elements, { aiInjections: linkInjections, manualInjections: [] })