@playpilot/tpi 5.34.1 → 6.0.0-beta.explore.15

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "5.34.1",
+	"version": "6.0.0-beta.explore.15",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/api/titles.ts

@@ -1,9 +1,21 @@
 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 api<{ results: TitleData[] }>(`/titles/browse?api-token=${getApiToken()}&related_to_sid=${title.sid}`)
+  const response = await fetchTitles({ related_to_sid: title.sid })
 
   return response.results
 }

package/src/lib/data/countries.json

@@ -0,0 +1,216 @@
+[
+  { "label": "Aruba", "value": "AW" },
+  { "label": "Afghanistan", "value": "AF" },
+  { "label": "Angola", "value": "AO" },
+  { "label": "Anguilla", "value": "AI" },
+  { "label": "Albania", "value": "AL" },
+  { "label": "Andorra", "value": "AD" },
+  { "label": "United Arab Emirates", "value": "AE" },
+  { "label": "Argentina", "value": "AR" },
+  { "label": "Armenia", "value": "AM" },
+  { "label": "American Samoa", "value": "AS" },
+  { "label": "Antigua and Barbuda", "value": "AG" },
+  { "label": "Australia", "value": "AU" },
+  { "label": "Austria", "value": "AT" },
+  { "label": "Azerbaijan", "value": "AZ" },
+  { "label": "Burundi", "value": "BI" },
+  { "label": "Belgium", "value": "BE" },
+  { "label": "Benin", "value": "BJ" },
+  { "label": "Burkina Faso", "value": "BF" },
+  { "label": "Bangladesh", "value": "BD" },
+  { "label": "Bulgaria", "value": "BG" },
+  { "label": "Bahrain", "value": "BH" },
+  { "label": "Bahamas", "value": "BS" },
+  { "label": "Bosnia and Herzegovina", "value": "BA" },
+  { "label": "Belarus", "value": "BY" },
+  { "label": "Belize", "value": "BZ" },
+  { "label": "Bermuda", "value": "BM" },
+  { "label": "Bolivia", "value": "BO" },
+  { "label": "Brazil", "value": "BR" },
+  { "label": "Barbados", "value": "BB" },
+  { "label": "Brunei", "value": "BN" },
+  { "label": "Bhutan", "value": "BT" },
+  { "label": "Botswana", "value": "BW" },
+  { "label": "Central African Republic", "value": "CF" },
+  { "label": "Canada", "value": "CA" },
+  { "label": "Switzerland", "value": "CH" },
+  { "label": "Chile", "value": "CL" },
+  { "label": "China", "value": "CN" },
+  { "label": "Côte d'Ivoire", "value": "CI" },
+  { "label": "Cameroon", "value": "CM" },
+  { "label": "DR Congo", "value": "CD" },
+  { "label": "Congo", "value": "CG" },
+  { "label": "Cook Islands", "value": "CK" },
+  { "label": "Colombia", "value": "CO" },
+  { "label": "Comoros", "value": "KM" },
+  { "label": "Cabo Verde", "value": "CV" },
+  { "label": "Costa Rica", "value": "CR" },
+  { "label": "Cuba", "value": "CU" },
+  { "label": "Curaçao", "value": "CW" },
+  { "label": "Cayman Islands", "value": "KY" },
+  { "label": "Cyprus", "value": "CY" },
+  { "label": "Czechia", "value": "CZ" },
+  { "label": "Germany", "value": "DE" },
+  { "label": "Djibouti", "value": "DJ" },
+  { "label": "Dominica", "value": "DM" },
+  { "label": "Denmark", "value": "DK" },
+  { "label": "Dominican Republic", "value": "DO" },
+  { "label": "Algeria", "value": "DZ" },
+  { "label": "Ecuador", "value": "EC" },
+  { "label": "Egypt", "value": "EG" },
+  { "label": "Eritrea", "value": "ER" },
+  { "label": "Spain", "value": "ES" },
+  { "label": "Estonia", "value": "EE" },
+  { "label": "Ethiopia", "value": "ET" },
+  { "label": "Finland", "value": "FI" },
+  { "label": "Fiji", "value": "FJ" },
+  { "label": "Falkland Islands", "value": "FK" },
+  { "label": "France", "value": "FR" },
+  { "label": "Faroe Islands", "value": "FO" },
+  { "label": "Micronesia", "value": "FM" },
+  { "label": "Gabon", "value": "GA" },
+  { "label": "United Kingdom", "value": "GB" },
+  { "label": "Georgia", "value": "GE" },
+  { "label": "Ghana", "value": "GH" },
+  { "label": "Gibraltar", "value": "GI" },
+  { "label": "Guinea", "value": "GN" },
+  { "label": "Guadeloupe", "value": "GP" },
+  { "label": "Gambia", "value": "GM" },
+  { "label": "Guinea-Bissau", "value": "GW" },
+  { "label": "Equatorial Guinea", "value": "GQ" },
+  { "label": "Greece", "value": "GR" },
+  { "label": "Grenada", "value": "GD" },
+  { "label": "Greenland", "value": "GL" },
+  { "label": "Guatemala", "value": "GT" },
+  { "label": "Guyana", "value": "GY" },
+  { "label": "Hong Kong", "value": "HK" },
+  { "label": "Honduras", "value": "HN" },
+  { "label": "Croatia", "value": "HR" },
+  { "label": "Haiti", "value": "HT" },
+  { "label": "Hungary", "value": "HU" },
+  { "label": "Indonesia", "value": "ID" },
+  { "label": "India", "value": "IN" },
+  { "label": "Ireland", "value": "IE" },
+  { "label": "Iran", "value": "IR" },
+  { "label": "Iraq", "value": "IQ" },
+  { "label": "Iceland", "value": "IS" },
+  { "label": "Israel", "value": "IL" },
+  { "label": "Italy", "value": "IT" },
+  { "label": "Jamaica", "value": "JM" },
+  { "label": "Jordan", "value": "JO" },
+  { "label": "Japan", "value": "JP" },
+  { "label": "Kazakhstan", "value": "KZ" },
+  { "label": "Kenya", "value": "KE" },
+  { "label": "Kyrgyzstan", "value": "KG" },
+  { "label": "Cambodia", "value": "KH" },
+  { "label": "Kiribati", "value": "KI" },
+  { "label": "Saint Kitts and Nevis", "value": "KN" },
+  { "label": "South Korea", "value": "KR" },
+  { "label": "Kuwait", "value": "KW" },
+  { "label": "Laos", "value": "LA" },
+  { "label": "Lebanon", "value": "LB" },
+  { "label": "Liberia", "value": "LR" },
+  { "label": "Libya", "value": "LY" },
+  { "label": "Saint Lucia", "value": "LC" },
+  { "label": "Liechtenstein", "value": "LI" },
+  { "label": "Sri Lanka", "value": "LK" },
+  { "label": "Lesotho", "value": "LS" },
+  { "label": "Lithuania", "value": "LT" },
+  { "label": "Luxembourg", "value": "LU" },
+  { "label": "Latvia", "value": "LV" },
+  { "label": "Macao", "value": "MO" },
+  { "label": "Morocco", "value": "MA" },
+  { "label": "Monaco", "value": "MC" },
+  { "label": "Moldova", "value": "MD" },
+  { "label": "Madagascar", "value": "MG" },
+  { "label": "Maldives", "value": "MV" },
+  { "label": "Mexico", "value": "MX" },
+  { "label": "Marshall Islands", "value": "MH" },
+  { "label": "North Macedonia", "value": "MK" },
+  { "label": "Mali", "value": "ML" },
+  { "label": "Malta", "value": "MT" },
+  { "label": "Myanmar", "value": "MM" },
+  { "label": "Montenegro", "value": "ME" },
+  { "label": "Mongolia", "value": "MN" },
+  { "label": "Mozambique", "value": "MZ" },
+  { "label": "Mauritania", "value": "MR" },
+  { "label": "Martinique", "value": "MQ" },
+  { "label": "Mauritius", "value": "MU" },
+  { "label": "Malawi", "value": "MW" },
+  { "label": "Malaysia", "value": "MY" },
+  { "label": "Namibia", "value": "NA" },
+  { "label": "New Caledonia", "value": "NC" },
+  { "label": "Niger", "value": "NE" },
+  { "label": "Nigeria", "value": "NG" },
+  { "label": "Nicaragua", "value": "NI" },
+  { "label": "Niue", "value": "NU" },
+  { "label": "Netherlands", "value": "NL" },
+  { "label": "Norway", "value": "NO" },
+  { "label": "Nepal", "value": "NP" },
+  { "label": "Nauru", "value": "NR" },
+  { "label": "New Zealand", "value": "NZ" },
+  { "label": "Oman", "value": "OM" },
+  { "label": "Pakistan", "value": "PK" },
+  { "label": "Panama", "value": "PA" },
+  { "label": "Peru", "value": "PE" },
+  { "label": "Philippines", "value": "PH" },
+  { "label": "Palau", "value": "PW" },
+  { "label": "Papua New Guinea", "value": "PG" },
+  { "label": "Poland", "value": "PL" },
+  { "label": "Puerto Rico", "value": "PR" },
+  { "label": "North Korea", "value": "KP" },
+  { "label": "Portugal", "value": "PT" },
+  { "label": "Paraguay", "value": "PY" },
+  { "label": "Palestine", "value": "PS" },
+  { "label": "French Polynesia", "value": "PF" },
+  { "label": "Qatar", "value": "QA" },
+  { "label": "Romania", "value": "RO" },
+  { "label": "Russian Federation", "value": "RU" },
+  { "label": "Rwanda", "value": "RW" },
+  { "label": "Saudi Arabia", "value": "SA" },
+  { "label": "Sudan", "value": "SD" },
+  { "label": "Senegal", "value": "SN" },
+  { "label": "Singapore", "value": "SG" },
+  { "label": "Solomon Islands", "value": "SB" },
+  { "label": "Sierra Leone", "value": "SL" },
+  { "label": "El Salvador", "value": "SV" },
+  { "label": "San Marino", "value": "SM" },
+  { "label": "Somalia", "value": "SO" },
+  { "label": "Serbia", "value": "RS" },
+  { "label": "South Sudan", "value": "SS" },
+  { "label": "São Tomé and Príncipe", "value": "ST" },
+  { "label": "Suriname", "value": "SR" },
+  { "label": "Slovakia", "value": "SK" },
+  { "label": "Slovenia", "value": "SI" },
+  { "label": "Sweden", "value": "SE" },
+  { "label": "Eswatini", "value": "SZ" },
+  { "label": "Seychelles", "value": "SC" },
+  { "label": "Syria", "value": "SY" },
+  { "label": "Chad", "value": "TD" },
+  { "label": "Togo", "value": "TG" },
+  { "label": "Thailand", "value": "TH" },
+  { "label": "Tajikistan", "value": "TJ" },
+  { "label": "Turkmenistan", "value": "TM" },
+  { "label": "Timor-Leste", "value": "TL" },
+  { "label": "Tonga", "value": "TO" },
+  { "label": "Trinidad and Tobago", "value": "TT" },
+  { "label": "Tunisia", "value": "TN" },
+  { "label": "Turkey", "value": "TR" },
+  { "label": "Tuvalu", "value": "TV" },
+  { "label": "Taiwan", "value": "TW" },
+  { "label": "Tanzania", "value": "TZ" },
+  { "label": "Uganda", "value": "UG" },
+  { "label": "Ukraine", "value": "UA" },
+  { "label": "Uruguay", "value": "UY" },
+  { "label": "United States", "value": "US" },
+  { "label": "Uzbekistan", "value": "UZ" },
+  { "label": "Saint Vincent and the Grenadines", "value": "VC" },
+  { "label": "Venezuela", "value": "VE" },
+  { "label": "Vietnam", "value": "VN" },
+  { "label": "Vanuatu", "value": "VU" },
+  { "label": "Samoa", "value": "WS" },
+  { "label": "Yemen", "value": "YE" },
+  { "label": "South Africa", "value": "ZA" },
+  { "label": "Zambia", "value": "ZM" },
+  { "label": "Zimbabwe", "value": "ZW" }
+]

