@playpilot/tpi 1.1.0 → 1.3.0

package/src/routes/components/Editorial/Search/TitleSearch.svelte

@@ -92,7 +92,7 @@
   {/if}
 </div>
 
-<style>
+<style lang="scss">
   .search {
     position: relative;
   }
@@ -100,12 +100,12 @@
   .results {
     z-index: 1;
     position: absolute;
-    top: calc(100% + 0.5rem);
+    top: calc(100% + margin(0.5));
     left: 0;
     right: 0;
     height: 30vh;
-    max-height: 10rem;
-    border-radius: 0.5rem;
+    max-height: margin(10);
+    border-radius: margin(0.5);
     background: var(--playpilot-light);
     scrollbar-width: thin;
     overflow: auto;
@@ -116,28 +116,28 @@
     appearance: none;
     display: flex;
     align-items: flex-start;
-    gap: 1rem;
+    gap: margin(1);
     width: 100%;
     background: transparent;
     border: 0;
-    padding: 0.5rem;
+    padding: margin(0.5);
     border-bottom: 1px solid var(--playpilot-content);
     color: var(--playpilot-text-color-alt);
     font-family: inherit;
     text-align: left;
-  }
 
-  .item:hover {
-    background: var(--playpilot-lighter);
-  }
+    &:hover {
+      background: var(--playpilot-lighter);
+    }
 
-  .item:last-child {
-    border-bottom: 0;
+    &:last-child {
+      border-bottom: 0;
+    }
   }
 
   .poster {
-    width: 1.75rem;
-    border-radius: 0.25rem;
+    width: margin(1.75);
+    border-radius: margin(0.25);
     height: auto;
     background: var(--playpilot-dark);
   }
@@ -149,28 +149,28 @@
   .meta {
     display: flex;
     flex-wrap: wrap;
-    gap: 0 0.5rem;
-    font-size: 0.75rem;
+    gap: 0 margin(0.5);
+    font-size: margin(0.75);
   }
 
   .imdb {
     display: flex;
     align-items: center;
-    gap: 0.25rem;
+    gap: margin(0.25);
   }
 
   .empty {
-    padding: 0.5rem;
-    font-size: 0.75rem;
+    padding: margin(0.5);
+    font-size: margin(0.75);
     color: var(--playpilot-text-color-alt);
   }
 
   .open-in-new-tab {
     margin-left: auto;
     color: var(--playpilot-text-color-alt);
-  }
 
-  .open-in-new-tab:hover {
-    color: vaR(--playpilot-text-color);
+    &:hover {
+      color: vaR(--playpilot-text-color);
+    }
   }
 </style>

package/src/routes/components/Editorial/Switch.svelte

@@ -16,7 +16,7 @@
   </div>
 </button>
 
