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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.23.0-beta.3",
+	"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/lib/data/translations.ts

@@ -146,6 +146,11 @@ export const translations = {
     [Language.Swedish]: 'Visa mer',
     [Language.Danish]: 'Vis mere',
   },
+  'Show Less': {
+    [Language.English]: 'Show less',
+    [Language.Swedish]: 'Visa mindre',
+    [Language.Danish]: 'Vis mindre',
+  },
   'Cast': {
     [Language.English]: 'Cast',
     [Language.Swedish]: 'Rollista',
@@ -333,6 +338,11 @@ export const translations = {
     [Language.Swedish]: 'Snart på Bio',
     [Language.Danish]: 'Kommende film',
   },
+  'Explore All Movies And Shows': {
+    [Language.English]: 'Explore all movies and TV-shows',
+    [Language.Swedish]: 'Utforska alla filmer och TV-serier',
+    [Language.Danish]: 'Udforsk alle film og tv-serier',
+  },
 
   // Genres
   'All': {

package/src/routes/components/Description.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { t } from '$lib/localization'
+
   interface Props {
     text: string
     blurb?: string
@@ -12,8 +14,8 @@
 
   const limitedText = $derived(text.slice(0, limit))
 
-  function expand(): void {
-    expanded = true
+  function toggle(): void {
+    expanded = !expanded
     onclick()
   }
 </script>
@@ -23,7 +25,7 @@
     {expanded ? text : limitedText}{#if !expanded && text.length > limit}...{/if}
 
     {#if !expanded && (text.length > limit || blurb)}
-      <button class="show-more" onclick={() => expand()}>Show more</button>
+      <button class="toggle" onclick={toggle}>{t('Show More')}</button>
     {/if}
   </span>
 
@@ -32,10 +34,16 @@
   {/if}
 </div>
 
+{#if expanded}
+  <button class="toggle" onclick={toggle}>{t('Show Less')}</button>
+{/if}
+
 <style lang="scss">
   .description:first-child {
     margin: margin(-1) 0 margin(1);
     max-width: theme(description-max-width, 100%);
+    max-height: theme(description-max-height, 100vh);
+    overflow: auto;
   }
 
   .paragraph {
@@ -44,7 +52,7 @@
     font-family: theme(description-font-family, font-family);
   }
 
-  .show-more {
+  .toggle {
     display: inline;
     appearance: none;
     padding: 0;

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/RailModal.svelte

@@ -2,6 +2,7 @@
   import { onMount, type Snippet } from 'svelte'
   import TinySlider from 'svelte-tiny-slider'
   import { fade } from 'svelte/transition'
+  import { t } from '$lib/localization'
   import Modal from './Modal.svelte'
   import IconArrow from '../Icons/IconArrow.svelte'
   import ModalCloseOverlay from './ModalCloseOverlay.svelte'
@@ -74,7 +75,7 @@
     </div>
 
     <div class="close">
-      <ModalCloseOverlay {onclose} label={window.location.href.includes('route=modal') ? 'Streaming guide' : ''} />
+      <ModalCloseOverlay {onclose} label={window.location.href.includes('route=modal') ? t('Explore All Movies And Shows') : ''} />
     </div>
   {/snippet}
 </Modal>
@@ -209,6 +210,6 @@
   }
 
   .close {
-    --modal-close-overlay-left: calc((100vw - $size) / 2)
+    --modal-close-overlay-left: calc((100vw - #{$size}) / 2);
   }
 </style>

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} />
@@ -83,7 +86,7 @@
         </TinySlider>
       </div>
 
-      <ModalCloseOverlay label="Streaming guide" />
+      <ModalCloseOverlay label={t('Explore All Movies And Shows')} />
     {/snippet}
   </Modal>
 </div>
@@ -97,6 +100,7 @@
     --playpilot-detail-background-border-radius: 0;
     --playpilot-detail-background-width: 400%;
     --playpilot-detail-backdrop: rgba(0, 0, 0, 0.85);
+    --playpilot-description-max-height: 40dvh;
 
     :global(*) {
       box-sizing: border-box;
@@ -127,6 +131,7 @@
   }
 
   .content {
+    --rail-margin: #{margin(2)};
     position: relative;
     display: flex;
     flex-direction: column;
@@ -166,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>

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

@@ -23,15 +23,20 @@ describe('Description.svelte', () => {
     expect(queryByRole('button')).not.toBeTruthy()
   })
 
-  it('Should expand description and remove show more button after clicking', async () => {
-    const { getByText, queryByRole } = render(Description, { text: 'Some test description', limit: 5 })
+  it('Should expand description and collapse again after clicking Show more and Show less', async () => {
+    const { getByText, queryByText } = render(Description, { text: 'Some test description', limit: 5 })
 
     expect(getByText('Some ...')).toBeTruthy()
 
-    await fireEvent.click(/** @type {Node} **/(queryByRole('button')))
+    await fireEvent.click(/** @type {Node} **/(getByText('Show more')))
 
     expect(getByText('Some test description')).toBeTruthy()
-    expect(queryByRole('button')).not.toBeTruthy()
+    expect(queryByText('Show more')).not.toBeTruthy()
+
+    await fireEvent.click(/** @type {Node} **/(getByText('Show less')))
+
+    expect(queryByText('Some test description')).not.toBeTruthy()
+    expect(queryByText('Show less')).not.toBeTruthy()
   })
 
   it('Should include blurb after expanding if given', async () => {