@playpilot/tpi 8.29.0-beta.8 → 8.29.0
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.
package/package.json
CHANGED
|
@@ -28,13 +28,7 @@ export async function fetchParticipantsForTitle(title: TitleData): Promise<Parti
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
export async function fetchParticipantBySid(sid: string): Promise<ParticipantData> {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
return participants[0]
|
|
34
|
-
|
|
35
|
-
const data = await api<{ results: ParticipantData[] }>(`/participants/browse?api-token=${getApiToken()}&sids=${sid}`)
|
|
36
|
-
|
|
37
|
-
const participant = data.results[0]
|
|
31
|
+
const participant = await api<ParticipantData>(`/participants/${sid}?api-token=${getApiToken()}`)
|
|
38
32
|
|
|
39
33
|
if (!participant) throw new Error('No participant was returned for sid: ' + sid)
|
|
40
34
|
|
|
@@ -1,106 +1,106 @@
|
|
|
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 { 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>
|