@playpilot/tpi 8.23.0-beta.4 → 8.23.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.23.0-beta.4",
+	"version": "8.23.0-beta.5",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@@ -38,7 +38,7 @@
 		"svelte": "5.55.7",
 		"svelte-check": "^4.6.0",
 		"svelte-preprocess": "^6.0.5",
-		"svelte-tiny-slider": "^2.8.0",
+		"svelte-tiny-slider": "^2.8.1",
 		"typescript": "^6.0.3",
 		"typescript-eslint": "^8.62.0",
 		"vite": "^5.4.21",

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

@@ -45,12 +45,11 @@
       transform: scale(1.025);
 
       :global(button) {
-        text-decoration-thickness: 2px;
+        text-decoration: underline;
       }
     }
 
     :global(button) {
-      text-decoration: underline;
       color: white;
     }
   }

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

@@ -11,6 +11,7 @@
   import PlaylinksCompact from '../Playlinks/PlaylinksCompact.svelte'
   import PlaylinksDisclaimer from '../Playlinks/PlaylinksDisclaimer.svelte'
   import ModalCloseOverlay from './ModalCloseOverlay.svelte'
+  import ParticipantsRail from '../Rails/ParticipantsRail.svelte'
 
   interface Props {
     titles: TitleData[],
@@ -65,6 +66,8 @@
                     <div class="details">
                       <Description text={title.description!} blurb={title.blurb} limit={80} />
 
+                      <ParticipantsRail {title} heading="" />
+
                       <div class="playlinks-heading" use:heading={3}>{t('Where To Stream Online')}</div>
 
                       <PlaylinksCompact playlinks={title.providers} size={24} />
@@ -128,6 +131,7 @@
   }
 
   .content {
+    --rail-margin: #{margin(2)};
     position: relative;
     display: flex;
     flex-direction: column;
@@ -167,7 +171,7 @@
   }
 
   .playlinks-heading {
-    margin: margin(0.5) 0;
+    margin: margin(1) 0 margin(0.5);
     color: theme(reel-playlinks-title-color, text-color-alt);
     font-family: theme(reel-playlinks-title-font-family, inherit);
     font-weight: theme(reel-playlinks-title-font-weight, lighter);

package/src/routes/components/Playlinks/PlaylinksCompact.svelte

@@ -10,11 +10,18 @@
 
   const { playlinks, size = 30 }: Props = $props()
 
-  const limitedPlaylinks = $derived(mergePlaylinks(playlinks).slice(0, 3))
+  let limit = $state(3)
+
+  const mergedPlaylinks = mergePlaylinks(playlinks)
+  const limitedPlaylinks = $derived(mergedPlaylinks.slice(0, limit))
 
   function onPlaylinkClick(event: MouseEvent): void {
     event.stopPropagation()
   }
+
+  function expand(): void {
+    limit = mergedPlaylinks.length
+  }
 </script>
 
 <div class="playlinks">
@@ -22,13 +29,13 @@
     <PlaylinkIcon {playlink} onclick={onPlaylinkClick} {size} />
   {/each}
 
-  {#if playlinks.length > limitedPlaylinks.length}
-    <span class="more">
-      +{playlinks.length - limitedPlaylinks.length}
-    </span>
+  {#if mergedPlaylinks.length > limit}
+    <button class="button more" onclick={expand}>
+      +{mergedPlaylinks.length - limit}
+    </button>
   {/if}
 
-  {#if !playlinks.length}
+  {#if !mergedPlaylinks.length}
     <div class="empty" data-testid="playlinks-empty">
       Unavailable to stream
     </div>
@@ -44,15 +51,25 @@
   }
 
   .more {
+    appearance: none;
     display: flex;
     align-items: center;
     padding: 0 margin(0.125);
+    background: transparent;
+    border: 0;
     color: theme(list-item-more-text-color, text-color-alt);
     font-size: theme(detail-font-size-small, font-size-small);
+    font-family: inherit;
     line-height: normal;
+
+    &:hover {
+      cursor: pointer;
+      color: theme(text-color);
+    }
   }
 
   .empty {
+    appearance: none;
     margin-top: margin(0.25);
     opacity: 0.65;
     font-style: italic;

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

@@ -12,9 +12,10 @@
 
   interface Props {
     title: TitleData
+    heading?: string
   }
 
-  const { title }: Props = $props()
+  const { title, heading = t('Cast') }: Props = $props()
 
   /**
    * Order participants by how often their name appears in an the page text. This only takes into account
@@ -48,14 +49,14 @@
 </script>
 
 {#await fetchParticipantsForTitle(title)}
-  <Rail heading={t('Cast')}>
+  <Rail {heading}>
     {#each { length: 5 }}
       <div class="participant"></div>
     {/each}
   </Rail>
 {:then participants}
   {#if participants?.length}
-    <Rail heading={t('Cast')}>
+    <Rail {heading}>
       {#each orderParticipantsByPageTextOccurrence(participants).slice(0, 15) as participant}
         <button class="participant" data-testid="participant" onclick={event => onclick(event, participant)}>
           <span class="truncate">{participant.name}</span>