@playpilot/tpi 6.6.4 → 6.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "6.6.4",
+	"version": "6.7.0",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/enums/TrackingEvent.ts

@@ -55,6 +55,8 @@ export const TrackingEvent = {
 
   // Various
   ShareTitle: 'ali_share_title',
+  SaveTitle: 'ali_save_title',
+  NotifyTitle: 'ali_notify_title',
   TrailerClick: 'ali_trailer_button_click',
   RegionRequestFailed: 'ali_region_request_failed',
 

package/src/routes/components/Button.svelte

@@ -3,16 +3,17 @@
 
   interface Props {
     variant?: 'filled' | 'border' | 'link'
-    size?: 'base' | 'large'
+    size?: 'base' | 'large' | 'wide'
+    label?: string | null
     active?: boolean
     onclick?: (event: MouseEvent) => void
     children?: Snippet
   }
 
-  const { variant = 'filled', size = 'base', active = false, onclick, children }: Props = $props()
+  const { variant = 'filled', size = 'base', label = null, active = false, onclick, children }: Props = $props()
 </script>
 
-<button class="button {variant} {size}" class:active {onclick}>
+<button class="button {variant} {size}" class:active {onclick} aria-label={label}>
   {@render children?.()}
 </button>
 
@@ -35,13 +36,13 @@
     cursor: pointer;
 
     :global(svg) {
-      width: 1.5em;
-      height: 1.5em;
+      --icon-size: 1.5em;
+      width: var(--icon-size);
+      height: var(--icon-size);
       opacity: 0.75;
 
       &:last-child {
-        width: 0.85em;
-        height: 0.85em;
+        --icon-size: 0.85em;
       }
     }
   }
@@ -96,5 +97,14 @@
   .large {
     padding: 0.5em 1em;
   }
+
+  .wide {
+    font-size: margin(1);
+    padding: 0.5em 1.5em;
+
+    :global(svg:first-child) {
+      --icon-size: #{margin(0.95)};
+    }
+  }
 </style>
 

package/src/routes/components/ContextMenu.svelte

@@ -1,40 +1,44 @@
 <script lang="ts">
-  import { fly } from 'svelte/transition'
+  import { scale } from 'svelte/transition'
   import IconDots from './Icons/IconDots.svelte'
   import type { Snippet } from 'svelte'
 
   interface Props {
-    ariaLabel: string
+    label?: string
+    align?: 'right' | 'center'
+    button?: Snippet<[any]>
     children: Snippet
   }
 
-  const { ariaLabel, children }: Props = $props()
+  const { label = '', align = 'right', button, children }: Props = $props()
 
   let active = $state(false)
-  let buttonElement: HTMLElement | null = $state(null)
+  let element: Element | null = $state(null)
 
