@playpilot/tpi 8.19.1 → 8.21.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.19.1",
+	"version": "8.21.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@@ -16,7 +16,7 @@
 		"release": "node release.js"
 	},
 	"devDependencies": {
-		"@playpilot/retargeting-tracking": "^1.2.0",
+		"@playpilot/retargeting-tracking": "^1.3.2",
 		"@sveltejs/adapter-auto": "^7.0.1",
 		"@sveltejs/kit": "^2.56.1",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",

package/src/lib/api/region.ts

@@ -1,6 +1,7 @@
 import { SupportedRegion } from '$lib/enums/Region'
 import { TrackingEvent } from '$lib/enums/TrackingEvent'
 import { track } from '$lib/tracking'
+import { RETARGETING_REGION_KEY } from '@playpilot/retargeting-tracking'
 
 export async function getRegionBasedOnIp(timeout = 5000): Promise<string> {
   const savedRegion = window.PlayPilotLinkInjections?.region
@@ -41,4 +42,7 @@ function setSavedRegion(region: string): void {
   if (!window.PlayPilotLinkInjections) return
 
   window.PlayPilotLinkInjections.region = region
+
+  // @ts-ignore
+  window[RETARGETING_REGION_KEY] = region
 }

package/src/routes/+page.svelte

@@ -12,6 +12,8 @@
   import { authorize, getAuthToken, isEditorialModeEnabled, removeAuthCookie, setEditorialParamInUrl } from '$lib/api/auth'
   import { getPageTextAndElements } from '$lib/injectionElements'
   import type { LinkInjectionResponse, LinkInjection, LinkInjectionTypes } from '$lib/types/injection'
+  import { getRegionBasedOnIp } from '$lib/api/region'
+  import { isPixelAllowed } from '$lib/pixel'
   import Editor from './components/Editorial/Editor.svelte'
   import EditorTrigger from './components/Editorial/EditorTrigger.svelte'
   import Alert from './components/Editorial/Alert.svelte'
@@ -81,6 +83,8 @@
       isUrlExcluded = isUrlExcludedViaConfig(config)
       if (isUrlExcluded) return
 
+      if (isPixelAllowed()) await getRegionBasedOnIp()
+
       if (config?.html_selector) window.PlayPilotLinkInjections.selector = config?.html_selector
     } catch(error) {
       // We return if the config did not get fetched properly, as we can't determine what should and should

package/src/routes/components/Explore/Routes/ExploreHome.svelte

@@ -15,7 +15,7 @@
   const rails: { heading: string, params: Record<string, any>, properties: Record<string, any> }[] = [{
     heading: 'List: Upcoming',
     params: { from_playlist_sid: 'li42wf', region: null, no_region_filter: true },
-    properties: {},
+    properties: { expandable: true },
   }, {
     heading: 'List: Trending',
     params: { ordering: Sorting.Popular },

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

@@ -7,6 +7,7 @@
   import RoundButton from '../RoundButton.svelte'
   import IconClose from '../Icons/IconClose.svelte'
   import IconArrow from '../Icons/IconArrow.svelte'
+  import Button from '../Button.svelte'
 
   interface Props {
     items: Record<string, any>[]
@@ -28,7 +29,7 @@
       if (initialIndex !== 0) slider?.setIndex(initialIndex)
 
       requestAnimationFrame(() => {
-        slider.reposition()
+        slider?.reposition()
 
         initialized = true
       })
@@ -75,6 +76,15 @@
       </TinySlider>
     </div>
 
+    {#if window.location.href.includes('route=modal')}
+      <div class="back">
+        <Button variant="link" onclick={() => { onclose(); destroyAllModals() }}>
+          <IconArrow direction="left" />
+          Streaming guide
+        </Button>
+      </div>
+    {/if}
+
     <div class="close" transition:scale|global>
       <RoundButton size="42px" onclick={() => { onclose(); destroyAllModals() }} aria-label="Close">
         <IconClose size={24} />
@@ -159,7 +169,7 @@
 
     @include desktop {
       height: auto;
-      max-height: 90vh;
+      max-height: 85vh;
       border-radius: theme(rail-modal-item-border-radius, border-radius-huge);
     }
 
@@ -176,6 +186,31 @@
     right: margin(1);
   }
 
+  .back {
+    position: absolute;
+    top: margin(1.5);
+    left: calc((100vw - $size) / 2);
+    font-family: theme(font-family);
+    transition: transform 50ms;
+
+    @include desktop {
+      left: margin(1);
+    }
+
+    &:hover {
+      transform: scale(1.025);
+
+      :global(button) {
+        text-decoration-thickness: 2px;
+      }
+    }
+
+    :global(button) {
+      text-decoration: underline;
+      color: white;
+    }
+  }
+
   .arrow {
     --offset: #{margin(-1.25)};
     --scale: 1;

package/src/routes/components/YouTubeEmbed.svelte

@@ -64,6 +64,8 @@
 
 <style lang="scss">
   iframe {
+    z-index: -1;
+    position: relative;
     width: 100%;
     height: 100%;
   }