@playpilot/tpi 8.29.4 → 8.29.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/editorial.mount.js +8 -8
  2. package/dist/link-injections.js +1 -1
  3. package/dist/mount.js +5 -5
  4. package/package.json +1 -1
  5. package/src/lib/api/ads.ts +1 -0
  6. package/src/routes/components/Explore/Routes/ExploreModal.svelte +111 -106
  7. package/src/tests/lib/api/ads.test.js +8 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@playpilot/tpi",
3
- "version": "8.29.4",
3
+ "version": "8.29.5",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "dev": "vite dev",
package/src/lib/api/ads.ts CHANGED
@@ -8,6 +8,7 @@ import { api } from './api'
8
8
 
9
9
  export async function fetchAds(): Promise<Campaign[]> {
10
10
  if (!hasConsentedTo('ads')) return []
11
+ if (window.PlayPilotLinkInjections.no_affiliate) return []
11
12
 
12
13
  const apiToken = getApiToken()
13
14
 
package/src/routes/components/Explore/Routes/ExploreModal.svelte CHANGED
@@ -1,106 +1,111 @@
1
- <script lang="ts">
2
- import { fetchParticipantBySid } from '$lib/api/participants'
3
- import { fetchSimilarTitles, fetchTitleBySid } from '$lib/api/titles'
4
- import { mobileBreakpoint } from '$lib/constants'
5
- import { SplitTest } from '$lib/enums/SplitTest'
6
- import { t } from '$lib/localization'
7
- import { openModal, type ModalType } from '$lib/modal'
8
- import { getSplitTestVariantName, trackSplitTestView } from '$lib/splitTest'
9
- import type { TitleData } from '$lib/types/title'
10
- import Modal from '../../Modals/Modal.svelte'
11
-
12
- interface Props {
13
- navigate?: (key: string, pushState?: boolean) => void
14
- }
15
-
16
- const { navigate = () => null }: Props = $props()
17
-
18
- async function openModalViaRoute(): Promise<void> {
19
- const currentUrl = new URL(document.location.toString())
20
- const sid = currentUrl.searchParams.get('sid')
21
-
22
- if (!sid) return
23
-
24
- let type: ModalType = sid.startsWith('pr') ? 'participant' : 'title' // Sids with with `pr` for participants, `ti` for titles
25
- let data: any = null
26
-
27
- if (type === 'title') {
28
- const isMobile = window.innerWidth < mobileBreakpoint
29
- const isInReelSplitTest = isMobile && getSplitTestVariantName(SplitTest.Reels) === 'Reel'
30
-
31
- if (isMobile) trackSplitTestView(SplitTest.Reels)
32
-
33
- type = isMobile && isInReelSplitTest ? 'titles-reel' : 'titles-rail'
34
-
35
- const [title, railTitles] = (await Promise.allSettled([fetchTitleBySid(sid), fetchSimilarTitles({ sid } as unknown as TitleData)])).map((promise) => promise.status === 'fulfilled' ? promise.value : null)
36
-
37
- data = [title as TitleData, ...(railTitles as TitleData[])]
38
- } else if (type === 'participant') {
39
- data = await fetchParticipantBySid(sid)
40
- }
41
-
42
- openModal({
43
- type,
44
- data,
45
- props: {
46
- onclose: () => navigate('home'),
47
- pushState: false,
48
- },
49
- })
50
- }
51
- </script>
52
-
53
- {#await openModalViaRoute()}
54
- <Modal blur pushState={false}>
55
- {#snippet dialog()}
56
- <div class="loading">
57
- <div class="bar"></div>
58
- <div class="bar"></div>
59
- <div class="bar"></div>
60
- </div>
61
- {/snippet}
62
- </Modal>
63
- {:catch}
64
- <Modal blur onclose={() => navigate('home')} pushState={false}>
65
- <div class="error">
66
- {t('An Error Occurred')}
67
- </div>
68
- </Modal>
69
- {/await}
70
-
71
- <style lang="scss">
72
- .loading {
73
- display: flex;
74
- align-items: center;
75
- justify-content: center;
76
- height: 100%;
77
- gap: margin(0.5);
78
- }
79
-
80
- @keyframes animate-bar {
81
- to {
82
- height: margin(3);
83
- opacity: 0.5;
84
- }
85
- }
86
-
87
- .bar {
88
- height: margin(4);
89
- width: margin(1);
90
- border-radius: margin(0.25);
91
- background: white;
92
- animation: animate-bar 750ms infinite;
93
-
94
- @for $i from 0 through 2 {
95
- &:nth-child(#{$i}) {
96
- animation-delay: $i * 250ms;
97
- }
98
- }
99
- }
100
-
101
- .error {
102
- padding: margin(2);
103
- font-size: 1.25em;
104
- color: theme(text-color);
105
- }
106
- </style>
1
+ <script lang="ts">
2
+ import { fetchAds } from '$lib/api/ads'
3
+ import { fetchParticipantBySid } from '$lib/api/participants'
4
+ import { fetchSimilarTitles, fetchTitleBySid } from '$lib/api/titles'
5
+ import { mobileBreakpoint } from '$lib/constants'
6
+ import { SplitTest } from '$lib/enums/SplitTest'
7
+ import { t } from '$lib/localization'
8
+ import { openModal, type ModalType } from '$lib/modal'
9
+ import { getSplitTestVariantName, trackSplitTestView } from '$lib/splitTest'
10
+ import type { Campaign } from '$lib/types/campaign'
11
+ import type { TitleData } from '$lib/types/title'
12
+ import Modal from '../../Modals/Modal.svelte'
13
+
14
+ interface Props {
15
+ navigate?: (key: string, pushState?: boolean) => void
16
+ }
17
+
18
+ const { navigate = () => null }: Props = $props()
19
+
20
+ async function openModalViaRoute(): Promise<void> {
21
+ const currentUrl = new URL(document.location.toString())
22
+ const sid = currentUrl.searchParams.get('sid')
23
+
24
+ if (!sid) return
25
+
26
+ let type: ModalType = sid.startsWith('pr') ? 'participant' : 'title' // Sids with with `pr` for participants, `ti` for titles
27
+ let data: any = null
28
+
29
+ if (type === 'title') {
30
+ const isMobile = window.innerWidth < mobileBreakpoint
31
+ const isInReelSplitTest = isMobile && getSplitTestVariantName(SplitTest.Reels) === 'Reel'
32
+
33
+ if (isMobile) trackSplitTestView(SplitTest.Reels)
34
+
35
+ type = isMobile && isInReelSplitTest ? 'titles-reel' : 'titles-rail'
36
+
37
+ const [ads, title, railTitles] = (await Promise.allSettled([fetchAds(), fetchTitleBySid(sid), fetchSimilarTitles({ sid } as unknown as TitleData)])).map((promise) =>
38
+ promise.status === 'fulfilled' ? promise.value : null,
39
+ )
40
+
41
+ window.PlayPilotLinkInjections.ads = ads as Campaign[]
42
+ data = [title as TitleData, ...(railTitles as TitleData[])]
43
+ } else if (type === 'participant') {
44
+ data = await fetchParticipantBySid(sid)
45
+ }
46
+
47
+ openModal({
48
+ type,
49
+ data,
50
+ props: {
51
+ onclose: () => navigate('home'),
52
+ pushState: false,
53
+ },
54
+ })
55
+ }
56
+ </script>
57
+
58
+ {#await openModalViaRoute()}
59
+ <Modal blur pushState={false}>
60
+ {#snippet dialog()}
61
+ <div class="loading">
62
+ <div class="bar"></div>
63
+ <div class="bar"></div>
64
+ <div class="bar"></div>
65
+ </div>
66
+ {/snippet}
67
+ </Modal>
68
+ {:catch}
69
+ <Modal blur onclose={() => navigate('home')} pushState={false}>
70
+ <div class="error">
71
+ {t('An Error Occurred')}
72
+ </div>
73
+ </Modal>
74
+ {/await}
75
+
76
+ <style lang="scss">
77
+ .loading {
78
+ display: flex;
79
+ align-items: center;
80
+ justify-content: center;
81
+ height: 100%;
82
+ gap: margin(0.5);
83
+ }
84
+
85
+ @keyframes animate-bar {
86
+ to {
87
+ height: margin(3);
88
+ opacity: 0.5;
89
+ }
90
+ }
91
+
92
+ .bar {
93
+ height: margin(4);
94
+ width: margin(1);
95
+ border-radius: margin(0.25);
96
+ background: white;
97
+ animation: animate-bar 750ms infinite;
98
+
99
+ @for $i from 0 through 2 {
100
+ &:nth-child(#{$i}) {
101
+ animation-delay: $i * 250ms;
102
+ }
103
+ }
104
+ }
105
+
106
+ .error {
107
+ padding: margin(2);
108
+ font-size: 1.25em;
109
+ color: theme(text-color);
110
+ }
111
+ </style>
package/src/tests/lib/api/ads.test.js CHANGED
@@ -58,6 +58,14 @@ describe('$lib/api/ads', () => {
58
58
  expect(api).not.toHaveBeenCalled()
59
59
  })
60
60
 
61
+ it('Should not call api if no_affiliate is true', async () => {
62
+ // @ts-ignore
63
+ window.PlayPilotLinkInjections = { no_affiliate: true }
64
+
65
+ await fetchAds()
66
+ expect(api).not.toHaveBeenCalled()
67
+ })
68
+
61
69
  it('Should fire track event when ads failed to fetch', async () => {
62
70
  vi.mocked(api).mockRejectedValueOnce({ ok: false, status: 505 })
63
71