package/src/lib/data/translations.ts

@@ -126,6 +126,11 @@ 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

@@ -4,11 +4,6 @@ export const SplitTest = {
     numberOfVariants: 2,
     variantNames: ['Separated', 'Inline'] as string[],
   },
-  ParticipantPlaylinkFormat: {
-    key: 'participant_playlink_format',
-    numberOfVariants: 2,
-    variantNames: ['Image', 'Label'] as string[],
-  },
   InTextEngagement: {
     key: 'in-text-engagement',
     numberOfVariants: 4,
@@ -18,5 +13,5 @@ export const SplitTest = {
     key: 'user_time_spent',
     numberOfVariants: 10,
     variantNames: ['No Links', 'Default', 'Default', 'Default', 'Default', 'Default', 'Default', 'Default', 'Default', 'Default'] as string[],
-  }
+  },
 } as const

package/src/lib/explore.ts

@@ -0,0 +1,59 @@
+import { mount, unmount } from 'svelte'
+import Explore from '../routes/components/Explore/Explore.svelte'
+
+export const exploreParentSelector = `[data-playpilot-explore]`
+
+let exploreInsertedComponent: object | null = null
+
+/**
+ * Insert the Explore component inside of the needed selector. If no element is found, do nothing.
+ * Only one Explore component can exist per page.
+ */
+export function insertExplore(): void {
+  const target = document.querySelector<HTMLElement>(exploreParentSelector)
+  if (!target) return
+
+  destroyExplore()
+
+  target.innerHTML = ''
+  exploreInsertedComponent = mount(Explore, { target })
+}
+
+export function destroyExplore(): void {
+  if (!exploreInsertedComponent) return
+
+  unmount(exploreInsertedComponent)
+  exploreInsertedComponent = null
+}
+
+/**
+ * Copy over an existing element on the page given by the selector. This will link to a page that is
+ * set up by the third party to hold the explore component.
+ * @returns Whether or not the component was succesfully inserted
+ */
+export function insertExploreIntoNavigation(): boolean {
+  const config = window.PlayPilotLinkInjections.config
+  if (!config) return false
+
+  const { explore_navigation_selector: selector, explore_navigation_label: label, explore_navigation_path: path, explore_navigation_insert_position: insertPosition } = window.PlayPilotLinkInjections.config
+  if (!selector) return false
+
+  // Make sure to remove an element we created if it already exists. Should not be possible under normal circumstances.
+  document.querySelector('[data-playpilot-explore-navigation-element]')?.remove()
+
+  const navigationElement = document.querySelector<HTMLElement>(selector)
+  if (!navigationElement) return false
+
+  const copiedElement = navigationElement.cloneNode(true) as HTMLElement
+  const linkElement = (copiedElement.nodeName === 'A' ? copiedElement : copiedElement.querySelector('a')) as HTMLLinkElement
+
+  linkElement.classList.remove('active')
+  linkElement.innerText = label || 'Streaming Guide'
+  linkElement.href = path
+
+  copiedElement.dataset.playpilotExploreNavigationElement = 'true'
+
+  navigationElement.insertAdjacentElement(insertPosition || 'afterend', copiedElement)
+
+  return true
+}

