@playpilot/tpi 8.29.11 → 8.31.0

package/src/tests/routes/components/YouTubeEmbedBackground.test.js

@@ -5,9 +5,8 @@ import YouTubeEmbedBackground from '../../../routes/components/YouTubeEmbedBackg
 
 describe('YouTubeEmbedBackground.svelte', () => {
   it('Should render embed iframe with given video url', () => {
-    const { container } = render(YouTubeEmbedBackground, { embeddable_url: 'youtube.com/watch?v=abc' })
+    const { getByTestId } = render(YouTubeEmbedBackground, { embeddable_url: 'youtube.com/watch?v=abc' })
 
-    // @ts-ignore
-    expect(container.querySelector('iframe').src).toBe('https://video.playpilot.net/?video_id=abc&color=fa548a&muted=true&loop=true&captions=false&controls=&start_time=5&autoplay=true&playsinline=true')
+    expect(getByTestId('youtube.com/watch?v=abc')).toBeTruthy()
   })
 })

package/src/tests/routes/components/YouTubeEmbedOverlay.test.js

@@ -5,10 +5,9 @@ import YouTubeEmbedOverlay from '../../../routes/components/YouTubeEmbedOverlay.
 
 describe('YouTubeEmbedOverlay.svelte', () => {
   it('Should render embed iframe with given video url', () => {
-    const { container } = render(YouTubeEmbedOverlay, { embeddable_url: 'youtube.com/watch?v=abc', onclose: () => null })
+    const { getByTestId } = render(YouTubeEmbedOverlay, { embeddable_url: 'youtube.com/watch?v=abc', onclose: () => null })
 
-    // @ts-ignore
-    expect(container.querySelector('iframe').src).toBe('https://video.playpilot.net/?video_id=abc&color=fa548a&muted=false&loop=false&captions=false&controls=current-time,fullscreen,mute,play,progress&start_time=0&autoplay=true&playsinline=true')
+    expect(getByTestId('youtube.com/watch?v=abc')).toBeTruthy()
   })
 
   it('Should fire given onclose function on click of close button and backdrop', async () => {

package/src/routes/components/Editorial/Search/TitleSearch.svelte

@@ -1,96 +0,0 @@
-<script lang="ts">
-  import { searchTitles } from '$lib/api/search'
-  import type { TitleData } from '$lib/types/title'
-  import TextInput from '../TextInput.svelte'
-  import TitleSearchItem from './TitleSearchItem.svelte'
-
-  interface Props {
-    onselect?: (title: TitleData) => void
-    query: string
-  }
-
-  let { onselect = () => null, query = $bindable() }: Props = $props()
-
-  let results: TitleData[] = $state([])
-  let selectedResult: TitleData | null = $state(null)
-  let loading = $state(false)
-
-  $effect(() => {
-    if (query) search(query)
-  })
-
-  async function search(query: string): Promise<void> {
-    loading = true
-
-    try {
-      results = await searchTitles(query)
-    } finally {
-      loading = false
-    }
-  }
-
-  function select(title: TitleData): void {
-    query = title.title
-    selectedResult = title
-
-    onselect(title)
-  }
-</script>
-
-<div class="search">
-  <TextInput
-    bind:value={query}
-    oninput={() => selectedResult = null}
-    name="search"
-    label="Search..." />
-
-  {#if query && !selectedResult}
-    <div class="results" data-testid="search-results">
-      {#each results as title (title.sid)}
-        <TitleSearchItem {title} onclick={() => select(title)} />
-      {:else}
-        {#if !loading}
-          <em class="empty">No results found</em>
-        {/if}
-      {/each}
-    </div>
-  {/if}
-
-  {#if selectedResult}
-    <div class="selected">
-      <TitleSearchItem title={selectedResult} hoverable={false} />
-    </div>
-  {/if}
-</div>
-
-<style lang="scss">
-  .search {
-    position: relative;
-  }
-
-  .results {
-    z-index: 1;
-    position: absolute;
-    top: calc(100% + margin(0.5));
-    left: 0;
-    right: 0;
-    height: 30vh;
-    max-height: margin(10);
-    border-radius: margin(0.5);
-    background: theme(lighter);
-    scrollbar-width: thin;
-    overflow: auto;
-  }
-
-  .empty {
-    padding: margin(0.5);
-    font-size: margin(0.75);
-    color: theme(text-color-alt);
-  }
-
-  .selected {
-    margin: margin(0.5) 0;
-    border-radius: 0.5rem;
-    border: 2px solid theme(green);
-  }
-</style>