@playpilot/tpi 5.34.1 → 6.0.0-beta.explore.15

package/src/routes/components/Explore/Filter/FilterSorting.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import Button from '../../Button.svelte'
+  import IconArrow from '../../Icons/IconArrow.svelte'
+  import type { ExploreFilter } from '$lib/types/filter'
+  import Dropdown from './Dropdown.svelte'
+
+  interface Props {
+    filter: ExploreFilter
+  }
+
+  const { filter }: Props = $props()
+
+  const param = 'ordering'
+
+  const options = [
+    { label: 'Popularity', value: 'popular' },
+    { label: 'New', value: 'new' },
+    { label: 'Top Rated', value: 'top-rated' },
+  ]
+
+  const label = $derived(options.find(({ value }) => value === filter[param])?.label || 'Sort by')
+
+  function setFilter(value: string): void {
+    if (value) filter[param] = value
+    else delete filter[param]
+  }
+</script>
+
+<Dropdown>
+  {#snippet button({ toggle })}
+    <Button variant="link" onclick={toggle}>
+      {label}
+      <IconArrow direction="down" />
+    </Button>
+  {/snippet}
+
+  {#snippet content()}
+    <div class="content" data-testid="content">
+      {#each options as { label, value }}
+        {@const active = value === filter[param]}
+        <button class="option" class:active onclick={() => setFilter(value)}>{label}</button>
+      {/each}
+    </div>
+  {/snippet}
+</Dropdown>
+
+<style lang="scss">
+  .content {
+    width: margin(7);
+  }
+
+  .option {
+    appearance: none;
+    padding: margin(0.75) margin(1);
+    width: 100%;
+    border: 0;
+    background: transparent;
+    text-align: left;
+    font-family: inherit;
+    font-size: inherit;
+    color: theme(text-color-alt);
+    cursor: pointer;
+
+    &:hover,
+    &.active {
+      color: theme(text-color);
+      background: theme(content-light);
+    }
+  }
+</style>

package/src/routes/components/Explore/Filter/Search.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import IconSearch from '../../Icons/IconSearch.svelte'
+
+  interface Props {
+    // eslint-disable-next-line no-unused-vars
+    oninput: (query: string) => void
+  }
+
+  const { oninput }: Props = $props()
+
+  let query = $state('')
+</script>
+
+<div class="search" role="search">
+  <div class="icon">
+    <IconSearch />
+  </div>
+
+  <input bind:value={query} oninput={() => oninput(query)} class="input" type="search" placeholder="Search movies and shows" />
+</div>
+
+<style lang="scss">
+  .search {
+    position: relative;
+  }
+
+  .icon {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    height: 100%;
+    left: margin(1);
+    color: theme(text-color-alt);
+    opacity: 0.75;
+  }
+
+  .input {
+    width: 100%;
+    max-width: theme(explore-header-max-width, 600px);
+    padding: margin(0.75) margin(1) margin(0.75) margin(3);
+    border: 0;
+    border-radius: theme(border-radius);
+    background: theme(content);
+    color: theme(text-color-alt);
+    font-size: theme(font-size-base);
+    font-family: theme(font-family);
+
+    &:focus {
+      outline: 1px solid white;
+    }
+
+    &::placeholder {
+      color: theme(text-color-alt);
+      opacity: 0.75;
+    }
+  }
+</style>

package/src/routes/components/Explore/Filter/TogglesWithSearch.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+  import { flip } from 'svelte/animate'
+  import { scale } from 'svelte/transition'
+
+  interface Option {
+    label: string
+    value: string
+  }
+
+  interface Props {
+    options?: Option[]
+    selected?: string[]
+    placeholder?: string
+    // eslint-disable-next-line no-unused-vars
+    onchange?: (selected: string[]) => void
+  }
+
+  let {
+    options = [{ label: 'Label', value: 'Value' }],
+    selected = [],
+    placeholder = 'Search...',
+    onchange = () => null,
+  }: Props = $props()
+
+  let query = $state('')
+
+  const shownOptions = $derived(search())
+
+  function search(): Option[] {
+    if (!options?.length) return []
+    if (!query) return options
+
+    return options.filter(({ label }) => label.toLowerCase().indexOf(query.toLowerCase()) !== -1)
+  }
+
+  function toggleItem(value: string): void {
+    const active = selected.find(o => o === value)
+
+    if (active) selected = selected.filter(o => o !== value)
+    else selected = [...selected, value]
+
+    onchange(selected)
+  }
+</script>
+
+<div class="header">
+  <input type="text" class="input" aria-label="Search" {placeholder} bind:value={query} />
+</div>
+
+<div class="options" data-testid="toggles-with-search">
+  {#each shownOptions || [] as { label, value } (value)}
+    {@const active = !!selected.find(o => o === value)}
+
+    <div animate:flip={{ duration: 150 }}>
+      <button class="option" class:active onclick={() => toggleItem(value)}>
+        {label}
+
+        <div class="action">
+          {#key active}
+            <div class="icon" transition:scale={{ start: 0.25, duration: 100 }}>
+              {active ? '-' : '+'}
+            </div>
+          {/key}
+        </div>
+      </button>
+    </div>
+  {/each}
+</div>
+
+<style lang="scss">
+  .header {
+    padding: margin(0.75);
+  }
+
+  .input {
+    width: 100%;
+    padding: margin(0.75) margin(1) margin(0.75);
+    border: 0;
+    border-radius: theme(border-radius);
+    background: theme(content-light);
+    color: theme(text-color-alt);
+    font-size: theme(font-size-base);
+    font-family: theme(font-family);
+
+    &:focus {
+      outline: 1px solid white;
+    }
+
+    &::placeholder {
+      color: theme(text-color-alt);
+      opacity: 0.75;
+    }
+  }
+
+  .option {
+    appearance: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: margin(0.75) margin(0.75);
+    border: 0;
+    border-top: 1px solid theme(content-light);
+    background: theme(content);
+    color: theme(text-color-alt);
+    font-family: inherit;
+    text-align: left;
+    cursor: pointer;
+
+    &:hover,
+    &.active {
+      color: theme(text-color);
+      filter: brightness(theme(hover-filter-brightness));
+    }
+  }
+
+  .action {
+    flex: 0 0 1lh;
+    position: relative;
+    width: 1lh;
+    height: 1lh;
+    font-size: 1.25em;
+  }
+
+  .icon {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid theme(content-light);
+    border-radius: 50%;
+
+    .active & {
+      color: theme(green);
+      border-color: theme(green);
+    }
+  }
+</style>

package/src/routes/components/GridTitle.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+  import type { TitleData } from '$lib/types/title'
+  import IconIMDb from './Icons/IconIMDb.svelte'
+  import PlaylinksCompact from './Playlinks/PlaylinksCompact.svelte'
+  import TitlePoster from './TitlePoster.svelte'
+
+  interface Props {
+    title: TitleData
+    // eslint-disable-next-line no-unused-vars
+    onclick?: (event: MouseEvent) => void
+  }
+
+  const { title, onclick = () => null }: Props = $props()
+</script>
+
+<button class="title" {onclick} data-testid="title">
+  <div class="poster">
+    <TitlePoster {title} width={120} height={213} lazy />
+
+    <div class="meta">
+      <div class="imdb">
+        <IconIMDb size={12} />
+        {title.imdb_score || '-'}
+      </div>
+
+      {#if title.type === 'series'}
+        <div>Series</div>
+      {/if}
+
+      {#if title.length}
+        <div>{title.length} min</div>
+      {/if}
+    </div>
+  </div>
+
+  <div class="content">
+    <div class="heading">{title.title}</div>
+
+    <PlaylinksCompact playlinks={title.providers} size={20} />
+  </div>
+</button>
+
+<style lang="scss">
+  .title {
+    position: relative;
+    appearance: none;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background: transparent;
+    padding: 0;
+    border: 0;
+    border-radius: theme(grid-item-border-radius, border-radius);
+    transition: transform 100ms;
+    text-decoration: none;
+    font-style: normal !important;
+    font-family: theme(font-family);
+    cursor: pointer;
+
+    &:hover {
+      filter: brightness(theme(grid-item-hover-filter-brightness, hover-filter-brightness));
+      background: theme(grid-item-hover-background, lighter);
+      box-shadow: theme(grid-item-hover-shadow, 0 0 0 #{margin(0.5)} theme(lighter));
+      transform: scale(1.025);
+      z-index: 1;
+    }
+  }
+
+  .poster {
+    position: relative;
+    width: 100%;
+    height: auto;
+    aspect-ratio: 2/3;
+    border-radius: theme(detail-image-border-radius, border-radius);
+    background: theme(detail-image-background, content);
+    overflow: hidden;
+  }
+
+  .content {
+    padding-top: margin(0.5);
+  }
+
+  .heading {
+    margin-bottom: margin(0.5);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: inherit;
+    text-align: left;
+    font-size: theme(detail-font-size, font-size-base);
+    line-height: normal;
+    color: theme(grid-item-title-text-color, text-color-alt);
+    font-weight: theme(grid-item-title-font-weight, font-bold);
+
+    .title:hover & {
+      color: theme(grid-item-title-hover-text-color, text-color);
+    }
+  }
+
+  .meta {
+    display: flex;
+    justify-content: space-between;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding: margin(0.5) margin(0.5) margin(1);
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent);
+    color: white;
+    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.25);
+
+    :global(svg) {
+      filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
+    }
+  }
+
+  .imdb {
+    display: flex;
+    align-items: center;
+    gap: margin(0.25);
+  }
+</style>

package/src/routes/components/GridTitleSkeleton.svelte

@@ -0,0 +1,36 @@
+<div class="skeleton" data-testid="skeleton">
+  <div class="poster"></div>
+
+  <div class="lines">
+    <div class="line" style:width="60%"></div>
+  </div>
+</div>
+
+<style lang="scss">
+  .skeleton {
+    width: 100%;
+  }
+
+  .poster {
+    flex: 0 0 auto;
+    height: auto;
+    width: 100%;
+    aspect-ratio: 2/3;
+    border-radius: theme(detail-image-border-radius, border-radius);
+    background: theme(content);
+  }
+
+  .lines {
+    display: flex;
+    flex-direction: column;
+    margin-top: margin(0.5);
+    gap: margin(0.5);
+    width: 100%;
+  }
+
+  .line {
+    height: theme(font-size-base);
+    background: theme(content);
+    border-radius: 5rem;
+  }
+</style>

package/src/routes/components/Icons/IconArrow.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
   interface Props {
-    direction?: 'left' | 'right'
+    direction?: 'left' | 'right' | 'down' | 'up'
     title?: string
   }
 
   const { direction = 'right', title = '' }: Props = $props()
 </script>
 
-<svg class="{direction}" height="16px" viewBox="0 -960 960 960" width="16px">
+<svg class="{direction}" width="16px" height="16px" viewBox="0 -960 960 960">
   {#if title}
     <title>{title}</title>
   {/if}
@@ -16,10 +16,18 @@
 </svg>
 
 <style lang="scss">
+  .up {
+    transform: rotate(270deg);
+  }
+
   .right {
     margin-left: margin(0.125);
   }
 
+  .down {
+    transform: rotate(90deg);
+  }
+
   .left {
     margin-right: margin(0.125);
     transform: rotate(180deg);

package/src/routes/components/Icons/IconClose.svelte

@@ -1,3 +1,11 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+<script lang="ts">
+  interface Props {
+    size?: number
+  }
+
+  const { size = 16 }: Props = $props()
+</script>
+
+<svg width={size} height={size} viewBox="0 0 16 16" fill="none">
   <path d="M14 2L2 14M2 2L14 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/routes/components/Icons/IconFilter.svelte

@@ -0,0 +1,5 @@
+<svg width="11" height="13" viewBox="0 0 11 13">
+  <path d="M9.77037 6.86774C9.68778 7.21645 9.48992 7.52709 9.20883 7.74937C8.92774 7.97166 8.57987 8.09259 8.22151 8.09259C7.86315 8.09259 7.51528 7.97166 7.23419 7.74937C6.9531 7.52709 6.75525 7.21645 6.67265 6.86774L0.385491 6.86774C0.335766 6.87014 0.286069 6.86243 0.239415 6.84505C0.192761 6.82768 0.150121 6.80101 0.114079 6.76667C0.0780373 6.73233 0.0493441 6.69103 0.0297394 6.64527C0.0101337 6.5995 2.67029e-05 6.55024 2.67029e-05 6.50045C2.67029e-05 6.45067 0.0101337 6.40141 0.0297394 6.35565C0.0493441 6.30989 0.0780373 6.26858 0.114079 6.23424C0.150121 6.1999 0.192761 6.17323 0.239415 6.15586C0.286069 6.13849 0.335766 6.13077 0.385491 6.13317L6.67265 6.13317C6.75525 5.78446 6.9531 5.47382 7.23419 5.25154C7.51528 5.02925 7.86315 4.90833 8.22151 4.90833C8.57987 4.90833 8.92774 5.02925 9.20883 5.25154C9.48992 5.47382 9.68778 5.78446 9.77037 6.13317H10.1801C10.2298 6.13077 10.2795 6.13849 10.3262 6.15586C10.3728 6.17323 10.4155 6.1999 10.4515 6.23424C10.4875 6.26858 10.5162 6.30989 10.5358 6.35565C10.5554 6.40141 10.5656 6.45067 10.5656 6.50045C10.5656 6.55024 10.5554 6.5995 10.5358 6.64527C10.5162 6.69103 10.4875 6.73233 10.4515 6.76667C10.4155 6.80101 10.3728 6.82768 10.3262 6.84505C10.2795 6.86243 10.2298 6.87014 10.1801 6.86774H9.77037ZM8.22151 5.64374C8.05198 5.64374 7.88626 5.69401 7.74531 5.7882C7.60435 5.88238 7.49449 6.01625 7.42961 6.17287C7.36474 6.32949 7.34776 6.50183 7.38084 6.6681C7.41391 6.83437 7.49554 6.9871 7.61542 7.10698C7.73529 7.22685 7.88802 7.30849 8.05429 7.34156C8.22056 7.37463 8.3929 7.35766 8.54953 7.29278C8.70615 7.22791 8.84002 7.11805 8.9342 6.97709C9.02839 6.83613 9.07866 6.67041 9.07866 6.50089C9.07877 6.38825 9.05668 6.2767 9.01366 6.17261C8.97063 6.06851 8.90751 5.97392 8.82791 5.89424C8.7483 5.81455 8.65377 5.75134 8.54973 5.70821C8.44568 5.66508 8.33415 5.64288 8.22151 5.64288V5.64374Z" fill="currentColor"/>
+  <path d="M3.8929 2.45945C3.8103 2.80816 3.61245 3.11879 3.33136 3.34108C3.05027 3.56336 2.7024 3.68429 2.34404 3.68429C1.98568 3.68429 1.63781 3.56336 1.35672 3.34108C1.07563 3.11879 0.87778 2.80816 0.795181 2.45945H0.385466C0.291124 2.45489 0.202153 2.4142 0.136997 2.34582C0.0718422 2.27744 0.0354977 2.18661 0.0354977 2.09216C0.0354977 1.99771 0.0718422 1.90688 0.136997 1.8385C0.202153 1.77012 0.291124 1.72943 0.385466 1.72488H0.795181C0.87778 1.37617 1.07563 1.06553 1.35672 0.843245C1.63781 0.620959 1.98568 0.500031 2.34404 0.500031C2.7024 0.500031 3.05027 0.620959 3.33136 0.843245C3.61245 1.06553 3.8103 1.37617 3.8929 1.72488L10.1801 1.72488C10.2744 1.72943 10.3634 1.77012 10.4285 1.8385C10.4937 1.90688 10.53 1.99771 10.53 2.09216C10.53 2.18661 10.4937 2.27744 10.4285 2.34582C10.3634 2.4142 10.2744 2.45489 10.1801 2.45945L3.8929 2.45945ZM2.34404 1.23544C2.17451 1.23544 2.00879 1.28572 1.86784 1.3799C1.72688 1.47408 1.61702 1.60795 1.55214 1.76458C1.48727 1.9212 1.47029 2.09354 1.50337 2.25981C1.53644 2.42608 1.61807 2.57881 1.73795 2.69868C1.85782 2.81856 2.01055 2.90019 2.17682 2.93327C2.34309 2.96634 2.51543 2.94936 2.67206 2.88449C2.82868 2.81961 2.96255 2.70975 3.05673 2.56879C3.15092 2.42784 3.20119 2.26212 3.20119 2.09259C3.2013 1.97996 3.17921 1.8684 3.13619 1.76431C3.09316 1.66022 3.03004 1.56563 2.95044 1.48594C2.87083 1.40626 2.77631 1.34304 2.67226 1.29992C2.56821 1.25679 2.45668 1.23459 2.34404 1.23459V1.23544Z" fill="currentColor"/>
+  <path d="M6.0975 11.2752C6.01491 11.6239 5.81705 11.9345 5.53596 12.1568C5.25488 12.3791 4.907 12.5 4.54864 12.5C4.19028 12.5 3.84241 12.3791 3.56132 12.1568C3.28024 11.9345 3.08238 11.6239 2.99978 11.2752H0.385491C0.335766 11.2776 0.286069 11.2699 0.239415 11.2525C0.192761 11.2351 0.150121 11.2085 0.114079 11.1741C0.0780373 11.1398 0.0493441 11.0985 0.0297394 11.0527C0.0101337 11.0069 2.67029e-05 10.9577 2.67029e-05 10.9079C2.67029e-05 10.8581 0.0101337 10.8088 0.0297394 10.7631C0.0493441 10.7173 0.0780373 10.676 0.114079 10.6417C0.150121 10.6073 0.192761 10.5807 0.239415 10.5633C0.286069 10.5459 0.335766 10.5382 0.385491 10.5406H2.99978C3.08238 10.1919 3.28024 9.88126 3.56132 9.65898C3.84241 9.43669 4.19028 9.31577 4.54864 9.31577C4.907 9.31577 5.25488 9.43669 5.53596 9.65898C5.81705 9.88126 6.01491 10.1919 6.0975 10.5406H10.1801C10.2298 10.5382 10.2795 10.5459 10.3262 10.5633C10.3728 10.5807 10.4155 10.6073 10.4515 10.6417C10.4875 10.676 10.5162 10.7173 10.5358 10.7631C10.5554 10.8088 10.5656 10.8581 10.5656 10.9079C10.5656 10.9577 10.5554 11.0069 10.5358 11.0527C10.5162 11.0985 10.4875 11.1398 10.4515 11.1741C10.4155 11.2085 10.3728 11.2351 10.3262 11.2525C10.2795 11.2699 10.2298 11.2776 10.1801 11.2752H6.0975ZM4.54779 10.0503C4.37826 10.0503 4.21254 10.1006 4.07158 10.1948C3.93063 10.289 3.82077 10.4228 3.75589 10.5795C3.69101 10.7361 3.67404 10.9084 3.70711 11.0747C3.74018 11.241 3.82182 11.3937 3.94169 11.5136C4.06157 11.6334 4.2143 11.7151 4.38057 11.7481C4.54684 11.7812 4.71918 11.7642 4.8758 11.6994C5.03242 11.6345 5.16629 11.5246 5.26048 11.3837C5.35466 11.2427 5.40493 11.077 5.40493 10.9075C5.40493 10.6801 5.31463 10.4621 5.15388 10.3014C4.99313 10.1406 4.77512 10.0503 4.54779 10.0503Z" fill="currentColor"/>
+</svg>

package/src/routes/components/Icons/IconPlay.svelte

@@ -0,0 +1,3 @@
+<svg width="24px" height="24px" viewBox="0 -960 960 960">
+  <path fill="currentColor" d="m380-300 280-180-280-180v360ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
+</svg>

package/src/routes/components/Icons/IconSearch.svelte

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 19 19">
+  <path fill="currentColor" d="M16.593,2.407a8.155,8.155,0,0,0-11.569,0A8.166,8.166,0,0,0,4.18,12.983L.38,16.8a1.3,1.3,0,0,0,0,1.837A1.372,1.372,0,0,0,1.288,19a1.3,1.3,0,0,0,.908-.38L6.017,14.8A8.172,8.172,0,0,0,16.593,2.407ZM15.327,12.688A6.4,6.4,0,1,1,17.184,8.17,6.324,6.324,0,0,1,15.327,12.688Z" />
+</svg>

package/src/routes/components/ListTitle.svelte

@@ -1,14 +1,8 @@
 <script lang="ts">
-  import { titleUrl } from '$lib/routes'
-  import { SplitTest } from '$lib/enums/SplitTest'
-  import { t } from '$lib/localization'
-  import { mergePlaylinks } from '$lib/playlink'
-  import { isInSplitTestVariant, trackSplitTestAction } from '$lib/splitTest'
   import type { TitleData } from '$lib/types/title'
+  import PlaylinksCompact from './Playlinks/PlaylinksCompact.svelte'
   import IconArrow from './Icons/IconArrow.svelte'
   import IconIMDb from './Icons/IconIMDb.svelte'
-  import PlaylinkIcon from './Playlinks/PlaylinkIcon.svelte'
-  import PlaylinkLabel from './Playlinks/PlaylinkLabel.svelte'
   import TitlePoster from './TitlePoster.svelte'
 
   interface Props {
@@ -18,18 +12,9 @@
   }
 
   const { title, onclick = () => null }: Props = $props()
-
-  const playlinks = $derived(mergePlaylinks(title.providers))
-  const limitedPlaylinks = $derived(playlinks.slice(0, 3))
-  const playlinksAsLabels = isInSplitTestVariant(SplitTest.ParticipantPlaylinkFormat, 1)
-
-  function onPlaylinkClick(event: MouseEvent) {
-    event.stopPropagation()
-    trackSplitTestAction(SplitTest.ParticipantPlaylinkFormat, 'click')
-  }
 </script>
 
-<a class="title" href={titleUrl(title)} {onclick} data-testid="title">
+<button class="title" {onclick} data-testid="title">
   <div class="poster">
     <TitlePoster {title} width={30} height={43} lazy />
   </div>
@@ -40,7 +25,7 @@
     <div class="meta">
       <div class="imdb">
         <IconIMDb size={11} />
-        {title.imdb_score}
+        {title.imdb_score || '-'}
       </div>
 
       <div>{title.year}</div>
@@ -55,33 +40,13 @@
       {title.description}
     </div>
 
-    <div class="playlinks">
-      {#each limitedPlaylinks as playlink}
-        {#if playlinksAsLabels}
-          <PlaylinkLabel {playlink} onclick={onPlaylinkClick} />
-        {:else}
-          <PlaylinkIcon {playlink} onclick={onPlaylinkClick} />
-        {/if}
-      {/each}
-
-      {#if playlinks.length > limitedPlaylinks.length}
-        <span class="more">
-          +{playlinks.length - limitedPlaylinks.length}
-        </span>
-      {/if}
-
-      {#if !playlinks.length}
-        <div class="empty" data-testid="playlinks-empty">
-          {t('Title Unavailable')}
-        </div>
-      {/if}
-    </div>
+    <PlaylinksCompact playlinks={title.providers} />
   </div>
 
   <div class="action">
     <IconArrow />
   </div>
-</a>
+</button>
 
 <style lang="scss">
   .title {
@@ -90,18 +55,18 @@
     align-items: center;
     width: 100%;
     background: theme(list-item-background, lighter);
-    padding: margin(0.5);
+    padding: theme(list-item-padding, margin(0.5));
     border: 0;
     border-radius: theme(list-item-border-radius, border-radius);
     text-decoration: none;
     font-style: normal !important;
+    font-family: theme(font-family);
+    cursor: pointer;
 
     &:hover {
       filter: brightness(theme(list-item-hover-filter-brightness, hover-filter-brightness));
-    }
-
-    &:last-child {
-      border-bottom: 0;
+      background: theme(list-item-hover-background, lighter);
+      box-shadow: theme(list-item-hover-shadow, none);
     }
   }
 
@@ -166,29 +131,6 @@
     color: theme(list-item-description-text-color, text-color);
   }
 
-  .playlinks {
-    display: flex;
-    flex-wrap: wrap;
-    gap: margin(0.25);
-    margin-top: auto;
-  }
-
-  .more {
-    display: flex;
-    align-items: center;
-    padding: 0 margin(0.25);
-    color: theme(list-item-more-text-color, text-color-alt);
-    font-size: theme(detail-font-size-small, font-size-small);
-  }
-
-  .empty {
-    margin-top: margin(0.5);
-    opacity: 0.65;
-    font-style: italic;
-    font-size: 0.85em;
-    white-space: initial;
-  }
-
   .action {
     display: flex;
     margin: 0 margin(0.5) 0 auto;

package/src/routes/components/ListTitleSkeleton.svelte

@@ -0,0 +1,42 @@
+<div class="skeleton" data-testid="skeleton">
+  <div class="poster"></div>
+
+  <div class="lines">
+    <div class="line" style:width="40%"></div>
+    <div class="line" style:width="60%"></div>
+    <div class="line" style:width="80%"></div>
+  </div>
+</div>
+
+<style lang="scss">
+  .skeleton {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    gap: margin(1);
+  }
+
+  .poster {
+    flex: 0 0 auto;
+    height: auto;
+    align-self: start;
+    width: margin(4.125);
+    aspect-ratio: 2/3;
+    border-radius: theme(detail-image-border-radius, border-radius);
+    background: theme(content);
+  }
+
+  .lines {
+    display: flex;
+    flex-direction: column;
+    gap: margin(0.5);
+    width: 100%;
+  }
+
+  .line {
+    width: 60%;
+    height: theme(font-size-base);
+    background: theme(content);
+    border-radius: 5rem;
+  }
+</style>