-<style>
+<style lang="scss">
   .switch {
     appearance: none;
     display: flex;
@@ -35,42 +35,43 @@
   .label {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
-    margin-right: 0.5rem;
+    gap: margin(0.5);
+    margin-right: margin(0.5);
     font-family: var(--playpilot-font-family);
     color: var(--playpilot-text-color-alt);
-    font-size: 0.75rem;
-  }
+    font-size: margin(0.75);
 
-  .switch:hover .label {
-    color: var(--playpilot-text-color);
+    .switch:hover & {
+      color: var(--playpilot-text-color);
+    }
   }
 
   .track {
     position: relative;
-    width: 2rem;
-    height: 1.25rem;
-    border-radius: 1rem;
+    width: margin(2);
+    height: margin(1.25);
+    border-radius: margin(1);
     background: var(--playpilot-content);
     transition: background-color 100ms;
-  }
 
-  .active .track {
-    background: var(--playpilot-green);
+    .active & {
+      background: var(--playpilot-green);
+    }
   }
 
   .knob {
     position: absolute;
-    top: 0.125rem;
-    left: 0.125rem;
-    height: 1rem;
-    width: 1rem;
+    top: margin(0.125);
+    left: margin(0.125);
+    height: margin(1);
+    width: margin(1);
     border-radius: 50%;
     background: white;
     transition: left 100ms;
-  }
 
-  .active .knob {
-    left: 0.875rem;
+    .active & {
+      left: margin(0.875);
+    }
   }
+
 </style>

package/src/routes/components/Editorial/TextInput.svelte

@@ -5,25 +5,25 @@
 
 <input type="text" bind:value {name} aria-label={label} placeholder={label} {readonly} {oninput} />
 
-<style>
+<style lang="scss">
   input {
     width: 100%;
-    padding: 0.5rem 1rem;
+    padding: margin(0.5) margin(1);
     border: 0;
-    border-radius: 2rem;
+    border-radius: margin(2);
     background: var(--playpilot-light);
     color: var(--playpilot-text-color-alt);
-    font-size: 0.75rem;
+    font-size: margin(0.75);
     font-family: var(--playpilot-font-family);
-  }
 
-  input:focus {
-    background: var(--playpilot-lighter);
-    outline: 1px solid white;
-  }
+    &:focus {
+      background: var(--playpilot-lighter);
+      outline: 1px solid white;
+    }
 
-  input::placeholder {
-    color: var(--playpilot-text-color-alt);
-    opacity: 0.75;
+    &::placeholder {
+      color: var(--playpilot-text-color-alt);
+      opacity: 0.75;
+    }
   }
 </style>

package/src/routes/components/Genres.svelte

@@ -18,25 +18,25 @@
   <button class="genre expand" onclick={() => expanded = true}>+{genres.length - 1}</button>
 {/if}
 
-<style>
+<style lang="scss">
   .genre {
     display: flex;
     flex-wrap: wrap;
     background: var(--playpilot-genre-background, var(--playpilot-content));
     border: 0;
-    border-radius: var(--playpilot-genre-border-radius, 1rem);
-    padding: 0.25rem 0.5rem;
+    border-radius: var(--playpilot-genre-border-radius, margin(1));
+    padding: margin(0.25) margin(0.5);
     font-family: var(--playpilot-genre-font-family, inherit);
     font-weight: var(--playpilot-playlink-font-weight, inherit);
     text-transform: var(--playpilot-genre-text-transform, none);
     color: var(--playpilot-genre-text-color, var(--playpilot-text-color-alt));
     line-height: 1;
     font-size: inherit;
-  }
 
-  button.genre:hover {
-    cursor: pointer;
-    filter: var(--playpilot-genre-hover-filter, brightness(1.1));
-    background: var(--playpilot-genre-hover-background, var(--playpilot-genre-background));
+    &:is(button):hover {
+      cursor: pointer;
+      filter: var(--playpilot-genre-hover-filter, brightness(1.1));
+      background: var(--playpilot-genre-hover-background, var(--playpilot-genre-background));
+    }
   }
 </style>

package/src/routes/components/Icons/IconChevron.svelte

@@ -7,7 +7,7 @@
   <path d="M1 0.5L4 3.5L7 0.5" stroke="currentColor" stroke-width="0.9975" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 
-<style>
+<style lang="scss">
   svg {
     transition: transform 100ms;
   }

package/src/routes/components/Modal.svelte

@@ -46,7 +46,7 @@
   <div class="backdrop" onclick={() => onclose()}></div>
 </div>
 
-<style>
+<style lang="scss">
   .modal {
     z-index: 9999;
     position: fixed;
@@ -58,14 +58,13 @@
     width: 100%;
     height: 100%;
     background: var(--playpilot-detail-backdrop, rgba(0, 0, 0, 0.65));
-  }
 
-  @media (min-width: 600px) {
-    .modal {
-      padding: 2rem;
+    @media (min-width: 600px) {
+      padding: margin(2);
     }
   }
 
+
   .dialog {
     position: relative;
     width: 100%;
@@ -73,18 +72,17 @@
     max-height: 80vh;
     overflow: auto;
     margin-top: auto;
-    border-radius: var(--playpilot-detail-border-radius, 1rem 1rem 0 0);
+    border-radius: var(--playpilot-detail-border-radius, margin(1) margin(1) 0 0);
     background: var(--playpilot-detail-background, var(--playpilot-light));
-  }
 
-  @media (min-width: 600px) {
-    .dialog {
+    @media (min-width: 600px) {
       margin-top: 0;
-      border-radius: var(--playpilot-detail-border-radius, 1rem);
+      border-radius: var(--playpilot-detail-border-radius, margin(1));
       max-height: 100%;
     }
   }
 
+
   .backdrop {
     position: absolute;
     top: 0;
@@ -96,11 +94,11 @@
   .close {
     z-index: 5;
     position: absolute;
-    top: 1rem;
-    right: 1rem;
-  }
+    top: margin(1);
+    right: margin(1);
 
-  .close:hover {
-    filter: brightness(1.1);
+    &:hover {
+      filter: brightness(1.1);
+    }
   }
 </style>

package/src/routes/components/Participants.svelte

@@ -15,26 +15,28 @@
   {/each}
 </div>
 
-<style>
+<style lang="scss">
   h2 {
-    margin: 1.5rem 0 1rem;
+    margin: margin(1.5) 0 margin(1);
     font-size: var(--playpilot-cast-title-font-size, 18px);
+    line-height: normal;
     font-weight: inherit;
+    color: var(--playpilot-cast-title-text-color, var(--playpilot-text-color));
   }
 
   .participants {
     display: flex;
-    gap: 1rem;
-    width: calc(100% + 2rem);
-    padding: 0 1rem;
-    margin: 0 -1rem;
+    gap: margin(1);
+    width: calc(100% + margin(2));
+    padding: 0 margin(1);
+    margin: 0 margin(-1);
     overflow: auto;
     white-space: nowrap;
     scrollbar-width: none;
-  }
 
-  .participants::-webkit-scrollbar {
-    display: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 
   .character {

package/src/routes/components/Playlinks.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { mergePlaylinks } from '$lib/playlink'
 	import { track } from '$lib/tracking'
   import IconContinue from './Icons/IconContinue.svelte'
   import { getContext } from 'svelte'
@@ -10,12 +11,14 @@
   const isModal = getContext('scope') === 'modal'
 
   // Remove any playlinks without logos, as these are likely sub providers.
-  let filteredPlaylinks = $derived(playlinks.filter(playlink => !!playlink.logo_url))
+  const filteredPlaylinks = $derived(playlinks.filter(playlink => !!playlink.logo_url))
+  const mergedPlaylink = $derived(mergePlaylinks(filteredPlaylinks))
 
   const categoryStrings = {
     SVOD: 'Stream',
     BUY: 'Buy',
     RENT: 'Rent',
+    TVOD: 'Rent or Buy',
   }
 
   /**
@@ -29,7 +32,7 @@
 <h2>Where to stream online</h2>
 
 <div class="playlinks" class:list>
-  {#each filteredPlaylinks as { name, url, logo_url, extra_info: { category } }}
+  {#each mergedPlaylink as { name, url, logo_url, extra_info: { category } }}
     <a href={url} target="_blank" class="playlink" onclick={() => onclick(name)} data-playlink={name} rel="sponsored">
       <img src={logo_url} alt="" height="32" width="32" />
 
@@ -53,39 +56,33 @@
   {/if}
 </div>
 
-<style>
+<style lang="scss">
   h2 {
     margin: 0;
     color: var(--playpilot-playlinks-title-color, var(--playpilot-text-color-alt));
     font-family: var(--playpilot-playlinks-title-font-family, inherit);
     font-weight: var(--playpilot-playlinks-title-font-weight, lighter);
     font-size: var(--playpilot-playlinks-title-font-size, 14px);
+    line-height: normal;
   }
 
   img {
-    border-radius: 0.5rem;
+    border-radius: margin(0.5);
     background: rgba(0, 0, 0, 0.25);
-  }
-
-  @media (min-width: 640px) {
-    img {
-      height: 2.5rem;
-      width: 2.5rem;
-    }
 
-    .list img {
-      height: 2rem;
-      width: 2rem;
+    @media (min-width: 640px) {
+      height: margin(2.5);
+      width: margin(2.5);
     }
   }
 
   .playlinks {
     box-sizing: border-box;
     display: flex;
-    gap: 0.5rem;
-    width: calc(100% + 2rem);
-    padding: 0.5rem 1rem;
-    margin: 0 -1rem;
+    gap: margin(0.5);
+    width: calc(100% + margin(2));
+    padding: margin(0.5) margin(1);
+    margin: 0 margin(-1);
     overflow: auto;
     scrollbar-width: none;
   }
@@ -96,39 +93,47 @@
 
   .list {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(margin(15), 1fr));
+
+    img {
+      @media (min-width: 640px) {
+        height: margin(2);
+        width: margin(2);
+      }
+    }
   }
 
   .playlink {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
-    padding: 0.75rem;
+    gap: margin(0.75);
+    padding: margin(0.75);
     background: var(--playpilot-playlink-background, var(--playpilot-lighter));
     box-shadow: var(--playpilot-playlink-shadow, var(--playpilot-shadow));
-    border-radius: var(--playpilot-playlink-border-radius, 0.5rem);
+    border-radius: var(--playpilot-playlink-border-radius, margin(0.5));
     color: var(--playpilot-playlink-text-color, var(--playpilot-text-color-alt)) !important;
     font-weight: var(--playpilot-playlink-font-weight, inherit);
+    font-style: var(--playpilot-playlink-font-style, normal);
     text-decoration: none !important;
     white-space: nowrap;
-    font-size: 0.75rem;
+    font-size: margin(0.75);
     line-height: 1;
-  }
 
-  .playlink img {
-    margin: 0;
-  }
+    &:hover,
+    &:active {
+      filter: var(--playpilot-playlink-hover-filter, brightness(1.1));
+      background: var(--playpilot-playlink-hover-background, var(--playpilot-playlink-background, var(--playpilot-lighter)));
+      text-decoration: none !important;
+    }
 
-  .list .playlink {
-    padding: 0.5rem;
-    gap: 0.5rem;
-  }
+    img {
+      margin: 0;
+    }
 
-  .playlink:hover,
-  .playlink:active {
-    filter: var(--playpilot-playlink-hover-filter, brightness(1.1));
-    background: var(--playpilot-playlink-hover-background, var(--playpilot-playlink-background, var(--playpilot-lighter)));
-    text-decoration: none !important;
+    .list & {
+      padding: margin(0.5);
+      gap: margin(0.5);
+    }
   }
 
   .name {
@@ -137,8 +142,8 @@
   }
 
   .category {
-    margin-top: 0.5rem;
-    font-size: 0.625rem;
+    margin-top: margin(0.5);
+    font-size: margin(0.625);
     color: var(--playpilot-playlink-category-text-color, var(--playpilot-text-color));
     font-weight: var(--playpilot-playlink-category-font-weight, inherit);
     font-family: var(--playpilot-playlink-category-font-family, inherit);
@@ -151,6 +156,6 @@
 
   .arrow {
     margin-left: auto;
-    padding: 0 0.5rem;
+    padding: 0 margin(0.5);
   }
 </style>

package/src/routes/components/Popover.svelte

@@ -28,10 +28,11 @@
   function positionElement() {
     if (!element) return
 
-    const { top, right } = element.getBoundingClientRect()
+    const { top, right, bottom, height } = element.getBoundingClientRect()
     const offset = getOffset()
 
-    flip = top - offset < 0
+    // (If top of element is above top of page) && (If there's more space to the bottom of the link than the top)
+    flip = (top - offset < 0) && (window.innerHeight - bottom > top + height)
 
     const fromRight = window.innerWidth - right - offset
     if (right + offset > window.innerWidth) element.style.left = `${fromRight}px`
@@ -44,10 +45,11 @@
   function setMaxHeight() {
     if (!element) return
 
-    const { top } = element.getBoundingClientRect()
+    const { top, height } = element.getBoundingClientRect()
     const offset = getOffset()
+    const availableSpace = flip ? (window.innerHeight - top - offset) : (top + height - offset)
 
-    maxHeight = Math.min(window.innerHeight - top - offset, window.innerHeight * 0.8)
+    maxHeight = Math.min(availableSpace, window.innerHeight * 0.8)
   }
 
   function getOffset() {
@@ -61,33 +63,33 @@
   </div>
 </div>
 
-<style>
+<style lang="scss">
   .popover {
-    --offset: 0.5rem;
+    --offset: #{margin(0.5)};
     position: absolute;
     top: calc((var(--offset) - 1px) * -1); /* Add 1 pixel to account for rounding errors */
     left: 0;
-    width: calc(100vw - 2rem);
-    max-width: 20rem;
+    width: calc(100vw - margin(2));
+    max-width: margin(20);
     padding: var(--offset) 0;
     transform: translateY(calc(-100% + var(--offset)));
     z-index: 999;
-  }
 
-  .popover.flip {
-    top: auto;
-    bottom: calc(var(--offset) + 1px);  /* Add 1 pixel to account for rounding errors */
-    transform: translateY(calc(100% + var(--offset)));
+    &.flip {
+      top: auto;
+      bottom: calc(var(--offset) + 1px);  /* Add 1 pixel to account for rounding errors */
+      transform: translateY(calc(100% + var(--offset)));
+    }
   }
 
   /* This is a separate element so that the parent can have an offset while still keeping the mouse inside */
   .dialog {
     cursor: default;
     position: relative;
-    border-radius: var(--playpilot-popover-border-radius, 1rem);
+    border-radius: var(--playpilot-popover-border-radius, margin(1));
     background: var(--playpilot-popover-background, var(--playpilot-light));
     box-shadow: var(--playpilot-popover-shadow, var(--playpilot-shadow-large));
-    max-height: min(var(--max-height), 35rem);
+    max-height: min(var(--max-height), margin(35));
     scrollbar-width: thin;
     overflow-y: overlay;
     overflow-x: hidden;

package/src/routes/components/RoundButton.svelte

@@ -6,14 +6,14 @@
    * @property {() => void} [onclick]
    */
   /** @type {Props & { [key: string]: any }} */
-  const { children = null, size = '2rem', onclick = () => null, ...rest } = $props()
+  const { children = null, size = 'margin(2)', onclick = () => null, ...rest } = $props()
 </script>
 
 <svelte:element this={rest.href ? 'a' : 'button'} role={rest.href ? 'link' : 'button'} {onclick} class="button" style:--size={size} {...rest}>
   {@render children?.()}
 </svelte:element>
 
-<style>
+<style lang="scss">
   .button {
     display: flex;
     align-items: center;
@@ -29,10 +29,10 @@
     color: var(--playpilot-button-text-color, var(--playpilot-text-color-alt));
     cursor: pointer;
     transition: transform 50ms;
-  }
 
-  .button:hover {
-    filter: brightness(1.2);
-    transform: scale(1.05);
+    &:hover {
+      filter: brightness(1.2);
+      transform: scale(1.05);
+    }
   }
 </style>

package/src/routes/components/SkeletonText.svelte

@@ -8,26 +8,26 @@
   <div class="skeleton" style:width="{Math.floor(Math.random() * (max - min) + min)}%">&nbsp;</div>
 {/each}
 
-<style>
+<style lang="scss">
   .skeleton {
     position: relative;
     font-size: inherit;
     line-height: inherit;
-  }
 
-  .skeleton:last-child {
-    margin-bottom: 0;
-  }
+    &:last-child {
+      margin-bottom: 0;
+    }
 
-  .skeleton::before {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: calc(100% - 0.5rem);
-    border-radius: var(--playpilot-skeleton-border-radius, 2em);
-    background: var(--playpilot-lighter);
-    content: '';
+    &::before {
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: calc(100% - margin(0.5));
+      border-radius: var(--playpilot-skeleton-border-radius, 2em);
+      background: var(--playpilot-lighter);
+      content: '';
+    }
   }
 </style>