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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.23.0-beta.4",
+	"version": "8.23.0-beta.6",
 	"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,13 +45,12 @@
       transform: scale(1.025);
 
       :global(button) {
-        text-decoration-thickness: 2px;
+        text-decoration: underline;
       }
     }
 
     :global(button) {
-      text-decoration: underline;
-      color: white;
+      color: theme(modal-close-text-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 IconArrow from '../Icons/IconArrow.svelte'
 
   interface Props {
     titles: TitleData[],
@@ -48,7 +49,7 @@
   <Modal>
     {#snippet dialog()}
       <div class="slider">
-        <TinySlider vertical threshold={100} moveThreshold={20} onchange={pauseAndPlay}>
+        <TinySlider vertical threshold={100} moveThreshold={10} onchange={pauseAndPlay}>
           {#snippet children({ currentIndex, setIndex })}
             {#each titles as title, index}
               <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -76,6 +77,12 @@
                   <TitleBackground {title} useVideoBackground autoplay={false} inline />
 
                   <div class="gradient"></div>
+
+                  {#if index === 0 && currentIndex === 0}
+                    <div class="arrow">
+                      <IconArrow direction="down" size={24} />
+                    </div>
+                  {/if}
                 {/if}
               </div>
             {/each}
@@ -89,18 +96,20 @@
 </div>
 
 <style lang="scss">
-  $modal-height: calc(100dvh - margin(4.5));
+  $modal-height: calc(100vh - margin(4.5));
   $item-height: calc($modal-height - margin(7));
 
   .reel {
     --playpilot-detail-background-height: #{$item-height};
     --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;
+    --playpilot-detail-backdrop: black;
+    --playpilot-description-max-height: 40vh;
+    --playpilot-modal-close-text-color: rgba(255, 255, 255, 0.75);
 
     :global(*) {
       box-sizing: border-box;
+      overscroll-behavior: contain;
     }
 
     :global(iframe) {
@@ -114,7 +123,7 @@
   }
 
   .slider {
-    margin-top: calc(100dvh - $modal-height);
+    margin-top: calc(100vh - $modal-height);
     height: $modal-height;
     width: 100%;
   }
@@ -124,10 +133,12 @@
     width: 100dvw;
     height: $item-height;
     background: theme(detail-background, light);
+    border-bottom: 1px solid theme(reel-modal-item-border, content);
     overflow: hidden;
   }
 
   .content {
+    --rail-margin: #{margin(2)};
     position: relative;
     display: flex;
     flex-direction: column;
@@ -167,7 +178,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);
@@ -184,4 +195,25 @@
     height: margin(7);
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
   }
+
+  @keyframes wiggle {
+    90%,
+    100% {
+      transform: translateX(-50%);
+    }
+
+    95% {
+      transform: translateX(-50%) translateY(margin(0.5));
+    }
+  }
+
+  .arrow {
+    z-index: 1;
+    position: absolute;
+    bottom: margin(1);
+    left: 50%;
+    transform: translateX(-50%);
+    animation: wiggle 5000ms infinite ease-out;
+    color: theme(detail-text-color, text-color);
+  }
 </style>

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>