@streamscloud/embeddable 14.0.2 → 15.0.0-rc.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/dist/core/analytics.installation-id.d.ts +5 -0
- package/dist/core/{analytics.profile-id.js → analytics.installation-id.js} +20 -10
- package/dist/external-api/data-providers/internal-media-center-analytics-handler.d.ts +14 -14
- package/dist/external-api/data-providers/internal-media-center-analytics-handler.js +170 -19
- package/dist/external-api/data-providers/internal-post-analytics-handler.d.ts +7 -7
- package/dist/external-api/data-providers/internal-post-analytics-handler.js +72 -11
- package/dist/external-api/data-providers/internal-stream-analytics-handler.d.ts +12 -13
- package/dist/external-api/data-providers/internal-stream-analytics-handler.js +162 -18
- package/dist/external-api/data-providers/mapper.d.ts +3 -0
- package/dist/external-api/data-providers/mapper.js +18 -0
- package/dist/external-api/data-providers/post-data-loaders/mapper.js +1 -3
- package/dist/media-center/media-center/discover/discover-view.svelte +33 -11
- package/dist/media-center/media-center/menu/menu.svelte +5 -3
- package/dist/media-center/media-center/streams-in-category/streams-in-category-panel.svelte +6 -2
- package/dist/posts/posts-player/posts-player-view.svelte +2 -5
- package/dist/posts/posts-player/types.d.ts +3 -5
- package/dist/streams/streams-player/streams-player-view.svelte +0 -3
- package/dist/streams/streams-player/types.d.ts +0 -1
- package/dist/ui/button/resources/button-theme.svelte +4 -2
- package/dist/ui/icon/cmp.icon.svelte +1 -1
- package/dist/ui/player/button/cmp.player-button.svelte +3 -1
- package/dist/ui/player/button/cmp.player-buttons-group.svelte +3 -1
- package/dist/ui/player/player/cmp.player.svelte.d.ts +15 -6
- package/dist/ui/player/player/controls-and-attachments.svelte.d.ts +15 -6
- package/dist/ui/player/player/overview-panel.svelte +3 -1
- package/dist/ui/player/player/overview-panel.svelte.d.ts +14 -5
- package/dist/ui/player/slider/cmp.player-slider.svelte.d.ts +14 -5
- package/dist/ui/player/slider-horizontal/cmp.slider.svelte +6 -2
- package/dist/ui/player/slider-horizontal/cmp.slider.svelte.d.ts +12 -5
- package/dist/ui/shadow-dom/cmp.shadow-root.svelte +2 -2
- package/package.json +2 -2
- package/dist/core/analytics.profile-id.d.ts +0 -5
|
@@ -1,19 +1,29 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Key used for storing the
|
|
2
|
+
* Key used for storing the installation ID in local storage (new)
|
|
3
|
+
*/
|
|
4
|
+
const INSTALLATION_ID_STORAGE_KEY = 'streamscloud_installation_id';
|
|
5
|
+
/**
|
|
6
|
+
* Legacy key used for storing the profile ID in local storage (to be migrated)
|
|
3
7
|
*/
|
|
4
8
|
const PROFILE_ID_STORAGE_KEY = 'streamscloud_profile_id';
|
|
5
9
|
/**
|
|
6
|
-
* Retrieves the
|
|
7
|
-
* @returns The
|
|
10
|
+
* Retrieves the installation ID from localStorage or generates a new one if it doesn't exist
|
|
11
|
+
* @returns The installation ID to use for analytics tracking
|
|
8
12
|
*/
|
|
9
|
-
export const
|
|
10
|
-
const
|
|
11
|
-
if (
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
export const getOrCreateInstallationId = () => {
|
|
14
|
+
const currentId = localStorage.getItem(INSTALLATION_ID_STORAGE_KEY);
|
|
15
|
+
if (currentId) {
|
|
16
|
+
return currentId;
|
|
17
|
+
}
|
|
18
|
+
const legacyId = localStorage.getItem(PROFILE_ID_STORAGE_KEY);
|
|
19
|
+
if (legacyId) {
|
|
20
|
+
localStorage.setItem(INSTALLATION_ID_STORAGE_KEY, legacyId);
|
|
21
|
+
localStorage.removeItem(PROFILE_ID_STORAGE_KEY);
|
|
22
|
+
return legacyId;
|
|
15
23
|
}
|
|
16
|
-
|
|
24
|
+
const newInstallationId = safeRandomUUID();
|
|
25
|
+
localStorage.setItem(INSTALLATION_ID_STORAGE_KEY, newInstallationId);
|
|
26
|
+
return newInstallationId;
|
|
17
27
|
};
|
|
18
28
|
function safeRandomUUID() {
|
|
19
29
|
// 1) Native support
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
+
import type { PostType } from '../..';
|
|
1
2
|
import type { IPostAnalyticsHandler } from '../../posts/posts-player/types';
|
|
2
3
|
import type { IStreamAnalyticsHandler } from '../../streams/streams-player/types';
|
|
3
4
|
export declare class InternalMediaCenterAnalyticsHandler implements IPostAnalyticsHandler, IStreamAnalyticsHandler {
|
|
4
5
|
constructor(graphqlOrigin: string | undefined);
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
trackShortVideoProductClick: (productId: string, videoId: string) => void;
|
|
6
|
+
trackPostOpened: (postType: PostType, postId: string) => Promise<void>;
|
|
7
|
+
trackStreamView: (streamId: string) => Promise<void>;
|
|
8
|
+
trackStreamPageView: (pageId: string, streamId: string) => Promise<void>;
|
|
9
|
+
trackStreamEngagementTime: (streamId: string, engagementTime: number) => Promise<void>;
|
|
10
|
+
trackStreamScrollDepth: (streamId: string, scrollDepth: number) => Promise<void>;
|
|
11
|
+
trackStreamProductImpression: (productId: string, streamId: string) => Promise<void>;
|
|
12
|
+
trackStreamProductClicked: (productId: string, streamId: string) => Promise<void>;
|
|
13
|
+
reportPageVideoViews: (pageId: string, streamId: string) => Promise<import("@streamscloud/streams-analytics-collector").MeasurementsBatchReportResult>;
|
|
14
|
+
trackShortVideoView: (videoId: string) => Promise<void>;
|
|
15
|
+
trackShortVideoProductImpression: (productId: string, videoId: string) => Promise<void>;
|
|
16
|
+
trackShortVideoProductClick: (productId: string, videoId: string) => Promise<void>;
|
|
17
17
|
trackShortVideoProgress: (pageId: string, videoId: string, progress: number, streamId: string) => void;
|
|
18
|
-
trackAdClick: (adId: string) => void
|
|
19
|
-
trackAdImpression: (adId: string) => void
|
|
18
|
+
trackAdClick: (adId: string) => Promise<void>;
|
|
19
|
+
trackAdImpression: (adId: string) => Promise<void>;
|
|
20
20
|
}
|
|
@@ -1,24 +1,175 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { getOrCreateInstallationId } from '../../core/analytics.installation-id';
|
|
2
2
|
import { constructGraphQLUrl } from '../../core/graphql';
|
|
3
|
-
import {
|
|
3
|
+
import { mapPostTypeToEntityType } from './mapper';
|
|
4
|
+
import { AnalyticsCollector, EntityRelationType, EntityType, EventType, MeasurementType, Schemas } from '@streamscloud/streams-analytics-collector';
|
|
4
5
|
export class InternalMediaCenterAnalyticsHandler {
|
|
5
6
|
constructor(graphqlOrigin) {
|
|
6
|
-
|
|
7
|
-
|
|
7
|
+
AnalyticsCollector.initialize({
|
|
8
|
+
gqlDataSenderOptions: {
|
|
9
|
+
endpoint: constructGraphQLUrl(graphqlOrigin)
|
|
10
|
+
},
|
|
11
|
+
schema: Schemas.external,
|
|
12
|
+
metadata: {
|
|
13
|
+
installationId: getOrCreateInstallationId()
|
|
14
|
+
}
|
|
15
|
+
});
|
|
8
16
|
}
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
17
|
+
trackPostOpened = (postType, postId) => AnalyticsCollector.eventsReporter.reportEvent({
|
|
18
|
+
entity: {
|
|
19
|
+
type: mapPostTypeToEntityType(postType),
|
|
20
|
+
id: postId
|
|
21
|
+
},
|
|
22
|
+
eventType: EventType.Viewed
|
|
23
|
+
});
|
|
24
|
+
trackStreamView = (streamId) => AnalyticsCollector.eventsReporter.reportEvent({
|
|
25
|
+
entity: {
|
|
26
|
+
type: EntityType.Stream,
|
|
27
|
+
id: streamId
|
|
28
|
+
},
|
|
29
|
+
eventType: EventType.Viewed
|
|
30
|
+
});
|
|
31
|
+
trackStreamPageView = (pageId, streamId) => AnalyticsCollector.eventsReporter.reportEvent({
|
|
32
|
+
entity: {
|
|
33
|
+
type: EntityType.StreamPage,
|
|
34
|
+
id: pageId
|
|
35
|
+
},
|
|
36
|
+
eventType: EventType.Viewed,
|
|
37
|
+
relatedEntities: [
|
|
38
|
+
{
|
|
39
|
+
relationType: EntityRelationType.PlacedIn,
|
|
40
|
+
entity: {
|
|
41
|
+
type: EntityType.Stream,
|
|
42
|
+
id: streamId
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
]
|
|
46
|
+
});
|
|
47
|
+
trackStreamEngagementTime = (streamId, engagementTime) => AnalyticsCollector.measurementsReporter.reportMeasurement({
|
|
48
|
+
entity: {
|
|
49
|
+
type: EntityType.Stream,
|
|
50
|
+
id: streamId
|
|
51
|
+
},
|
|
52
|
+
measurementType: MeasurementType.EngagementTime,
|
|
53
|
+
value: engagementTime
|
|
54
|
+
});
|
|
55
|
+
trackStreamScrollDepth = (streamId, scrollDepth) => AnalyticsCollector.measurementsReporter.reportMeasurement({
|
|
56
|
+
entity: {
|
|
57
|
+
type: EntityType.Stream,
|
|
58
|
+
id: streamId
|
|
59
|
+
},
|
|
60
|
+
measurementType: MeasurementType.ScrollDepth,
|
|
61
|
+
value: scrollDepth
|
|
62
|
+
});
|
|
63
|
+
trackStreamProductImpression = (productId, streamId) => AnalyticsCollector.eventsReporter.reportEvent({
|
|
64
|
+
entity: {
|
|
65
|
+
type: EntityType.Product,
|
|
66
|
+
id: productId
|
|
67
|
+
},
|
|
68
|
+
eventType: EventType.Appeared,
|
|
69
|
+
relatedEntities: [
|
|
70
|
+
{
|
|
71
|
+
relationType: EntityRelationType.PlacedIn,
|
|
72
|
+
entity: {
|
|
73
|
+
type: EntityType.Stream,
|
|
74
|
+
id: streamId
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
]
|
|
78
|
+
});
|
|
79
|
+
trackStreamProductClicked = (productId, streamId) => AnalyticsCollector.eventsReporter.reportEvent({
|
|
80
|
+
entity: {
|
|
81
|
+
type: EntityType.Product,
|
|
82
|
+
id: productId
|
|
83
|
+
},
|
|
84
|
+
eventType: EventType.Clicked,
|
|
85
|
+
relatedEntities: [
|
|
86
|
+
{
|
|
87
|
+
relationType: EntityRelationType.PlacedIn,
|
|
88
|
+
entity: {
|
|
89
|
+
type: EntityType.Stream,
|
|
90
|
+
id: streamId
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
]
|
|
94
|
+
});
|
|
95
|
+
reportPageVideoViews = (pageId, streamId) => AnalyticsCollector.measurementsBatcher.reportBatch([
|
|
96
|
+
{
|
|
97
|
+
type: EntityType.StreamPage,
|
|
98
|
+
id: pageId
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
type: EntityType.Stream,
|
|
102
|
+
id: streamId
|
|
103
|
+
}
|
|
104
|
+
]);
|
|
105
|
+
trackShortVideoView = (videoId) => AnalyticsCollector.eventsReporter.reportEvent({
|
|
106
|
+
entity: {
|
|
107
|
+
type: EntityType.ShortVideo,
|
|
108
|
+
id: videoId
|
|
109
|
+
},
|
|
110
|
+
eventType: EventType.Viewed
|
|
111
|
+
});
|
|
112
|
+
trackShortVideoProductImpression = (productId, videoId) => AnalyticsCollector.eventsReporter.reportEvent({
|
|
113
|
+
entity: {
|
|
114
|
+
type: EntityType.Product,
|
|
115
|
+
id: productId
|
|
116
|
+
},
|
|
117
|
+
eventType: EventType.Appeared,
|
|
118
|
+
relatedEntities: [
|
|
119
|
+
{
|
|
120
|
+
relationType: EntityRelationType.PlacedIn,
|
|
121
|
+
entity: {
|
|
122
|
+
type: EntityType.ShortVideo,
|
|
123
|
+
id: videoId
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
]
|
|
127
|
+
});
|
|
128
|
+
trackShortVideoProductClick = (productId, videoId) => AnalyticsCollector.eventsReporter.reportEvent({
|
|
129
|
+
entity: {
|
|
130
|
+
type: EntityType.Product,
|
|
131
|
+
id: productId
|
|
132
|
+
},
|
|
133
|
+
eventType: EventType.Clicked,
|
|
134
|
+
relatedEntities: [
|
|
135
|
+
{
|
|
136
|
+
relationType: EntityRelationType.PlacedIn,
|
|
137
|
+
entity: {
|
|
138
|
+
type: EntityType.ShortVideo,
|
|
139
|
+
id: videoId
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
]
|
|
143
|
+
});
|
|
144
|
+
trackShortVideoProgress = (pageId, videoId, progress, streamId) => AnalyticsCollector.measurementsBatcher.collect([
|
|
145
|
+
{
|
|
146
|
+
type: EntityType.StreamPage,
|
|
147
|
+
id: pageId
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
type: EntityType.Stream,
|
|
151
|
+
id: streamId
|
|
152
|
+
}
|
|
153
|
+
], {
|
|
154
|
+
entity: {
|
|
155
|
+
type: EntityType.ShortVideo,
|
|
156
|
+
id: videoId
|
|
157
|
+
},
|
|
158
|
+
measurementType: MeasurementType.Progress,
|
|
159
|
+
value: progress
|
|
160
|
+
});
|
|
161
|
+
trackAdClick = (adId) => AnalyticsCollector.eventsReporter.reportEvent({
|
|
162
|
+
entity: {
|
|
163
|
+
type: EntityType.Ad,
|
|
164
|
+
id: adId
|
|
165
|
+
},
|
|
166
|
+
eventType: EventType.Clicked
|
|
167
|
+
});
|
|
168
|
+
trackAdImpression = (adId) => AnalyticsCollector.eventsReporter.reportEvent({
|
|
169
|
+
entity: {
|
|
170
|
+
type: EntityType.Ad,
|
|
171
|
+
id: adId
|
|
172
|
+
},
|
|
173
|
+
eventType: EventType.Appeared
|
|
174
|
+
});
|
|
24
175
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
+
import type { PostType } from '../../core/enums';
|
|
1
2
|
import type { IPostAnalyticsHandler } from '../../posts/posts-player';
|
|
2
3
|
export declare class InternalPostAnalyticsHandler implements IPostAnalyticsHandler {
|
|
3
4
|
constructor(graphqlOrigin: string | undefined);
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
trackAdImpression: (adId: string) => void;
|
|
5
|
+
trackPostOpened: (postType: PostType, postId: string) => Promise<void>;
|
|
6
|
+
trackShortVideoView: (videoId: string) => Promise<void>;
|
|
7
|
+
trackShortVideoProductImpression: (productId: string, videoId: string) => Promise<void>;
|
|
8
|
+
trackShortVideoProductClick: (productId: string, videoId: string) => Promise<void>;
|
|
9
|
+
trackAdClick: (adId: string) => Promise<void>;
|
|
10
|
+
trackAdImpression: (adId: string) => Promise<void>;
|
|
11
11
|
}
|
|
@@ -1,16 +1,77 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { getOrCreateInstallationId } from '../../core/analytics.installation-id';
|
|
2
2
|
import { constructGraphQLUrl } from '../../core/graphql';
|
|
3
|
-
import {
|
|
3
|
+
import { mapPostTypeToEntityType } from './mapper';
|
|
4
|
+
import { AnalyticsCollector, EntityRelationType, EntityType, EventType, Schemas } from '@streamscloud/streams-analytics-collector';
|
|
4
5
|
export class InternalPostAnalyticsHandler {
|
|
5
6
|
constructor(graphqlOrigin) {
|
|
6
|
-
|
|
7
|
-
|
|
7
|
+
AnalyticsCollector.initialize({
|
|
8
|
+
gqlDataSenderOptions: {
|
|
9
|
+
endpoint: constructGraphQLUrl(graphqlOrigin)
|
|
10
|
+
},
|
|
11
|
+
schema: Schemas.external,
|
|
12
|
+
metadata: {
|
|
13
|
+
installationId: getOrCreateInstallationId()
|
|
14
|
+
}
|
|
15
|
+
});
|
|
8
16
|
}
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
17
|
+
trackPostOpened = (postType, postId) => AnalyticsCollector.eventsReporter.reportEvent({
|
|
18
|
+
entity: {
|
|
19
|
+
type: mapPostTypeToEntityType(postType),
|
|
20
|
+
id: postId
|
|
21
|
+
},
|
|
22
|
+
eventType: EventType.Viewed
|
|
23
|
+
});
|
|
24
|
+
trackShortVideoView = (videoId) => AnalyticsCollector.eventsReporter.reportEvent({
|
|
25
|
+
entity: {
|
|
26
|
+
type: EntityType.ShortVideo,
|
|
27
|
+
id: videoId
|
|
28
|
+
},
|
|
29
|
+
eventType: EventType.Viewed
|
|
30
|
+
});
|
|
31
|
+
trackShortVideoProductImpression = (productId, videoId) => AnalyticsCollector.eventsReporter.reportEvent({
|
|
32
|
+
entity: {
|
|
33
|
+
type: EntityType.Product,
|
|
34
|
+
id: productId
|
|
35
|
+
},
|
|
36
|
+
eventType: EventType.Appeared,
|
|
37
|
+
relatedEntities: [
|
|
38
|
+
{
|
|
39
|
+
relationType: EntityRelationType.PlacedIn,
|
|
40
|
+
entity: {
|
|
41
|
+
type: EntityType.ShortVideo,
|
|
42
|
+
id: videoId
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
]
|
|
46
|
+
});
|
|
47
|
+
trackShortVideoProductClick = (productId, videoId) => AnalyticsCollector.eventsReporter.reportEvent({
|
|
48
|
+
entity: {
|
|
49
|
+
type: EntityType.Product,
|
|
50
|
+
id: productId
|
|
51
|
+
},
|
|
52
|
+
eventType: EventType.Clicked,
|
|
53
|
+
relatedEntities: [
|
|
54
|
+
{
|
|
55
|
+
relationType: EntityRelationType.PlacedIn,
|
|
56
|
+
entity: {
|
|
57
|
+
type: EntityType.ShortVideo,
|
|
58
|
+
id: videoId
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
]
|
|
62
|
+
});
|
|
63
|
+
trackAdClick = (adId) => AnalyticsCollector.eventsReporter.reportEvent({
|
|
64
|
+
entity: {
|
|
65
|
+
type: EntityType.Ad,
|
|
66
|
+
id: adId
|
|
67
|
+
},
|
|
68
|
+
eventType: EventType.Clicked
|
|
69
|
+
});
|
|
70
|
+
trackAdImpression = (adId) => AnalyticsCollector.eventsReporter.reportEvent({
|
|
71
|
+
entity: {
|
|
72
|
+
type: EntityType.Ad,
|
|
73
|
+
id: adId
|
|
74
|
+
},
|
|
75
|
+
eventType: EventType.Appeared
|
|
76
|
+
});
|
|
16
77
|
}
|
|
@@ -1,18 +1,17 @@
|
|
|
1
1
|
import type { IStreamAnalyticsHandler } from '../../streams/streams-player/types';
|
|
2
2
|
export declare class InternalStreamAnalyticsHandler implements IStreamAnalyticsHandler {
|
|
3
3
|
constructor(graphqlOrigin: string | undefined);
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
trackShortVideoProductClick: (productId: string, videoId: string) => void;
|
|
4
|
+
trackStreamView: (streamId: string) => Promise<void>;
|
|
5
|
+
trackStreamPageView: (pageId: string, streamId: string) => Promise<void>;
|
|
6
|
+
trackStreamEngagementTime: (streamId: string, engagementTime: number) => Promise<void>;
|
|
7
|
+
trackStreamScrollDepth: (streamId: string, scrollDepth: number) => Promise<void>;
|
|
8
|
+
trackStreamProductImpression: (productId: string, streamId: string) => Promise<void>;
|
|
9
|
+
trackStreamProductClicked: (productId: string, streamId: string) => Promise<void>;
|
|
10
|
+
reportPageVideoViews: (pageId: string, streamId: string) => Promise<import("@streamscloud/streams-analytics-collector").MeasurementsBatchReportResult>;
|
|
11
|
+
trackShortVideoView: (videoId: string) => Promise<void>;
|
|
12
|
+
trackShortVideoProductImpression: (productId: string, videoId: string) => Promise<void>;
|
|
13
|
+
trackShortVideoProductClick: (productId: string, videoId: string) => Promise<void>;
|
|
15
14
|
trackShortVideoProgress: (pageId: string, videoId: string, progress: number, streamId: string) => void;
|
|
16
|
-
trackAdClick: (adId: string) => void
|
|
17
|
-
trackAdImpression: (adId: string) => void
|
|
15
|
+
trackAdClick: (adId: string) => Promise<void>;
|
|
16
|
+
trackAdImpression: (adId: string) => Promise<void>;
|
|
18
17
|
}
|
|
@@ -1,23 +1,167 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { getOrCreateInstallationId } from '../../core/analytics.installation-id';
|
|
2
2
|
import { constructGraphQLUrl } from '../../core/graphql';
|
|
3
|
-
import {
|
|
3
|
+
import { AnalyticsCollector, EntityRelationType, EntityType, EventType, MeasurementType, Schemas } from '@streamscloud/streams-analytics-collector';
|
|
4
4
|
export class InternalStreamAnalyticsHandler {
|
|
5
5
|
constructor(graphqlOrigin) {
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
AnalyticsCollector.initialize({
|
|
7
|
+
gqlDataSenderOptions: {
|
|
8
|
+
endpoint: constructGraphQLUrl(graphqlOrigin)
|
|
9
|
+
},
|
|
10
|
+
schema: Schemas.external,
|
|
11
|
+
metadata: {
|
|
12
|
+
installationId: getOrCreateInstallationId()
|
|
13
|
+
}
|
|
14
|
+
});
|
|
8
15
|
}
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
16
|
+
trackStreamView = (streamId) => AnalyticsCollector.eventsReporter.reportEvent({
|
|
17
|
+
entity: {
|
|
18
|
+
type: EntityType.Stream,
|
|
19
|
+
id: streamId
|
|
20
|
+
},
|
|
21
|
+
eventType: EventType.Viewed
|
|
22
|
+
});
|
|
23
|
+
trackStreamPageView = (pageId, streamId) => AnalyticsCollector.eventsReporter.reportEvent({
|
|
24
|
+
entity: {
|
|
25
|
+
type: EntityType.StreamPage,
|
|
26
|
+
id: pageId
|
|
27
|
+
},
|
|
28
|
+
eventType: EventType.Viewed,
|
|
29
|
+
relatedEntities: [
|
|
30
|
+
{
|
|
31
|
+
relationType: EntityRelationType.PlacedIn,
|
|
32
|
+
entity: {
|
|
33
|
+
type: EntityType.Stream,
|
|
34
|
+
id: streamId
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
]
|
|
38
|
+
});
|
|
39
|
+
trackStreamEngagementTime = (streamId, engagementTime) => AnalyticsCollector.measurementsReporter.reportMeasurement({
|
|
40
|
+
entity: {
|
|
41
|
+
type: EntityType.Stream,
|
|
42
|
+
id: streamId
|
|
43
|
+
},
|
|
44
|
+
measurementType: MeasurementType.EngagementTime,
|
|
45
|
+
value: engagementTime
|
|
46
|
+
});
|
|
47
|
+
trackStreamScrollDepth = (streamId, scrollDepth) => AnalyticsCollector.measurementsReporter.reportMeasurement({
|
|
48
|
+
entity: {
|
|
49
|
+
type: EntityType.Stream,
|
|
50
|
+
id: streamId
|
|
51
|
+
},
|
|
52
|
+
measurementType: MeasurementType.ScrollDepth,
|
|
53
|
+
value: scrollDepth
|
|
54
|
+
});
|
|
55
|
+
trackStreamProductImpression = (productId, streamId) => AnalyticsCollector.eventsReporter.reportEvent({
|
|
56
|
+
entity: {
|
|
57
|
+
type: EntityType.Product,
|
|
58
|
+
id: productId
|
|
59
|
+
},
|
|
60
|
+
eventType: EventType.Appeared,
|
|
61
|
+
relatedEntities: [
|
|
62
|
+
{
|
|
63
|
+
relationType: EntityRelationType.PlacedIn,
|
|
64
|
+
entity: {
|
|
65
|
+
type: EntityType.Stream,
|
|
66
|
+
id: streamId
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
]
|
|
70
|
+
});
|
|
71
|
+
trackStreamProductClicked = (productId, streamId) => AnalyticsCollector.eventsReporter.reportEvent({
|
|
72
|
+
entity: {
|
|
73
|
+
type: EntityType.Product,
|
|
74
|
+
id: productId
|
|
75
|
+
},
|
|
76
|
+
eventType: EventType.Clicked,
|
|
77
|
+
relatedEntities: [
|
|
78
|
+
{
|
|
79
|
+
relationType: EntityRelationType.PlacedIn,
|
|
80
|
+
entity: {
|
|
81
|
+
type: EntityType.Stream,
|
|
82
|
+
id: streamId
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
]
|
|
86
|
+
});
|
|
87
|
+
reportPageVideoViews = (pageId, streamId) => AnalyticsCollector.measurementsBatcher.reportBatch([
|
|
88
|
+
{
|
|
89
|
+
type: EntityType.StreamPage,
|
|
90
|
+
id: pageId
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
type: EntityType.Stream,
|
|
94
|
+
id: streamId
|
|
95
|
+
}
|
|
96
|
+
]);
|
|
97
|
+
trackShortVideoView = (videoId) => AnalyticsCollector.eventsReporter.reportEvent({
|
|
98
|
+
entity: {
|
|
99
|
+
type: EntityType.ShortVideo,
|
|
100
|
+
id: videoId
|
|
101
|
+
},
|
|
102
|
+
eventType: EventType.Viewed
|
|
103
|
+
});
|
|
104
|
+
trackShortVideoProductImpression = (productId, videoId) => AnalyticsCollector.eventsReporter.reportEvent({
|
|
105
|
+
entity: {
|
|
106
|
+
type: EntityType.Product,
|
|
107
|
+
id: productId
|
|
108
|
+
},
|
|
109
|
+
eventType: EventType.Appeared,
|
|
110
|
+
relatedEntities: [
|
|
111
|
+
{
|
|
112
|
+
relationType: EntityRelationType.PlacedIn,
|
|
113
|
+
entity: {
|
|
114
|
+
type: EntityType.ShortVideo,
|
|
115
|
+
id: videoId
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
]
|
|
119
|
+
});
|
|
120
|
+
trackShortVideoProductClick = (productId, videoId) => AnalyticsCollector.eventsReporter.reportEvent({
|
|
121
|
+
entity: {
|
|
122
|
+
type: EntityType.Product,
|
|
123
|
+
id: productId
|
|
124
|
+
},
|
|
125
|
+
eventType: EventType.Clicked,
|
|
126
|
+
relatedEntities: [
|
|
127
|
+
{
|
|
128
|
+
relationType: EntityRelationType.PlacedIn,
|
|
129
|
+
entity: {
|
|
130
|
+
type: EntityType.ShortVideo,
|
|
131
|
+
id: videoId
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
]
|
|
135
|
+
});
|
|
136
|
+
trackShortVideoProgress = (pageId, videoId, progress, streamId) => AnalyticsCollector.measurementsBatcher.collect([
|
|
137
|
+
{
|
|
138
|
+
type: EntityType.StreamPage,
|
|
139
|
+
id: pageId
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
type: EntityType.Stream,
|
|
143
|
+
id: streamId
|
|
144
|
+
}
|
|
145
|
+
], {
|
|
146
|
+
entity: {
|
|
147
|
+
type: EntityType.ShortVideo,
|
|
148
|
+
id: videoId
|
|
149
|
+
},
|
|
150
|
+
measurementType: MeasurementType.Progress,
|
|
151
|
+
value: progress
|
|
152
|
+
});
|
|
153
|
+
trackAdClick = (adId) => AnalyticsCollector.eventsReporter.reportEvent({
|
|
154
|
+
entity: {
|
|
155
|
+
type: EntityType.Ad,
|
|
156
|
+
id: adId
|
|
157
|
+
},
|
|
158
|
+
eventType: EventType.Clicked
|
|
159
|
+
});
|
|
160
|
+
trackAdImpression = (adId) => AnalyticsCollector.eventsReporter.reportEvent({
|
|
161
|
+
entity: {
|
|
162
|
+
type: EntityType.Ad,
|
|
163
|
+
id: adId
|
|
164
|
+
},
|
|
165
|
+
eventType: EventType.Appeared
|
|
166
|
+
});
|
|
23
167
|
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { PostType } from '../../core/enums';
|
|
2
|
+
import { EntityType } from '@streamscloud/streams-analytics-collector';
|
|
3
|
+
export function mapPostTypeToEntityType(postType) {
|
|
4
|
+
switch (postType) {
|
|
5
|
+
case PostType.Article:
|
|
6
|
+
return EntityType.Article;
|
|
7
|
+
case PostType.Media:
|
|
8
|
+
return EntityType.Media;
|
|
9
|
+
case PostType.Moment:
|
|
10
|
+
return EntityType.Moment;
|
|
11
|
+
case PostType.ShortVideo:
|
|
12
|
+
return EntityType.ShortVideo;
|
|
13
|
+
case PostType.Video:
|
|
14
|
+
return EntityType.Video;
|
|
15
|
+
default:
|
|
16
|
+
throw new Error(`Unknown PostType: ${postType}`);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
import { ProfileType } from '../../../core/enums';
|
|
2
1
|
import { mapToPostModel } from '../../../posts/post-viewer';
|
|
3
2
|
export const mapToPostPlayerModel = (payload) => {
|
|
4
3
|
const viewerModel = mapToPostModel(payload);
|
|
5
4
|
return {
|
|
6
|
-
...viewerModel
|
|
7
|
-
analyticsOrganizationId: payload.ownerProfile.type === ProfileType.Organization ? payload.ownerProfile.id : null
|
|
5
|
+
...viewerModel
|
|
8
6
|
};
|
|
9
7
|
};
|
|
@@ -146,7 +146,6 @@ const genereateStreamActions = (id) => {
|
|
|
146
146
|
overflow-y: auto;
|
|
147
147
|
--_cross-browser-scrollbar--thumb-color: transparent;
|
|
148
148
|
--_cross-browser-scrollbar--track-color: transparent;
|
|
149
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
150
149
|
}
|
|
151
150
|
.media-center-discover:hover {
|
|
152
151
|
--_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, #7d7d7d);
|
|
@@ -170,6 +169,9 @@ const genereateStreamActions = (id) => {
|
|
|
170
169
|
scrollbar-width: thin;
|
|
171
170
|
}
|
|
172
171
|
}
|
|
172
|
+
.media-center-discover {
|
|
173
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
174
|
+
}
|
|
173
175
|
@container (width < 576px) {
|
|
174
176
|
.media-center-discover {
|
|
175
177
|
padding-inline: 0.9375rem;
|
|
@@ -181,19 +183,23 @@ const genereateStreamActions = (id) => {
|
|
|
181
183
|
margin: 0 auto;
|
|
182
184
|
padding-bottom: 1.25rem;
|
|
183
185
|
/* Set 'container-type: inline-size;' to reference container*/
|
|
184
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
185
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
186
186
|
}
|
|
187
187
|
@container (width < 992px) {
|
|
188
188
|
.media-center-discover__content {
|
|
189
189
|
padding-bottom: 1rem;
|
|
190
190
|
}
|
|
191
191
|
}
|
|
192
|
+
.media-center-discover__content {
|
|
193
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
194
|
+
}
|
|
192
195
|
@container (width < 768px) {
|
|
193
196
|
.media-center-discover__content {
|
|
194
197
|
padding-bottom: 0.8125rem;
|
|
195
198
|
}
|
|
196
199
|
}
|
|
200
|
+
.media-center-discover__content {
|
|
201
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
202
|
+
}
|
|
197
203
|
@container (width < 576px) {
|
|
198
204
|
.media-center-discover__content {
|
|
199
205
|
padding-bottom: 0.625rem;
|
|
@@ -204,19 +210,23 @@ const genereateStreamActions = (id) => {
|
|
|
204
210
|
flex-direction: column;
|
|
205
211
|
gap: 3rem;
|
|
206
212
|
/* Set 'container-type: inline-size;' to reference container*/
|
|
207
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
208
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
209
213
|
}
|
|
210
214
|
@container (width < 992px) {
|
|
211
215
|
.media-center-discover__feed {
|
|
212
216
|
gap: 2.5rem;
|
|
213
217
|
}
|
|
214
218
|
}
|
|
219
|
+
.media-center-discover__feed {
|
|
220
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
221
|
+
}
|
|
215
222
|
@container (width < 768px) {
|
|
216
223
|
.media-center-discover__feed {
|
|
217
224
|
gap: 2rem;
|
|
218
225
|
}
|
|
219
226
|
}
|
|
227
|
+
.media-center-discover__feed {
|
|
228
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
229
|
+
}
|
|
220
230
|
@container (width < 576px) {
|
|
221
231
|
.media-center-discover__feed {
|
|
222
232
|
gap: 1.5rem;
|
|
@@ -253,13 +263,13 @@ const genereateStreamActions = (id) => {
|
|
|
253
263
|
.media-center-discover__section-content--4 {
|
|
254
264
|
gap: 1.25rem;
|
|
255
265
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
256
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
257
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
258
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
259
266
|
}
|
|
260
267
|
.media-center-discover__section-content--4 :global(> :nth-child(n + 5)) {
|
|
261
268
|
display: var(--_section-content--more-items--display);
|
|
262
269
|
}
|
|
270
|
+
.media-center-discover__section-content--4 {
|
|
271
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
272
|
+
}
|
|
263
273
|
@container (width < 992px) {
|
|
264
274
|
.media-center-discover__section-content--4 {
|
|
265
275
|
gap: 1rem;
|
|
@@ -269,6 +279,9 @@ const genereateStreamActions = (id) => {
|
|
|
269
279
|
display: var(--_section-content--more-items--display);
|
|
270
280
|
}
|
|
271
281
|
}
|
|
282
|
+
.media-center-discover__section-content--4 {
|
|
283
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
284
|
+
}
|
|
272
285
|
@container (width < 768px) {
|
|
273
286
|
.media-center-discover__section-content--4 {
|
|
274
287
|
gap: 0.75rem;
|
|
@@ -281,6 +294,9 @@ const genereateStreamActions = (id) => {
|
|
|
281
294
|
display: var(--_section-content--more-items--display);
|
|
282
295
|
}
|
|
283
296
|
}
|
|
297
|
+
.media-center-discover__section-content--4 {
|
|
298
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
299
|
+
}
|
|
284
300
|
@container (width < 576px) {
|
|
285
301
|
.media-center-discover__section-content--4 {
|
|
286
302
|
gap: 0.625rem;
|
|
@@ -289,13 +305,13 @@ const genereateStreamActions = (id) => {
|
|
|
289
305
|
.media-center-discover__section-content--5 {
|
|
290
306
|
gap: 1.875rem;
|
|
291
307
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
292
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
293
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
294
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
295
308
|
}
|
|
296
309
|
.media-center-discover__section-content--5 :global(> :nth-child(n + 6)) {
|
|
297
310
|
display: var(--_section-content--more-items--display);
|
|
298
311
|
}
|
|
312
|
+
.media-center-discover__section-content--5 {
|
|
313
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
314
|
+
}
|
|
299
315
|
@container (width < 992px) {
|
|
300
316
|
.media-center-discover__section-content--5 {
|
|
301
317
|
gap: 1.5rem;
|
|
@@ -305,6 +321,9 @@ const genereateStreamActions = (id) => {
|
|
|
305
321
|
display: var(--_section-content--more-items--display);
|
|
306
322
|
}
|
|
307
323
|
}
|
|
324
|
+
.media-center-discover__section-content--5 {
|
|
325
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
326
|
+
}
|
|
308
327
|
@container (width < 768px) {
|
|
309
328
|
.media-center-discover__section-content--5 {
|
|
310
329
|
gap: 1.125rem;
|
|
@@ -314,6 +333,9 @@ const genereateStreamActions = (id) => {
|
|
|
314
333
|
display: var(--_section-content--more-items--display);
|
|
315
334
|
}
|
|
316
335
|
}
|
|
336
|
+
.media-center-discover__section-content--5 {
|
|
337
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
338
|
+
}
|
|
317
339
|
@container (width < 576px) {
|
|
318
340
|
.media-center-discover__section-content--5 {
|
|
319
341
|
gap: 0.9375rem;
|
|
@@ -241,14 +241,16 @@ const styles = $derived.by(() => {
|
|
|
241
241
|
display: flex;
|
|
242
242
|
-webkit-user-drag: none;
|
|
243
243
|
user-select: none;
|
|
244
|
+
}
|
|
245
|
+
.menu-item :global([contenteditable]) {
|
|
246
|
+
user-select: text;
|
|
247
|
+
}
|
|
248
|
+
.menu-item {
|
|
244
249
|
height: 2.25rem;
|
|
245
250
|
padding-left: var(--_media-center-menu--items--padding-inline);
|
|
246
251
|
--_menu-item--text--font-size: 0.9375rem;
|
|
247
252
|
--_menu-item--image--size: 1.5rem;
|
|
248
253
|
}
|
|
249
|
-
.menu-item :global([contenteditable]) {
|
|
250
|
-
user-select: text;
|
|
251
|
-
}
|
|
252
254
|
.menu-item--active {
|
|
253
255
|
background-color: hsl(from var(--_media-center-menu--background-color) h s calc(l + 5)/alpha);
|
|
254
256
|
border-radius: 0.25rem;
|
|
@@ -80,19 +80,23 @@ let { handler, on } = $props();
|
|
|
80
80
|
gap: 2rem 1.25rem;
|
|
81
81
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
82
82
|
/* Set 'container-type: inline-size;' to reference container*/
|
|
83
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
84
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
85
83
|
}
|
|
86
84
|
@container (width < 992px) {
|
|
87
85
|
.streams-in-category__section-content {
|
|
88
86
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
89
87
|
}
|
|
90
88
|
}
|
|
89
|
+
.streams-in-category__section-content {
|
|
90
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
91
|
+
}
|
|
91
92
|
@container (width < 768px) {
|
|
92
93
|
.streams-in-category__section-content {
|
|
93
94
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
94
95
|
}
|
|
95
96
|
}
|
|
97
|
+
.streams-in-category__section-content {
|
|
98
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
99
|
+
}
|
|
96
100
|
@container (width < 576px) {
|
|
97
101
|
.streams-in-category__section-content {
|
|
98
102
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
@@ -69,14 +69,11 @@ const contentPlayerConfig = new PlayerConfig({
|
|
|
69
69
|
if (on === null || on === void 0 ? void 0 : on.backgroundImageLoaded) {
|
|
70
70
|
on.backgroundImageLoaded(getPostCoverImage(post));
|
|
71
71
|
}
|
|
72
|
-
if (post.analyticsOrganizationId) {
|
|
73
|
-
analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.setOrganizationId(post.analyticsOrganizationId);
|
|
74
|
-
}
|
|
75
72
|
if (post.postType === PostType.ShortVideo) {
|
|
76
73
|
analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoView(id);
|
|
77
74
|
}
|
|
78
|
-
else if (post.
|
|
79
|
-
analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackPostOpened(
|
|
75
|
+
else if (post.postType) {
|
|
76
|
+
analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackPostOpened(post.postType, id);
|
|
80
77
|
}
|
|
81
78
|
(_a = on === null || on === void 0 ? void 0 : on.postActivated) === null || _a === void 0 ? void 0 : _a.call(on, id);
|
|
82
79
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { PostType } from '../../core/enums';
|
|
1
2
|
import type { Locale } from '../../core/locale';
|
|
2
3
|
import type { ThemeValue } from '../../core/theme';
|
|
3
4
|
import type { IPostModel } from '..';
|
|
@@ -7,17 +8,14 @@ import type { ICloseOrchestrator } from '../../ui/player/close-orchestrator';
|
|
|
7
8
|
import type { PlayerColors } from '../../ui/player/colors';
|
|
8
9
|
import type { IPlayerBuffer, IPlayerDataProvider } from '../../ui/player/providers';
|
|
9
10
|
export interface IPostAnalyticsHandler {
|
|
10
|
-
|
|
11
|
-
trackPostOpened: (postId: string, ownerId: string) => void;
|
|
11
|
+
trackPostOpened: (postType: PostType, postId: string) => void;
|
|
12
12
|
trackShortVideoView: (videoId: string) => void;
|
|
13
13
|
trackShortVideoProductImpression: (productId: string, videoId: string) => void;
|
|
14
14
|
trackShortVideoProductClick: (productId: string, videoId: string) => void;
|
|
15
15
|
trackAdClick: (adId: string) => void;
|
|
16
16
|
trackAdImpression: (adId: string) => void;
|
|
17
17
|
}
|
|
18
|
-
export type PostPlayerModel = IPostModel
|
|
19
|
-
analyticsOrganizationId: string | null;
|
|
20
|
-
};
|
|
18
|
+
export type PostPlayerModel = IPostModel;
|
|
21
19
|
export type PostsPlayerProps = {
|
|
22
20
|
dataProvider: {
|
|
23
21
|
type: 'buffer';
|
|
@@ -60,9 +60,6 @@ $effect(() => {
|
|
|
60
60
|
var _a;
|
|
61
61
|
if (stream) {
|
|
62
62
|
currentStreamModel = stream;
|
|
63
|
-
if (stream.organizationId) {
|
|
64
|
-
analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.setOrganizationId(stream.organizationId);
|
|
65
|
-
}
|
|
66
63
|
(_a = on === null || on === void 0 ? void 0 : on.streamActivated) === null || _a === void 0 ? void 0 : _a.call(on, { id: stream.id, title: stream.title, image: stream.cover });
|
|
67
64
|
analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamView(stream.id);
|
|
68
65
|
startActivityTracking();
|
|
@@ -70,7 +70,6 @@ export interface IStreamsPlayerDataProvider {
|
|
|
70
70
|
onEndReached?: () => void;
|
|
71
71
|
}
|
|
72
72
|
export interface IStreamAnalyticsHandler {
|
|
73
|
-
setOrganizationId: (organizationId: string) => void;
|
|
74
73
|
trackStreamView: (streamId: string) => void;
|
|
75
74
|
trackStreamPageView: (pageId: string, streamId: string) => void;
|
|
76
75
|
trackStreamProductImpression: (productId: string, streamId: string) => void;
|
|
@@ -36,7 +36,6 @@ let { style = undefined, size = ButtonSize.Standard, children } = $props();
|
|
|
36
36
|
}
|
|
37
37
|
.button-theme {
|
|
38
38
|
display: contents;
|
|
39
|
-
/*Size*/
|
|
40
39
|
}
|
|
41
40
|
.button-theme--standard {
|
|
42
41
|
--button--font--color: var(--sc-mc-color--text-primary);
|
|
@@ -46,12 +45,15 @@ let { style = undefined, size = ButtonSize.Standard, children } = $props();
|
|
|
46
45
|
--button--background--disabled: #f2f2f3;
|
|
47
46
|
--button--border: 1px solid #e5e7eb;
|
|
48
47
|
}
|
|
49
|
-
:global([data-theme=
|
|
48
|
+
:global([data-theme='dark']) .button-theme--standard {
|
|
50
49
|
--button--background--hover: #1f2937;
|
|
51
50
|
--button--background--active: #374151;
|
|
52
51
|
--button--background--disabled: #374151;
|
|
53
52
|
--button--border: 1px solid #4b5563;
|
|
54
53
|
}
|
|
54
|
+
.button-theme {
|
|
55
|
+
/*Size*/
|
|
56
|
+
}
|
|
55
57
|
.button-theme--size-standard {
|
|
56
58
|
--button--height: 2em;
|
|
57
59
|
--button--text--font-size: 0.75em;
|
|
@@ -73,7 +73,7 @@ let { src, color = null } = $props();
|
|
|
73
73
|
stroke: var(--_icon--stroke-color, var(--_icon--color));
|
|
74
74
|
stroke-width: var(--_icon--stroke-width);
|
|
75
75
|
}
|
|
76
|
-
:global([data-theme=
|
|
76
|
+
:global([data-theme='dark']) .icon :global(path) {
|
|
77
77
|
stroke: var(--_icon--stroke-color, var(--_icon--color));
|
|
78
78
|
stroke-width: var(--_icon--stroke-width);
|
|
79
79
|
}</style>
|
|
@@ -47,7 +47,6 @@ const styles = $derived.by(() => {
|
|
|
47
47
|
color: var(--sc-mc-color--text-white);
|
|
48
48
|
--icon--color: var(--sc-mc-color--icon-overlay);
|
|
49
49
|
--icon--size: 1.75rem;
|
|
50
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
51
50
|
}
|
|
52
51
|
.player-button:hover:not(:disabled) {
|
|
53
52
|
background-color: var(--_player-button--color);
|
|
@@ -64,6 +63,9 @@ const styles = $derived.by(() => {
|
|
|
64
63
|
transform: scale(var(--_player-button--icon-scale));
|
|
65
64
|
transition: 0.3s;
|
|
66
65
|
}
|
|
66
|
+
.player-button {
|
|
67
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
68
|
+
}
|
|
67
69
|
@container (width < 576px) {
|
|
68
70
|
.player-button {
|
|
69
71
|
padding: 0.5rem;
|
|
@@ -47,7 +47,6 @@ const styles = $derived.by(() => {
|
|
|
47
47
|
background: var(--_player-buttons-group--background-color);
|
|
48
48
|
padding: 0.4375rem 0.0625rem;
|
|
49
49
|
pointer-events: auto;
|
|
50
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
51
50
|
}
|
|
52
51
|
.player-buttons-group__action {
|
|
53
52
|
--_player-action--icon-scale: 1;
|
|
@@ -73,6 +72,9 @@ const styles = $derived.by(() => {
|
|
|
73
72
|
transform: scale(var(--_player-action--icon-scale));
|
|
74
73
|
transition: 0.3s;
|
|
75
74
|
}
|
|
75
|
+
.player-buttons-group {
|
|
76
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
77
|
+
}
|
|
76
78
|
@container (width < 576px) {
|
|
77
79
|
.player-buttons-group {
|
|
78
80
|
border-radius: 0.9375rem;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import type { PlayerButtonDef } from '../button';
|
|
2
2
|
import type { PlayerConfig } from './player-config.svelte';
|
|
3
3
|
import { type Snippet } from 'svelte';
|
|
4
|
-
declare
|
|
4
|
+
declare function $$render<T extends {
|
|
5
5
|
id: string;
|
|
6
|
-
}> {
|
|
7
|
-
props
|
|
6
|
+
}>(): {
|
|
7
|
+
props: {
|
|
8
8
|
config: PlayerConfig<T>;
|
|
9
9
|
itemActions: PlayerButtonDef[];
|
|
10
10
|
itemView: Snippet<[{
|
|
@@ -12,11 +12,20 @@ declare class __sveltets_Render<T extends {
|
|
|
12
12
|
}]>;
|
|
13
13
|
attachmentsView?: Snippet<[{
|
|
14
14
|
item: T;
|
|
15
|
-
}]
|
|
15
|
+
}]>;
|
|
16
16
|
overviewPanelContent?: Snippet;
|
|
17
17
|
};
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
exports: {};
|
|
19
|
+
bindings: "";
|
|
20
|
+
slots: {};
|
|
21
|
+
events: {};
|
|
22
|
+
};
|
|
23
|
+
declare class __sveltets_Render<T extends {
|
|
24
|
+
id: string;
|
|
25
|
+
}> {
|
|
26
|
+
props(): ReturnType<typeof $$render<T>>['props'];
|
|
27
|
+
events(): ReturnType<typeof $$render<T>>['events'];
|
|
28
|
+
slots(): ReturnType<typeof $$render<T>>['slots'];
|
|
20
29
|
bindings(): "";
|
|
21
30
|
exports(): {};
|
|
22
31
|
}
|
|
@@ -1,19 +1,28 @@
|
|
|
1
1
|
import { type PlayerButtonDef } from '../button';
|
|
2
2
|
import { PlayerConfig } from './player-config.svelte.js';
|
|
3
3
|
import type { Snippet } from 'svelte';
|
|
4
|
-
declare
|
|
4
|
+
declare function $$render<T extends {
|
|
5
5
|
id: string;
|
|
6
|
-
}> {
|
|
7
|
-
props
|
|
6
|
+
}>(): {
|
|
7
|
+
props: {
|
|
8
8
|
config: PlayerConfig<T>;
|
|
9
9
|
hasOverview: boolean;
|
|
10
10
|
itemActions: PlayerButtonDef[];
|
|
11
11
|
attachmentsView?: Snippet<[{
|
|
12
12
|
item: T;
|
|
13
|
-
}]
|
|
13
|
+
}]>;
|
|
14
14
|
};
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
exports: {};
|
|
16
|
+
bindings: "";
|
|
17
|
+
slots: {};
|
|
18
|
+
events: {};
|
|
19
|
+
};
|
|
20
|
+
declare class __sveltets_Render<T extends {
|
|
21
|
+
id: string;
|
|
22
|
+
}> {
|
|
23
|
+
props(): ReturnType<typeof $$render<T>>['props'];
|
|
24
|
+
events(): ReturnType<typeof $$render<T>>['events'];
|
|
25
|
+
slots(): ReturnType<typeof $$render<T>>['slots'];
|
|
17
26
|
bindings(): "";
|
|
18
27
|
exports(): {};
|
|
19
28
|
}
|
|
@@ -59,7 +59,6 @@ const styles = $derived.by(() => {
|
|
|
59
59
|
z-index: 0;
|
|
60
60
|
border-radius: 0.5rem 0 0 0.5rem;
|
|
61
61
|
background: var(--_overview-panel--background);
|
|
62
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
63
62
|
}
|
|
64
63
|
.overview-panel__content {
|
|
65
64
|
width: 100%;
|
|
@@ -71,6 +70,9 @@ const styles = $derived.by(() => {
|
|
|
71
70
|
overflow: hidden;
|
|
72
71
|
container-type: inline-size;
|
|
73
72
|
}
|
|
73
|
+
.overview-panel {
|
|
74
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
75
|
+
}
|
|
74
76
|
@container (width < 576px) {
|
|
75
77
|
.overview-panel {
|
|
76
78
|
width: 100%;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import type { PlayerConfig } from './player-config.svelte.js';
|
|
2
2
|
import type { PlayerUIManager } from './ui-manager.svelte';
|
|
3
3
|
import type { Snippet } from 'svelte';
|
|
4
|
-
declare
|
|
4
|
+
declare function $$render<T extends {
|
|
5
5
|
id: string;
|
|
6
|
-
}> {
|
|
7
|
-
props
|
|
6
|
+
}>(): {
|
|
7
|
+
props: {
|
|
8
8
|
config: PlayerConfig<T>;
|
|
9
9
|
uiManager: PlayerUIManager;
|
|
10
10
|
position: {
|
|
@@ -14,8 +14,17 @@ declare class __sveltets_Render<T extends {
|
|
|
14
14
|
};
|
|
15
15
|
children: Snippet;
|
|
16
16
|
};
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
exports: {};
|
|
18
|
+
bindings: "";
|
|
19
|
+
slots: {};
|
|
20
|
+
events: {};
|
|
21
|
+
};
|
|
22
|
+
declare class __sveltets_Render<T extends {
|
|
23
|
+
id: string;
|
|
24
|
+
}> {
|
|
25
|
+
props(): ReturnType<typeof $$render<T>>['props'];
|
|
26
|
+
events(): ReturnType<typeof $$render<T>>['events'];
|
|
27
|
+
slots(): ReturnType<typeof $$render<T>>['slots'];
|
|
19
28
|
bindings(): "";
|
|
20
29
|
exports(): {};
|
|
21
30
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import type { PlayerSliderBuffer, PlayerSliderCallbacks } from './types';
|
|
2
2
|
import { type Snippet } from 'svelte';
|
|
3
|
-
declare
|
|
3
|
+
declare function $$render<T extends {
|
|
4
4
|
id: string;
|
|
5
|
-
}> {
|
|
6
|
-
props
|
|
5
|
+
}>(): {
|
|
6
|
+
props: {
|
|
7
7
|
buffer: PlayerSliderBuffer<T>;
|
|
8
8
|
on?: PlayerSliderCallbacks;
|
|
9
9
|
children: Snippet<[{
|
|
@@ -11,8 +11,17 @@ declare class __sveltets_Render<T extends {
|
|
|
11
11
|
active?: boolean;
|
|
12
12
|
}]>;
|
|
13
13
|
};
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
exports: {};
|
|
15
|
+
bindings: "";
|
|
16
|
+
slots: {};
|
|
17
|
+
events: {};
|
|
18
|
+
};
|
|
19
|
+
declare class __sveltets_Render<T extends {
|
|
20
|
+
id: string;
|
|
21
|
+
}> {
|
|
22
|
+
props(): ReturnType<typeof $$render<T>>['props'];
|
|
23
|
+
events(): ReturnType<typeof $$render<T>>['events'];
|
|
24
|
+
slots(): ReturnType<typeof $$render<T>>['slots'];
|
|
16
25
|
bindings(): "";
|
|
17
26
|
exports(): {};
|
|
18
27
|
}
|
|
@@ -284,7 +284,6 @@ const showClassicArrowsAndDots = $derived([SliderMode.ArrowsAndDots, SliderMode.
|
|
|
284
284
|
width: 100%;
|
|
285
285
|
height: 100%;
|
|
286
286
|
overflow: hidden;
|
|
287
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
288
287
|
}
|
|
289
288
|
.slider__slides {
|
|
290
289
|
display: flex;
|
|
@@ -377,12 +376,14 @@ const showClassicArrowsAndDots = $derived([SliderMode.ArrowsAndDots, SliderMode.
|
|
|
377
376
|
text-align: center;
|
|
378
377
|
color: var(--sc-mc-color--text-white);
|
|
379
378
|
visibility: hidden;
|
|
380
|
-
/* Set 'container-type: inline-size;' to reference container*/
|
|
381
379
|
}
|
|
382
380
|
.slider__counts-navigation-button:disabled {
|
|
383
381
|
opacity: 0.5;
|
|
384
382
|
cursor: default;
|
|
385
383
|
}
|
|
384
|
+
.slider__counts-navigation-button {
|
|
385
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
386
|
+
}
|
|
386
387
|
@container (width < 576px) {
|
|
387
388
|
.slider__counts-navigation-button {
|
|
388
389
|
visibility: visible;
|
|
@@ -411,6 +412,9 @@ const showClassicArrowsAndDots = $derived([SliderMode.ArrowsAndDots, SliderMode.
|
|
|
411
412
|
position: static;
|
|
412
413
|
margin-top: 1rem;
|
|
413
414
|
}
|
|
415
|
+
.slider {
|
|
416
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
417
|
+
}
|
|
414
418
|
@container (width < 576px) {
|
|
415
419
|
.slider__navigation-button {
|
|
416
420
|
visibility: visible;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import type { Locale } from '../../../core/locale';
|
|
2
2
|
import { type SliderDotsConfig, SliderMode } from './types';
|
|
3
3
|
import { type Snippet } from 'svelte';
|
|
4
|
-
declare
|
|
5
|
-
props
|
|
4
|
+
declare function $$render<T>(): {
|
|
5
|
+
props: {
|
|
6
6
|
items: T[];
|
|
7
7
|
initialIndex: number;
|
|
8
8
|
sliderMode?: SliderMode;
|
|
@@ -11,11 +11,18 @@ declare class __sveltets_Render<T> {
|
|
|
11
11
|
locale: Locale;
|
|
12
12
|
on?: {
|
|
13
13
|
indexChanged: (index: number) => void;
|
|
14
|
-
}
|
|
14
|
+
};
|
|
15
15
|
children: Snippet<[T]>;
|
|
16
16
|
};
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
exports: {};
|
|
18
|
+
bindings: "";
|
|
19
|
+
slots: {};
|
|
20
|
+
events: {};
|
|
21
|
+
};
|
|
22
|
+
declare class __sveltets_Render<T> {
|
|
23
|
+
props(): ReturnType<typeof $$render<T>>['props'];
|
|
24
|
+
events(): ReturnType<typeof $$render<T>>['events'];
|
|
25
|
+
slots(): ReturnType<typeof $$render<T>>['slots'];
|
|
19
26
|
bindings(): "";
|
|
20
27
|
exports(): {};
|
|
21
28
|
}
|
|
@@ -51,7 +51,7 @@ const styles = $derived.by(() => {
|
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
53
|
:host,
|
|
54
|
-
:global([data-theme=
|
|
54
|
+
:global([data-theme='default']) {
|
|
55
55
|
/* Backgrounds */
|
|
56
56
|
--sc-mc-color--bg-button: #ffffff;
|
|
57
57
|
--sc-mc-color--bg-card: #ffffff;
|
|
@@ -85,7 +85,7 @@ const styles = $derived.by(() => {
|
|
|
85
85
|
--sc-mc-color--text-inactive: #e5e7eb;
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
-
:global([data-theme=
|
|
88
|
+
:global([data-theme='dark']) {
|
|
89
89
|
/* Backgrounds */
|
|
90
90
|
--sc-mc-color--bg-button: #111827;
|
|
91
91
|
--sc-mc-color--bg-card: #000000;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@streamscloud/embeddable",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "15.0.0-rc.0",
|
|
4
4
|
"author": "StreamsCloud",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
"peerDependencies": {
|
|
136
136
|
"@fluentui/svg-icons": "^1.1.301",
|
|
137
137
|
"@popperjs/core": "^2.11.8",
|
|
138
|
-
"@streamscloud/streams-analytics-collector": "^
|
|
138
|
+
"@streamscloud/streams-analytics-collector": "^3.0.0",
|
|
139
139
|
"@urql/core": "^5.1.1",
|
|
140
140
|
"dequal": "^2.0.3",
|
|
141
141
|
"dompurify": "^3.2.6",
|