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

package/package.json

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

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

@@ -50,7 +50,7 @@
     }
 
     :global(button) {
-      color: white;
+      color: theme(modal-close-text-color, white);
     }
   }
 

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

@@ -11,7 +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'
+  import IconArrow from '../Icons/IconArrow.svelte'
 
   interface Props {
     titles: TitleData[],
@@ -49,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 -->
@@ -66,8 +66,6 @@
                     <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} />
@@ -79,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}
@@ -92,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) {
@@ -117,7 +123,7 @@
   }
 
   .slider {
-    margin-top: calc(100dvh - $modal-height);
+    margin-top: calc(100vh - $modal-height);
     height: $modal-height;
     width: 100%;
   }
@@ -127,6 +133,7 @@
     width: 100dvw;
     height: $item-height;
     background: theme(detail-background, light);
+    border-bottom: 1px solid theme(reel-modal-item-border, content);
     overflow: hidden;
   }
 
@@ -188,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>