-  /**
-   * Close the context menu when clicking anything but the toggle button.
-   * @param {MouseEvent} event
-   */
-  function closeOnOutsideClick(event: MouseEvent): void {
-    const target = event.target as HTMLElement
+  function toggle(event: MouseEvent): void {
+    const target = event.currentTarget
 
-    if (target === buttonElement || buttonElement?.contains(target)) return
+    if (target === element?.querySelector('button')) {
+      event.stopPropagation()
+    }
 
-    active = false
+    active = !active
   }
 </script>
 
-<svelte:window onclick={closeOnOutsideClick} />
+<svelte:window onclick={() => active = false} />
 
-<div class="context-menu">
-  <button aria-label={ariaLabel} aria-expanded={active} onclick={() => active = !active} bind:this={buttonElement}>
-    <IconDots />
-  </button>
+<div class="context-menu {align}" bind:this={element}>
+  {#if button}
+    {@render button({ toggle })}
+  {:else}
+    <button aria-label={label} aria-expanded={active} onclick={toggle}>
+      <IconDots />
+    </button>
+  {/if}
 
   {#if active}
-    <div class="content" in:fly={{ duration: 150, y: 5 }}>
+    <div class="content" in:scale={{ duration: 50, start: 0.85 }}>
       {@render children()}
     </div>
   {/if}
@@ -59,12 +63,32 @@
   }
 
   .content {
-    z-index: 1;
+    z-index: 10;
     position: absolute;
-    top: 100%;
+    bottom: calc(100% + margin(0.5));
     right: 0;
     max-width: margin(15);
-    border-radius: margin(0.5);
-    background: theme(lighter);
+    border-radius: theme(context-menu-border-radius, margin(0.5));
+    background: theme(detail-background, lighter);
+    box-shadow: theme(shadow);
+
+    .center & {
+      right: auto;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      border-radius: theme(context-menu-border-radius, margin(0.5));
+      background: theme(context-menu-background-lightness, rgba(255, 255, 255, 0.05));
+      pointer-events: none;
+    }
   }
 </style>

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

@@ -131,7 +131,7 @@
     </div>
 
     <div class="context-menu">
-      <ContextMenu ariaLabel="More options">
+      <ContextMenu label="More options">
         <button class="context-menu-action" onclick={onremove}>Remove</button>
         <button class="context-menu-action" onclick={showReportIssueModal}>Report issue</button>
       </ContextMenu>

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

@@ -0,0 +1,3 @@
+<svg width="15" height="16" viewBox="0 0 15 16">
+  <path fill="currentColor" stroke-width="1" d="M5.06753 12.8367H2.01027C1.5832 12.8367 1.17362 12.667 0.871638 12.365C0.569653 12.0631 0.4 11.6535 0.4 11.2264C0.4 10.7993 0.569653 10.3898 0.871638 10.0878C1.17342 9.78599 1.58266 9.61636 2.00942 9.61613M5.06753 12.8367L2.01027 9.61613C2.00999 9.61613 2.00971 9.61613 2.00942 9.61613M5.06753 12.8367C5.09277 13.4454 5.34568 14.0241 5.77823 14.4566C6.23463 14.913 6.85364 15.1694 7.49908 15.1694C8.14452 15.1694 8.76352 14.913 9.21992 14.4566C9.65247 14.0241 9.90538 13.4454 9.93063 12.8367H12.9897C13.4168 12.8367 13.8264 12.667 14.1284 12.365C14.4303 12.0631 14.6 11.6535 14.6 11.2264C14.6 10.7993 14.4303 10.3898 14.1284 10.0878C13.8265 9.78595 13.4172 9.61631 12.9904 9.61613C12.981 9.61583 12.9721 9.61192 12.9655 9.60521C12.9588 9.59833 12.955 9.58906 12.9551 9.57944V9.57875V6.28436C12.9551 4.83782 12.3805 3.45053 11.3576 2.42767C10.3348 1.40481 8.94746 0.830176 7.50092 0.830176C6.05438 0.830176 4.66709 1.40481 3.64423 2.42767C2.62137 3.45053 2.04673 4.83782 2.04673 6.28436V9.57832M5.06753 12.8367L2.04673 9.57832M2.00942 9.61613C2.01927 9.61588 2.02866 9.61184 2.03561 9.60484C2.04262 9.59778 2.04661 9.58827 2.04673 9.57832M2.00942 9.61613L2.04673 9.57832M12.9868 10.6395L12.987 10.6404C13.1425 10.6404 13.2917 10.7022 13.4016 10.8122C13.5116 10.9222 13.5734 11.0713 13.5734 11.2269C13.5734 11.3824 13.5116 11.5316 13.4016 11.6415C13.2917 11.7515 13.1425 11.8133 12.987 11.8133H2.00751C1.85197 11.8133 1.70281 11.7515 1.59283 11.6415C1.48285 11.5316 1.42106 11.3824 1.42106 11.2269C1.42106 11.0713 1.48285 10.9222 1.59283 10.8122C1.70281 10.7022 1.85197 10.6404 2.00751 10.6404H2.0076C2.289 10.6402 2.55878 10.5282 2.75766 10.3291C2.95654 10.13 3.06826 9.86015 3.06826 9.57875V6.28436C3.06826 5.10936 3.53502 3.98248 4.36588 3.15163C5.19673 2.32077 6.32361 1.854 7.49862 1.854C8.67362 1.854 9.8005 2.32077 10.6314 3.15163C11.4622 3.98248 11.929 5.10936 11.929 6.28436L11.929 9.57764L11.929 9.57783M12.9868 10.6395L11.929 9.57783M12.9868 10.6395C12.8484 10.6392 12.7114 10.6119 12.5835 10.5589C12.4546 10.5056 12.3376 10.4274 12.239 10.3287C12.1405 10.2301 12.0624 10.113 12.0092 9.98408C11.956 9.85525 11.9287 9.7172 11.929 9.57783M12.9868 10.6395L11.929 9.57783M6.09242 12.8367H8.90574C8.88156 13.1738 8.73688 13.4924 8.49629 13.733C8.23181 13.9975 7.87311 14.146 7.49908 14.146C7.12505 14.146 6.76634 13.9975 6.50186 13.733C6.26127 13.4924 6.11659 13.1738 6.09242 12.8367Z" />
+</svg>

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

@@ -1,3 +1,3 @@
-<svg width="24px" height="24px" viewBox="0 -960 960 960">
-  <path fill="currentColor" d="m380-300 280-180-280-180v360ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
+<svg width="12" height="12" viewBox="0 0 12 12">
+  <path stroke="currentColor" stroke-width="1.1" transform="translate(2 0)" d="M9.47461 5.37598C9.77461 5.54918 9.77461 5.98207 9.47461 6.15527L1.22461 10.9189C0.924693 11.0916 0.549804 10.8745 0.549804 10.5283L0.549805 1.00293C0.549805 0.656711 0.924691 0.439623 1.22461 0.612304L9.47461 5.37598Z" />
 </svg>

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

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16">
+  <path stroke="currentColor" stroke-width="1.33" d="M3.3335 5.2C3.3335 4.0799 3.3335 3.51984 3.55148 3.09202C3.74323 2.71569 4.04919 2.40973 4.42552 2.21799C4.85334 2 5.41339 2 6.5335 2H9.46683C10.5869 2 11.147 2 11.5748 2.21799C11.9511 2.40973 12.2571 2.71569 12.4488 3.09202C12.6668 3.51984 12.6668 4.0799 12.6668 5.2V14L8.00016 11.3333L3.3335 14V5.2Z" />
+</svg>

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

@@ -1,3 +1,4 @@
-<svg viewBox="0 -960 960 960" width="18px" height="18px">
-  <path d="M680-80q-50 0-85-35t-35-85q0-6 3-28L282-392q-16 15-37 23.5t-45 8.5q-50 0-85-35t-35-85q0-50 35-85t85-35q24 0 45 8.5t37 23.5l281-164q-2-7-2.5-13.5T560-760q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35q-24 0-45-8.5T598-672L317-508q2 7 2.5 13.5t.5 14.5q0 8-.5 14.5T317-452l281 164q16-15 37-23.5t45-8.5q50 0 85 35t35 85q0 50-35 85t-85 35Zm0-80q17 0 28.5-11.5T720-200q0-17-11.5-28.5T680-240q-17 0-28.5 11.5T640-200q0 17 11.5 28.5T680-160ZM200-440q17 0 28.5-11.5T240-480q0-17-11.5-28.5T200-520q-17 0-28.5 11.5T160-480q0 17 11.5 28.5T200-440Zm480-280q17 0 28.5-11.5T720-760q0-17-11.5-28.5T680-800q-17 0-28.5 11.5T640-760q0 17 11.5 28.5T680-720Zm0 520ZM200-480Zm480-280Z" fill="currentColor" />
+<svg width="16" height="15" viewBox="0 0 16 15">
+  <path fill="currentColor" d="M6.70138 1.36838C6.70187 0.320494 7.75924 -0.233702 8.60177 0.0939687L8.76779 0.172094L8.82345 0.203344L8.87521 0.240453L14.4748 4.35666C15.273 4.89508 15.2742 6.06459 14.4807 6.60666L8.8879 10.8586L8.83029 10.9026L8.76779 10.9367C7.90544 11.4141 6.70148 10.8588 6.70138 9.74045V9.051C6.21939 9.09485 5.65912 9.18628 5.11056 9.37034C4.41863 9.60256 3.79163 9.96387 3.33907 10.5061C2.89934 11.0331 2.56088 11.8063 2.56075 12.9924C2.56075 13.1083 2.55351 13.2694 2.50802 13.4348C2.48558 13.5162 2.34386 14.0279 1.78439 14.1965C1.18154 14.3778 0.775385 13.9725 0.706262 13.9006C0.580913 13.7702 0.500537 13.626 0.452356 13.5305C0.257874 13.1448 0.107806 12.5395 0.0402463 11.841C-0.0994489 10.3951 0.0801391 8.23145 1.2922 5.90647C2.38232 3.81585 4.09969 2.85246 5.51095 2.42209C5.94157 2.29082 6.34701 2.20931 6.70138 2.15745V1.36838ZM8.28341 1.04709C8.02513 0.904267 7.70193 1.08266 7.70138 1.36838V3.07346C6.71677 3.09168 3.72663 3.40026 2.17892 6.36838L1.98165 6.76584C0.053228 10.8548 1.56075 14.193 1.56075 12.9924C1.56118 8.17098 6.39327 7.98172 7.70138 8.01877V9.74045C7.70147 9.9908 7.94881 10.1585 8.1838 10.1008L8.28341 10.0627L13.883 5.80686C14.1412 5.66368 14.1413 5.30543 13.883 5.16233L8.28341 1.04709Z" />
 </svg>
+

package/src/routes/components/Notify.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { track } from '$lib/tracking'
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { t } from '$lib/localization'
+  import { heading } from '$lib/actions/heading'
+  import type { TitleData } from '$lib/types/title'
+  import Button from './Button.svelte'
+  import ContextMenu from './ContextMenu.svelte'
+  import IconNotify from './Icons/IconNotify.svelte'
+
+  interface Props {
+    title: TitleData
+  }
+
+  const { title }: Props = $props()
+</script>
+
+<div class="notify">
+  <div class="heading" use:heading={3}>{title.title} is currently not available to stream.</div>
+
+  <ContextMenu align="center">
+    {#snippet button({ toggle })}
+      <Button onclick={(event) => {
+        toggle(event)
+        track(TrackingEvent.NotifyTitle, title)
+      }} size="wide" label={t('Save')}>
+        <IconNotify /> <span class="label">Notify me when available</span>
+      </Button>
+    {/snippet}
+
+    <div class="content">
+      This feature is coming soon! Thanks for checking it out. We're still putting the finishing touches on it. Stay tuned!
+    </div>
+  </ContextMenu>
+</div>
+
+<style lang="scss">
+  .notify {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: margin(0.5);
+  }
+
+  .heading {
+    color: theme(text-color-alt);
+    text-align: center;
+  }
+
+  .content {
+    width: margin(14);
+    padding: margin(1);
+    margin: 0;
+    font-size: theme(font-size-small);
+    font-weight: theme(font-bold);
+  }
+
+  .label {
+    margin-left: margin(0.25);
+    font-size: theme(font-size-base);
+    font-weight: theme(font-bold);
+  }
+</style>

package/src/routes/components/Playlinks/Playlinks.svelte

@@ -9,6 +9,7 @@
   import { campaignToPlaylink, getFirstAdOfType } from '$lib/api/ads'
   import { getContext } from 'svelte'
   import Playlink from './Playlink.svelte'
+  import Notify from '../Notify.svelte'
 
   interface Props {
     playlinks: PlaylinkData[]
@@ -34,31 +35,28 @@
   }
 </script>
 
-<div class="heading" use:heading={3}>{t('Where To Stream Online')}</div>
 
-{#if playlinks.length}
+{#if mergedPlaylinks.length}
+  <div class="heading" use:heading={3}>{t('Where To Stream Online')}</div>
+
   <div class="disclaimer" data-testid="commission-disclaimer">
     {window?.PlayPilotLinkInjections?.config?.playlinks_disclaimer_text || t('Commission Disclaimer')}
     <a href="https://playpilot.com/" target="_blank" rel="sponsored">PlayPilot.com</a>
   </div>
-{/if}
 
-<div class="playlinks" class:list bind:clientWidth={outerWidth}>
-  {#each mergedPlaylinks as playlink, index}
-    <Playlink {playlink} onclick={() => onclick(playlink.name)} />
+  <div class="playlinks" class:list bind:clientWidth={outerWidth}>
+    {#each mergedPlaylinks as playlink, index}
+      <Playlink {playlink} onclick={() => onclick(playlink.name)} />
 
-    <!-- A fake highlighted playlink as part of the display ad, to be shown after the first playlink -->
-    {#if displayAd && (index === 0)}
-      <Playlink playlink={campaignToPlaylink(displayAd)} onclick={() => track(TrackingEvent.DisplayedAdPlaylickClick, title, { campaign_name: displayAd.campaign_name })} hideCategory disclaimer={displayAd.disclaimer || ''} />
-    {/if}
-  {/each}
-
-  {#if !mergedPlaylinks.length}
-    <div class="empty" data-testid="playlinks-empty">
-      {t('Title Unavailable')}
-    </div>
-  {/if}
-</div>
+      <!-- A fake highlighted playlink as part of the display ad, to be shown after the first playlink -->
+      {#if displayAd && (index === 0)}
+        <Playlink playlink={campaignToPlaylink(displayAd)} onclick={() => track(TrackingEvent.DisplayedAdPlaylickClick, title, { campaign_name: displayAd.campaign_name })} hideCategory disclaimer={displayAd.disclaimer || ''} />
+      {/if}
+    {/each}
+  </div>
+{:else}
+  <Notify {title} />
+{/if}
 
 <style lang="scss">
   .heading {
@@ -102,19 +100,4 @@
       }
     }
   }
-
-  .empty {
-    grid-column: span 2;
-    padding: margin(0.75);
-    margin-top: margin(0.5);
-    background: theme(playlink-background, lighter);
-    box-shadow: theme(playlink-shadow, shadow);
-    border-radius: theme(playlink-border-radius, border-radius);
-    white-space: initial;
-    line-height: 1.35;
-
-    .list & {
-      grid-column: 1;
-    }
-  }
 </style>

package/src/routes/components/Rails/TitlesRail.svelte

@@ -71,6 +71,7 @@
     width: 100%;
     aspect-ratio: 2 / 3;
     background: theme(detail-background-light, lighter);
+    text-decoration: none;
   }
 
   .heading {

package/src/routes/components/Save.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { track } from '$lib/tracking'
+  import { TrackingEvent } from '$lib/enums/TrackingEvent'
+  import { t } from '$lib/localization'
+  import type { TitleData } from '$lib/types/title'
+  import Button from './Button.svelte'
+  import ContextMenu from './ContextMenu.svelte'
+  import IconSave from './Icons/IconSave.svelte'
+
+  interface Props {
+    title: TitleData
+  }
+
+  const { title }: Props = $props()
+</script>
+
+<ContextMenu>
+  {#snippet button({ toggle })}
+    <Button onclick={(event) => {
+      toggle(event)
+      track(TrackingEvent.SaveTitle, title)
+    }} size="wide" label={t('Save')}>
+      <IconSave />
+    </Button>
+  {/snippet}
+
+  <div class="content">
+    This feature is coming soon! Thanks for checking it out. We're still putting the finishing touches on it. Stay tuned!
+  </div>
+</ContextMenu>
+
+<style lang="scss">
+  .content {
+    width: margin(14);
+    padding: margin(1);
+    margin: 0;
+    font-size: theme(font-size-small);
+    font-weight: theme(font-bold);
+  }
+</style>

package/src/routes/components/Share.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { scale } from 'svelte/transition'
   import { mobileBreakpoint } from '$lib/constants'
   import { copyToClipboard } from '$lib/clipboard'
   import { track } from '$lib/tracking'
@@ -11,6 +10,7 @@
   import IconEmail from './Icons/IconEmail.svelte'
   import Button from './Button.svelte'
   import { onMount } from 'svelte'
+  import ContextMenu from './ContextMenu.svelte'
 
   interface Props {
     title: string
@@ -22,24 +22,18 @@
   const isMobile = window.innerWidth < mobileBreakpoint
   const useShareApi = isMobile && typeof navigator.share !== 'undefined'
 
-  let showContextMenu = $state(false)
-
   onMount(() => {
     url = url + '?utm_source=tpi'
   })
 
-  async function toggle(event: MouseEvent): Promise<void> {
-    event.stopPropagation()
-
-    if (useShareApi) {
-      await navigator.share({ title, url })
-
-      track(TrackingEvent.ShareTitle, null, { title, url: getFullUrlPath(), method: 'native' })
-
+  function shareApiOrToggle(event: MouseEvent, toggle: Function): void {
+    if (!useShareApi) {
+      toggle(event)
       return
     }
 
-    showContextMenu = !showContextMenu
+    track(TrackingEvent.ShareTitle, null, { title, url: getFullUrlPath(), method: 'native' })
+    navigator.share({ title, url })
   }
 
   function copy(): void {
@@ -53,57 +47,25 @@
   }
 </script>
 
-<svelte:window onclick={() => showContextMenu = false} />
-
-<div class="share">
-  <Button onclick={toggle}>
-    <IconShare /> Share
-  </Button>
+<ContextMenu>
+  {#snippet button({ toggle })}
+    <Button onclick={(event) => shareApiOrToggle(event, toggle)} size="wide" label={t('Share')}>
+      <IconShare />
+    </Button>
+  {/snippet}
 
-  {#if showContextMenu}
-    <div class="context-menu" transition:scale={{ duration: 50, start: 0.85 }}>
-      <button class="item" onclick={copy}>
-        <IconLink /> {t('Copy URL')}
-      </button>
+  <button class="item" onclick={copy}>
+    <IconLink /> {t('Copy URL')}
+  </button>
 
-      <button class="item" onclick={email}>
-        <IconEmail /> {t('Email')}
-      </button>
-    </div>
-  {/if}
-</div>
+  <button class="item" onclick={email}>
+    <IconEmail /> {t('Email')}
+  </button>
+</ContextMenu>
 
 <style lang="scss">
   $border-radius: theme(context-menu-border-radius, margin(0.5));
 
-  .share {
-    position: relative;
-  }
-
-  .context-menu {
-    z-index: 10;
-    position: absolute;
-    bottom: calc(100% + margin(0.5));
-    left: 0;
-    max-width: margin(15);
-    border-radius: $border-radius;
-    background: theme(detail-background, lighter);
-    box-shadow: theme(shadow);
-
-    &::before {
-      content: "";
-      display: block;
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      border-radius: $border-radius;
-      background: theme(context-menu-background-lightness, rgba(255, 255, 255, 0.05));
-      pointer-events: none;
-    }
-  }
-
   .item {
     cursor: pointer;
     appearance: none;

package/src/routes/components/Title.svelte

@@ -6,6 +6,7 @@
   import ParticipantsRail from './Rails/ParticipantsRail.svelte'
   import SimilarRail from './Rails/SimilarRail.svelte'
   import TitlePoster from './TitlePoster.svelte'
+  import Save from './Save.svelte'
   import Share from './Share.svelte'
   import Trailer from './Trailer.svelte'
   import { t } from '$lib/localization'
@@ -55,9 +56,13 @@
 
     <div class="actions">
       {#if title.embeddable_url}
-        <Trailer title={title} />
-        <Share title={title.title} url={titleUrl(title)} />
+        <Trailer {title} />
       {/if}
+
+      <div class="right">
+        <Save {title} />
+        <Share title={title.title} url={titleUrl(title)} />
+      </div>
     </div>
   </div>
 
@@ -182,7 +187,13 @@
   .actions {
     display: flex;
     gap: margin(0.5);
-    margin-top: margin(0.5);
+    margin-top: margin(1);
+  }
+
+  .right {
+    display: flex;
+    gap: inherit;
+    margin-left: auto;
   }
 
   .background {

package/src/routes/components/Trailer.svelte

@@ -19,7 +19,6 @@
   }
 </script>
 
-<Button {onclick}>
+<Button {onclick} size="wide" label={t('Watch Trailer')}>
   <IconPlay />
-  {t('Watch Trailer')}
 </Button>

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

@@ -25,4 +25,10 @@ describe('Button.svelte', () => {
 
     expect(onclick).toHaveBeenCalled()
   })
+
+  it('Should include given label as aria-label', () => {
+    const { getByLabelText } = render(Button, { label: 'Some label' })
+
+    expect(getByLabelText('Some label')).toBeTruthy()
+  })
 })

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

@@ -8,7 +8,7 @@ describe('ContextMenu.svelte', () => {
   const children = createRawSnippet(() => ({ render: () => '<p>Some snippet</p>' }))
 
   it('Should open the context menu on click', async () => {
-    const { getByRole, queryByText } = render(ContextMenu, { ariaLabel: '', children })
+    const { getByRole, queryByText } = render(ContextMenu, { label: '', children })
 
     expect(queryByText('Some snippet')).not.toBeTruthy()
 
@@ -18,7 +18,7 @@ describe('ContextMenu.svelte', () => {
   })
 
   it('Should close the context menu on second click', async () => {
-    const { getByRole, queryByText } = render(ContextMenu, { ariaLabel: '', children })
+    const { getByRole, queryByText } = render(ContextMenu, { label: '', children })
 
     await fireEvent.click(getByRole('button'))
     await fireEvent.click(getByRole('button'))
@@ -27,11 +27,23 @@ describe('ContextMenu.svelte', () => {
   })
 
   it('Should close the context menu when clicking outside of the button', async () => {
-    const { getByRole, queryByText } = render(ContextMenu, { ariaLabel: '', children })
+    const { getByRole, queryByText } = render(ContextMenu, { label: '', children })
 
     await fireEvent.click(getByRole('button'))
     await fireEvent.click(document.body)
 
     expect(queryByText('Some snippet')).not.toBeTruthy()
   })
+
+  it('Should include center class when align is set to center', async () => {
+    const { container } = render(ContextMenu, { align: 'center', children })
+
+    expect(container.querySelector('.context-menu')?.classList).toContain('center')
+  })
+
+  it('Should include right class when align is not set to center', async () => {
+    const { container } = render(ContextMenu, { children })
+
+    expect(container.querySelector('.context-menu')?.classList).toContain('right')
+  })
 })

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

@@ -63,12 +63,13 @@ describe('Playlinks.svelte', () => {
     expect(getByText('Some disclaimer')).toBeTruthy()
   })
 
-  it('Should show empty state without commission disclaimer when no playlinks were given', () => {
+  it('Should show empty state without commission disclaimer when no playlinks are given', () => {
     /** @type {import('$lib/types/playlink').PlaylinkData[]} */
     const playlinks = []
-    const { queryByTestId } = render(Playlinks, { playlinks, title })
+    const { queryByTestId, getByText } = render(Playlinks, { playlinks, title })
 
-    expect(queryByTestId('playlinks-empty')).toBeTruthy()
+    expect(getByText(`${title.title} is currently not available to stream.`)).toBeTruthy()
+    expect(getByText('Notify me when available')).toBeTruthy()
     expect(queryByTestId('commission-disclaimer')).not.toBeTruthy()
   })