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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.23.0-beta.3",
+	"version": "8.23.0-beta.4",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

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/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

@@ -83,7 +83,7 @@
         </TinySlider>
       </div>
 
-      <ModalCloseOverlay label="Streaming guide" />
+      <ModalCloseOverlay label={t('Explore All Movies And Shows')} />
     {/snippet}
   </Modal>
 </div>
@@ -97,6 +97,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;

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 () => {