@playpilot/tpi 5.33.0-beta.explore.6 → 5.33.0-beta.in-text.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "5.33.0-beta.explore.6",
+	"version": "5.33.0-beta.in-text.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/api/ads.ts

@@ -14,7 +14,7 @@ export async function fetchAds(): Promise<Campaign[]> {
   if (!apiToken) throw new Error('No token was provided')
 
   try {
-    const response = await api<Campaign[]>(`/ads/browse/?region=nl&api-token=${apiToken}`)
+    const response = await api<Campaign[]>(`/ads/browse/?api-token=${apiToken}`)
 
     return response
   } catch (error: any) {

package/src/lib/api/titles.ts

@@ -1,21 +1,9 @@
 import { getApiToken } from '$lib/token'
-import type { APIPaginatedResult } from '$lib/types/api'
 import type { TitleData } from '../types/title'
 import { api } from './api'
 
-export async function fetchTitles(params: Record<string, string | number> = {}): Promise<APIPaginatedResult<TitleData>> {
-  const apiToken = getApiToken()
-
-  if (!apiToken) throw new Error('No token was provided')
-
-  const paramsAsString = Object.entries(params).map(([key, value]) => `${key}=${value}`).join('&')
-  const response = await api<APIPaginatedResult<TitleData>>(`/titles/browse?api-token=${apiToken}&` + paramsAsString)
-
-  return response
-}
-
 export async function fetchSimilarTitles(title: TitleData): Promise<TitleData[]> {
-  const response = await fetchTitles({ related_to_sid: title.sid })
+  const response = await api<{ results: TitleData[] }>(`/titles/browse?api-token=${getApiToken()}&related_to_sid=${title.sid}`)
 
   return response.results
 }

package/src/lib/color.ts

@@ -0,0 +1,19 @@
+/** Adjust the lightness of an RGB color. */
+export function colorLuminance(input: string, luminosity: number): string {
+	const match = input
+		.replace(/\s+/g, '')
+		.match(/^rgb\((\d+),(\d+),(\d+)\)$/i)
+
+	if (!match) return ''
+
+	const [, r, g, b] = match
+
+	const adjust = (v: string) => {
+		const color = parseInt(v, 10)
+		return Math.round(Math.min(Math.max(0, color + color * luminosity), 255))
+	}
+
+	return `rgb(${adjust(r)}, ${adjust(g)}, ${adjust(b)})`
+}
+
+

package/src/lib/data/translations.ts

@@ -126,11 +126,6 @@ export const translations = {
     [Language.Swedish]: 'Liknande filmer och serier',
     [Language.Danish]: 'Lignende film og serier',
   },
-  'Watch Trailer': {
-    [Language.English]: 'Watch trailer',
-    [Language.Swedish]: 'Se trailer',
-    [Language.Danish]: 'Se trailer',
-  },
 
   // Genres
   'All': {

package/src/lib/enums/SplitTest.ts

@@ -9,4 +9,9 @@ export const SplitTest = {
     numberOfVariants: 2,
     variantNames: ['Image', 'Label'] as string[],
   },
+  InTextEngagement: {
+    key: 'in-text-engagement',
+    numberOfVariants: 4,
+    variantNames: ['Default', 'Clapper Icon', 'Play Icon', 'Animated Link'] as string[]
+  }
 } as const

package/src/lib/fakeData.ts

@@ -38,7 +38,6 @@ export const title: TitleData = {
   standing_poster: 'https://img.playpilot.tech/6239ee86a58f11efb0b50a58a9feac02/src/img?optimizer=image&class=2by3x18',
   title: 'Dune: Prophecy',
   original_title: 'Dune: Prophecy',
-  embeddable_url: null,
 }
 
 export const linkInjections: LinkInjection[] = [{

package/src/lib/injection.ts

@@ -10,10 +10,15 @@ import { getNumberOfOccurrencesInArray } from './array'
 import { mobileBreakpoint } from './constants'
 import { destroyAllModals, openModal } from './modal'
 import InTextDisclaimer from '../routes/components/InTextDisclaimer.svelte'
+import { getSplitTestVariantName, trackSplitTestAction } from './splitTest'
+import { SplitTest } from './enums/SplitTest'
+import { colorLuminance } from './color'
 
 export const keyDataAttribute = 'data-playpilot-injection-key'
 export const keySelector = `[${keyDataAttribute}]`
 
+const linksIntersectionObserver = typeof window !== 'undefined' ? new IntersectionObserver(animateLink) : null
+
 let currentlyHoveredInjection: EventTarget | null = null
 let activePopoverInsertedComponent: object | null = null
 let afterArticlePlaylinkInsertedComponent: object | null = null
@@ -306,6 +311,19 @@ function createLinkInjectionElement(injection: LinkInjection): { injectionElemen
   linkElement.target = '_blank'
   linkElement.rel = 'noopener nofollow noreferrer'
 
+  // Part of a split test, insert an absolute positioned icon in the top right of links.
+  if (getSplitTestVariantName(SplitTest.InTextEngagement) === 'Clapper Icon' || getSplitTestVariantName(SplitTest.InTextEngagement) === 'Play Icon') {
+    const iconElement = document.createElement('span')
+    iconElement.classList.add('playpilot-injection-info-icon')
+    iconElement.dataset.playpilotElement = 'true'
+
+    const playIcon = '<svg width="8" height="8" viewBox="0 0 8 8" fill="none"><path d="M7.66011 4.53958C8.1133 4.31131 8.1133 3.68869 7.6601 3.46042L0.930122 0.0706345C0.507292 -0.142339 8.99396e-08 0.151949 8.42451e-08 0.610212L0 7.38979C-5.69452e-09 7.84805 0.507291 8.14234 0.930122 7.92937L7.66011 4.53958Z" fill="currentColor"/></svg>'
+    const clapperIcon = '<svg width="10" height="12" viewBox="0 0 13 16" fill="none"><rect x="0.950195" y="6.56641" width="12.0498" height="8.80563" rx="1" fill="currentColor" /><rect y="5.92969" width="12" height="2.4" rx="0.5" transform="rotate(-29.6116 0 5.92969)" fill="currentColor" /><path d="M8.82314 11.4484C9.02159 11.3443 9.02159 11.0602 8.82314 10.956L5.87605 9.40918C5.69089 9.312 5.46875 9.44629 5.46875 9.6554L5.46875 12.749C5.46875 12.9582 5.69089 13.0924 5.87605 12.9953L8.82314 11.4484Z" fill="white" /></svg>'
+
+    iconElement.innerHTML = getSplitTestVariantName(SplitTest.InTextEngagement) === 'Clapper Icon' ? clapperIcon : playIcon
+    linkElement.insertAdjacentElement('beforeend', iconElement)
+  }
+
   injectionElement.insertAdjacentElement('beforeend', linkElement)
 
   return { injectionElement, linkElement }
@@ -428,6 +446,8 @@ function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
 
     event.preventDefault()
 
+    trackSplitTestAction(SplitTest.InTextEngagement, 'click')
+
     playFallbackViewTransition(() => {
       destroyLinkPopover(false)
       openModal({ event, injection, data: injection.title_details })
@@ -462,10 +482,28 @@ function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
     injectionElement.addEventListener('mouseleave', () => {
       currentlyHoveredInjection = null
     })
+
+    linksIntersectionObserver!.observe(injectionElement)
   })
 }
 
+export function animateLink(entries: IntersectionObserverEntry[]): void {
+  if (getSplitTestVariantName(SplitTest.InTextEngagement) !== 'Animated Link') return
 
+  entries.forEach(entry => {
+    if (!entry.isIntersecting) return
+
+    const linkElement = entry.target.querySelector('a')
+    if (!linkElement) return
+
+    const linkColor = window.getComputedStyle(linkElement).color
+
+    ;(entry.target as HTMLElement).style = `--animation-color: ${colorLuminance(linkColor, -0.5)}`
+    entry.target.classList.add('animate-injection')
+
+    linksIntersectionObserver!.unobserve(entry.target)
+  })
+}
 
 /**
  * When a link is hovered, it is shown as a popover. The component is mounted when a mouse enters the link,
@@ -590,6 +628,9 @@ export function clearLinkInjection(key: string): void {
   const element: HTMLAnchorElement | null = document.querySelector(`[${keyDataAttribute}="${key}"]`)
   if (!element) return
 
+  const playpilotElements = element.querySelectorAll('[data-playpilot-element]')
+  playpilotElements.forEach(element => element.remove())
+
   const linkContent = element.querySelector('a')?.innerHTML
   element.outerHTML = linkContent || ''
 }

package/src/lib/modal.ts

@@ -1,15 +1,14 @@
 import { mount, unmount } from "svelte"
 import { isHoldingSpecialKey } from "./event"
+import TitleModal from "../routes/components/TitleModal.svelte"
 import type { LinkInjection } from "./types/injection"
+import ParticipantModal from "../routes/components/ParticipantModal.svelte"
 import type { TitleData } from "./types/title"
 import type { ParticipantData } from "./types/participant"
 import { mobileBreakpoint } from "./constants"
 import { getPlayPilotWrapperElement } from "./injection"
-import TitleModal from "../routes/components/TitleModal.svelte"
-import ParticipantModal from "../routes/components/ParticipantModal.svelte"
-import ExploreModal from "../routes/components/Explore/ExploreModal.svelte"
 
-type ModalType = 'title' | 'participant' | 'explore'
+type ModalType = 'title' | 'participant'
 
 type Modal = {
   injection?: LinkInjection | null
@@ -47,9 +46,9 @@ export function openModal(
 }
 
 function getModalComponentByType({ type = 'title', target, data, props = {} }: { type: ModalType, target: Element, data: TitleData | ParticipantData | null, props?: Record<string, any> }) {
-  if (type === 'participant') return mount(ParticipantModal, { target, props: { participant: data as ParticipantData, ...props  } })
-  if (type === 'explore') return mount(ExploreModal, { target, props: { ...props  } })
-  return mount(TitleModal, { target, props: { title: data as TitleData, ...props } })
+  return type === 'title' ?
+    mount(TitleModal, { target, props: { title: data as TitleData, ...props } }) :
+    mount(ParticipantModal, { target, props: { participant: data as ParticipantData, ...props  } })
 }
 
 function addModalToList({ type = 'title', injection = null, data, scrollPosition = 0, component }: Modal) {

package/src/lib/scss/global.scss

@@ -7,8 +7,47 @@
   }
 }
 
+@keyframes animate-injection {
+  0% {
+    background-position: 0% 0%;
+  }
+
+  100% {
+    background-position: -300% 0%;
+  }
+}
+
 [data-playpilot-injection-key] {
   position: relative;
+
+  &.animate-injection a {
+    background: linear-gradient(to right, currentColor 50%, var(--animation-color), currentcolor);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-size: 200% auto;
+    animation: animate-injection 750ms 500ms ease-in-out forwards;
+  }
+}
+
+.playpilot-injection-info-icon {
+  position: relative;
+  display: inline-block;
+  height: 1em;
+
+  svg {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: -0.5em;
+    right: -0.25em;
+    font-size: 0.65em;
+  }
+
+  h1 &, h2 &, h3 &, h4 &, h5 &, h6 & {
+    display: none
+  }
 }
 
 .playpilot-injection-highlight {
@@ -21,7 +60,9 @@
 .playpilot-styled-scrollbar {
   scrollbar-color: var(--playpilot-content-light) var(--playpilot-lighter);
   scrollbar-width: thin;
+}
 
+.playpilot-styled-scrollbed {
   &::-webkit-scrollbar {
     width: margin(0.75);
   }

package/src/lib/types/config.d.ts

@@ -39,16 +39,4 @@ export type ConfigResponse = {
   in_text_disclaimer_text?: string
   in_text_disclaimer_selector?: string
   in_text_disclaimer_insert_position?: InsertPosition
-
-  /**
-   * These options are all relevant for the Explore component, which can be inserted as a widget on any page or as a modal.
-   * `explore_navigation_selector` is used to select the navigation element that should be copied and inserted _after_.
-   * `explore_navigation_label` will end up being the label of the navigation item, defaults to `Streaming Guide`.
-   * `explore_navigation_path` is the path that the navigation item will lead to, this will be set up by the third party.
-   * `explore_navigation_insert_position` is used to determine if the navigation item should be inserted before or after the given selector.
-   */
-  explore_navigation_selector?: string
-  explore_navigation_label?: string
-  explore_navigation_path?: string
-  explore_navigation_insert_position?: InsertPosition
 }

package/src/lib/types/title.d.ts

@@ -1,8 +1,6 @@
 import type { ParticipantData } from './participant'
 import type { PlaylinkData } from './playlink'
 
-export type ContentType = 'movie' | 'series'
-
 export type TitleData = {
   sid: string
   slug: string
@@ -11,7 +9,7 @@ export type TitleData = {
   genres: string[]
   year: number
   imdb_score: number
-  type: ContentType
+  type: 'movie' | 'series'
   providers: PlaylinkData[]
   description: string | null
   small_poster: string
@@ -19,7 +17,6 @@ export type TitleData = {
   standing_poster: string
   title: string
   original_title: string
-  embeddable_url: string | null
   length?: number
   blurb?: string
   participants?: ParticipantData[]

package/src/routes/+page.svelte

@@ -8,8 +8,9 @@
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { fetchAds } from '$lib/api/ads'
   import { fetchConfig } from '$lib/api/config'
-  import { insertExplore, insertExploreIntoNavigation } from '$lib/explore'
   import { authorize, getAuthToken, isEditorialModeEnabled, removeAuthCookie, setEditorialParamInUrl } from '$lib/api/auth'
+  import { trackSplitTestView } from '$lib/splitTest'
+  import { SplitTest } from '$lib/enums/SplitTest'
   import type { LinkInjectionResponse, LinkInjection, LinkInjectionTypes } from '$lib/types/injection'
   import Editor from './components/Editorial/Editor.svelte'
   import EditorTrigger from './components/Editorial/EditorTrigger.svelte'
@@ -43,8 +44,6 @@
     if (isEditorialMode && !loading) rerender()
   })
 
-  insertExplore()
-
   onDestroy(clearLinkInjections)
 
   // This function is called when a user has properly consented via tcfapi or if no consent is required.
@@ -58,7 +57,11 @@
     fireQueuedTrackingEvents()
     track(TrackingEvent.ArticlePageView)
 
-    if (aiInjections.length || manualInjections.length) window.PlayPilotLinkInjections.ads = await fetchAds()
+    if (!aiInjections.length && !manualInjections.length) return
+
+    window.PlayPilotLinkInjections.ads = await fetchAds()
+
+    trackSplitTestView(SplitTest.InTextEngagement)
   }
 
   async function initialize(): Promise<void> {
@@ -77,7 +80,6 @@
       if (isUrlExcluded) return
 
       if (config?.custom_style) insertCustomStyle(config.custom_style || '')
-      if (config?.explore_navigation_selector) insertExploreIntoNavigation()
 
       setElements(config?.html_selector || '', config?.exclude_elements_selector || '')
     } catch(error) {
@@ -230,7 +232,7 @@
     </svelte:boundary>
   {/if}
 
-  <Debugger />
+  <Debugger onrerender={rerender} />
 </div>
 
 {#if response?.pixels?.length}
@@ -246,8 +248,7 @@
 <style lang="scss">
   @import url('$lib/scss/global.scss');
 
-  .playpilot-link-injections,
-  :global([data-playpilot-explore]) {
+  .playpilot-link-injections {
     :global(*) {
       box-sizing: border-box;
     }

package/src/routes/components/Ads/TopScroll.svelte

@@ -4,7 +4,7 @@
   import { SplitTest } from '$lib/enums/SplitTest'
   import { TrackingEvent } from '$lib/enums/TrackingEvent'
   import { imageFromUUID } from '$lib/image'
-  import { trackSplitTestView } from '$lib/splitTest'
+  import { isInSplitTestVariant, trackSplitTestView } from '$lib/splitTest'
   import { track } from '$lib/tracking'
   import type { Campaign } from '$lib/types/campaign'
   import Disclaimer from './Disclaimer.svelte'
@@ -22,6 +22,7 @@
   const { format, header, header_logo: logo, image_uuid: backgroundImageUUID } = $derived(content)
   const { header: buttonLabel, url: href } = $derived(cta)
 
+  const inline = isInSplitTestVariant(SplitTest.TopScrollFormat, 1)
   const simple = $derived(format === 'large')
 
   const backgroundImage = $derived(imageFromUUID(backgroundImageUUID, ImageDimensions.TopScrollBackground))
@@ -42,6 +43,7 @@
   target="_blank"
   class="top-scroll"
   class:simple
+  class:inline
   tabindex="-1"
   rel="sponsored"
   style:--width="{clientWidth}px">
@@ -79,13 +81,17 @@
     position: relative;
     display: block;
     width: 100%;
-    border-radius: $border-radius-size $border-radius-size 0 0;
+    border-radius: $border-radius-size;
     background: black;
     color: theme(top-scroll-text-color, white);
     font-family: theme(top-scroll-font-family, font-family);
     font-size: theme(top-scroll-font-size, font-size-base);
     text-decoration: none;
     line-height: 1.35;
+
+    &.inline {
+      border-radius: $border-radius-size $border-radius-size 0 0;
+    }
   }
 
   .content {
@@ -146,7 +152,7 @@
     right: 0;
     bottom: 0;
     left: 0;
-    border-radius: $border-radius-size $border-radius-size 0 0;
+    border-radius: $border-radius-size;
     background-image: var(--background);
     background-position: center;
     background-size: cover;
@@ -155,6 +161,10 @@
     .top-scroll:hover & {
       filter: brightness(1.15);
     }
+
+    .inline & {
+      border-radius: $border-radius-size $border-radius-size 0 0;
+    }
   }
 
   .content-image {
@@ -162,10 +172,14 @@
     max-width: 100%;
     height: auto;
     background: black;
-    border-radius: $border-radius-size $border-radius-size 0 0;
+    border-radius: $border-radius-size;
 
     .top-scroll:hover & {
       filter: brightness(1.15);
     }
+
+    .inline & {
+      border-radius: $border-radius-size $border-radius-size 0 0;
+    }
   }
 </style>

package/src/routes/components/Debugger.svelte

@@ -3,6 +3,12 @@
   import { getFullUrlPath } from '$lib/url'
   import { onDestroy } from 'svelte'
 
+  interface Props {
+    onrerender: () => void
+  }
+
+  const { onrerender }: Props = $props()
+
   const secrets = ['tpidebug', 'debugtpi']
   const lastInputs: string[] = []
   const isUsingBetaScript = !!document.querySelector('script[src*="scripts.playpilot.com/link-injection@next"]')
@@ -151,6 +157,8 @@
 
     <hr />
 
+    <button onclick={onrerender}>Re-inject</button>
+
     {#if isUsingBetaScript}
       <small>You are using the beta version of TPI</small>
     {:else}

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

@@ -1,11 +1,3 @@
-<script lang="ts">
-  interface Props {
-    size?: number
-  }
-
-  const { size = 16 }: Props = $props()
-</script>
-
-<svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
   <path d="M14 2L2 14M2 2L14 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/routes/components/ListTitle.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { titleUrl } from '$lib/routes'
   import { SplitTest } from '$lib/enums/SplitTest'
   import { t } from '$lib/localization'
   import { mergePlaylinks } from '$lib/playlink'
@@ -28,7 +29,7 @@
   }
 </script>
 
-<button class="title" {onclick} data-testid="title">
+<a class="title" href={titleUrl(title)} {onclick} data-testid="title">
   <div class="poster">
     <TitlePoster {title} width={30} height={43} lazy />
   </div>
@@ -80,7 +81,7 @@
   <div class="action">
     <IconArrow />
   </div>
-</button>
+</a>
 
 <style lang="scss">
   .title {
@@ -89,18 +90,18 @@
     align-items: center;
     width: 100%;
     background: theme(list-item-background, lighter);
-    padding: theme(list-item-padding, margin(0.5));
+    padding: margin(0.5);
     border: 0;
     border-radius: theme(list-item-border-radius, border-radius);
     text-decoration: none;
     font-style: normal !important;
-    font-family: theme(font-family);
-    cursor: pointer;
 
     &:hover {
       filter: brightness(theme(list-item-hover-filter-brightness, hover-filter-brightness));
-      background: theme(list-item-hover-background, lighter);
-      box-shadow: theme(list-item-hover-shadow, none);
+    }
+
+    &:last-child {
+      border-bottom: 0;
     }
   }
 

package/src/routes/components/Modal.svelte

@@ -6,6 +6,8 @@
   import SwipeHandle from './SwipeHandle.svelte'
   import { onMount, setContext, type Snippet } from 'svelte'
   import { prefersReducedMotion } from 'svelte/motion'
+  import { isInSplitTestVariant } from '$lib/splitTest'
+  import { SplitTest } from '$lib/enums/SplitTest'
   import { mobileBreakpoint } from '$lib/constants'
   import { destroyAllModals, getPreviousModal, goBackToPreviousModal } from '$lib/modal'
   import { focustrap } from '$lib/actions/focustrap'
@@ -32,6 +34,7 @@
     onclose = () => null,
   }: Props = $props()
 
+  const inlineBubble = isInSplitTestVariant(SplitTest.TopScrollFormat, 1)
   const historyHash = '#playpilot'
 
   let windowWidth = $state(0)
@@ -92,15 +95,15 @@
   onhashchange={close}
   bind:innerWidth={windowWidth} />
 
-<div class="modal" style:--dialog-offset="{dialogOffset}px" transition:fade|global={{ duration: 150 }} bind:this={modalElement} use:focustrap class:has-bubble={!!bubble} class:has-prepend={!!prepend}>
+<div class="modal" style:--dialog-offset="{dialogOffset}px" transition:fade|global={{ duration: 150 }} bind:this={modalElement} use:focustrap class:has-bubble={!!bubble && inlineBubble} class:has-prepend={!!prepend}>
   {#if prepend}
-    <div class="prepend" transition:scaleOrFly|global={{ y: -10 }} data-view-transition-new="playpilot-title-extra">
+    <div class="prepend" transition:scaleOrFly|global={{ y: window.innerHeight }} data-view-transition-new="playpilot-title-extra">
       {@render prepend()}
     </div>
   {/if}
 
   {#if bubble}
-    <div class="bubble" transition:scaleOrFly|global={{ y: window.innerHeight }} data-view-transition-new="playpilot-title-extra">
+    <div class="bubble" class:inline={inlineBubble} transition:scaleOrFly|global={{ y: window.innerHeight }} data-view-transition-new="playpilot-title-extra">
       {@render bubble()}
     </div>
   {/if}
@@ -282,13 +285,28 @@
   .bubble {
     z-index: 1;
     position: relative;
-    width: 100%;
+    width: calc(100% - margin(1));
     max-width: $max-width;
-    margin: auto 0 0;
+    margin: margin(0.5);
 
     @include desktop() {
       width: 100%;
-      margin-top: 0;
+      margin: 0 0 margin(0.5);
+    }
+
+    &.inline {
+      width: 100%;
+      margin: auto 0 0;
+
+      @include desktop() {
+        margin-top: 0;
+      }
+    }
+
+    .prepend + & {
+      &:not(.inline) {
+        margin-top: 0;
+      }
     }
   }
 </style>

package/src/routes/components/Share.svelte

@@ -9,7 +9,6 @@
   import IconShare from './Icons/IconShare.svelte'
   import IconLink from './Icons/IconLink.svelte'
   import IconEmail from './Icons/IconEmail.svelte'
-  import Button from './Button.svelte'
   import { onMount } from 'svelte'
 
   interface Props {
@@ -56,9 +55,9 @@
 <svelte:window onclick={() => showContextMenu = false} />
 
 <div class="share">
-  <Button onclick={toggle}>
-    <IconShare /> Share
-  </Button>
+  <button class="button" onclick={toggle} aria-label={t('Share')}>
+    <IconShare />
+  </button>
 
   {#if showContextMenu}
     <div class="context-menu" transition:scale={{ duration: 50, start: 0.85 }}>
@@ -80,11 +79,30 @@
     position: relative;
   }
 
+  .button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    appearance: none;
+    border: 0;
+    border-radius: margin(3);
+    aspect-ratio: 1 / 1;
+    background: transparent;
+    color: theme(detail-text-color-alt, text-color-alt);
+
+    &:hover {
+      color: theme(detail-text-color, text-color);
+      background: theme(share-button-hover-background, content);
+      box-shadow: 0 0 0 2px theme(share-button-hover-background, content);
+    }
+  }
+
   .context-menu {
     z-index: 10;
     position: absolute;
     bottom: calc(100% + margin(0.5));
-    left: 0;
+    right: 0;
     max-width: margin(15);
     border-radius: $border-radius;
     background: theme(detail-background, lighter);