package/src/lib/fakeData.ts

@@ -38,6 +38,7 @@ 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/modal.ts

@@ -1,11 +1,12 @@
 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 TitleModal from "../routes/components/TitleModal.svelte"
+import ParticipantModal from "../routes/components/ParticipantModal.svelte"
+import ExploreModal from "../routes/components/Explore/ExploreModal.svelte"
 import { getPlayPilotWrapperElement, keyDataAttribute, keySelector } from "./injection"
 import { playFallbackViewTransition } from "./viewTransition"
 import { destroyLinkPopover } from "./popover"
@@ -13,7 +14,7 @@ import { prefersReducedMotion } from "svelte/motion"
 import { trackSplitTestAction } from "./splitTest"
 import { SplitTest } from "./enums/SplitTest"
 
-type ModalType = 'title' | 'participant'
+type ModalType = 'title' | 'participant' | 'explore'
 
 type Modal = {
   injection?: LinkInjection | null
@@ -51,9 +52,9 @@ export function openModal(
 }
 
 function getModalComponentByType({ type = 'title', target, data, props = {} }: { type: ModalType, target: Element, data: TitleData | ParticipantData | null, props?: Record<string, any> }) {
-  return type === 'title' ?
-    mount(TitleModal, { target, props: { title: data as TitleData, ...props } }) :
-    mount(ParticipantModal, { target, props: { participant: data as ParticipantData, ...props  } })
+  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 } })
 }
 
 function addModalToList({ type = 'title', injection = null, data, scrollPosition = 0, component }: Modal) {

package/src/lib/scss/global.scss

@@ -60,9 +60,7 @@
 .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/trailer.ts

@@ -0,0 +1,22 @@
+import { mount, unmount } from "svelte"
+import { getPlayPilotWrapperElement } from "./injection"
+import type { TitleData } from "./types/title"
+import YouTubeEmbedOverlay from "../routes/components/YouTubeEmbedOverlay.svelte"
+
+let currentTrailerComponent: object | null = {}
+
+export function openTrailerOverlay(title: TitleData) {
+  const target = getPlayPilotWrapperElement()
+  // !! Temporarily falls back to a placeholder is while embeddable_url is not yet present
+  const props = { onclose: closeTrailerOverlay, embeddable_url: title.embeddable_url || 'https://www.youtube.com/watch?v=xGTq0blCPVQ' }
+
+  currentTrailerComponent = mount(YouTubeEmbedOverlay, { target, props })
+}
+
+export function closeTrailerOverlay(): void {
+  if (!currentTrailerComponent) return
+
+  unmount(currentTrailerComponent, { outro: true })
+
+  currentTrailerComponent = null
+}

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

@@ -0,0 +1,6 @@
+export type APIPaginatedResult<T> = {
+  next: string | null
+  previous: string | null
+  results: T[]
+  count?: number
+}

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

@@ -39,4 +39,16 @@ 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/filter.d.ts

@@ -0,0 +1,2 @@
+// TODO: Add proper filter types
+export type ExploreFilter = Record<string, string>

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

@@ -1,6 +1,8 @@
 import type { ParticipantData } from './participant'
 import type { PlaylinkData } from './playlink'
 
+export type ContentType = 'movie' | 'series'
+
 export type TitleData = {
   sid: string
   slug: string
@@ -9,7 +11,7 @@ export type TitleData = {
   genres: string[]
   year: number
   imdb_score: number
-  type: 'movie' | 'series'
+  type: ContentType
   providers: PlaylinkData[]
   description: string | null
   small_poster: string
@@ -17,6 +19,7 @@ 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,6 +8,7 @@
   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, getSplitTestVariantName } from '$lib/splitTest'
   import { SplitTest } from '$lib/enums/SplitTest'
@@ -44,6 +45,8 @@
     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.
@@ -80,6 +83,7 @@
       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) {
@@ -254,7 +258,8 @@
 <style lang="scss">
   @import url('$lib/scss/global.scss');
 
-  .playpilot-link-injections {
+  .playpilot-link-injections,
+  :global([data-playpilot-explore]) {
     :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 { isInSplitTestVariant, trackSplitTestView } from '$lib/splitTest'
+  import { trackSplitTestView } from '$lib/splitTest'
   import { track } from '$lib/tracking'
   import type { Campaign } from '$lib/types/campaign'
   import Disclaimer from './Disclaimer.svelte'
@@ -22,7 +22,6 @@
   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))
@@ -43,7 +42,6 @@
   target="_blank"
   class="top-scroll"
   class:simple
-  class:inline
   tabindex="-1"
   rel="sponsored"
   style:--width="{clientWidth}px">
@@ -81,17 +79,13 @@
     position: relative;
     display: block;
     width: 100%;
-    border-radius: $border-radius-size;
+    border-radius: $border-radius-size $border-radius-size 0 0;
     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 {
@@ -152,7 +146,7 @@
     right: 0;
     bottom: 0;
     left: 0;
-    border-radius: $border-radius-size;
+    border-radius: $border-radius-size $border-radius-size 0 0;
     background-image: var(--background);
     background-position: center;
     background-size: cover;
@@ -161,10 +155,6 @@
     .top-scroll:hover & {
       filter: brightness(1.15);
     }
-
-    .inline & {
-      border-radius: $border-radius-size $border-radius-size 0 0;
-    }
   }
 
   .content-image {
@@ -172,14 +162,10 @@
     max-width: 100%;
     height: auto;
     background: black;
-    border-radius: $border-radius-size;
+    border-radius: $border-radius-size $border-radius-size 0 0;
 
     .top-scroll:hover & {
       filter: brightness(1.15);
     }
-
-    .inline & {
-      border-radius: $border-radius-size $border-radius-size 0 0;
-    }
   }
 </style>