@streamscloud/embeddable 6.3.6 → 6.3.8
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/short-videos/short-videos-player/index.d.ts +2 -1
- package/dist/short-videos/short-videos-player/internal-short-video-analytics-handler.d.ts +1 -1
- package/dist/short-videos/short-videos-player/internal-short-video-analytics-handler.js +1 -1
- package/dist/short-videos/short-videos-player/internal-short-video-player-provider.d.ts +1 -0
- package/dist/short-videos/short-videos-player/internal-short-video-player-provider.js +15 -5
- package/dist/short-videos/short-videos-player/short-videos-player-view.svelte +2 -2
- package/dist/short-videos/short-videos-player/types.d.ts +1 -1
- package/dist/streams/stream-player/internal-stream-analytics-handler.d.ts +2 -2
- package/dist/streams/stream-player/internal-stream-analytics-handler.js +1 -1
- package/dist/streams/stream-player/stream-player.svelte +1 -1
- package/dist/streams/stream-player/types.d.ts +1 -1
- package/package.json +4 -2
|
@@ -2,10 +2,11 @@ import { type IMediaCenterDataProvider } from '../../media-center/data-provider'
|
|
|
2
2
|
import type { ShortVideoViewerModel } from '../short-video-viewer';
|
|
3
3
|
import type { IPlayerItemsProvider } from '../../ui/player';
|
|
4
4
|
import { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
|
|
5
|
+
import { InternalShortVideoAnalyticsHandler } from './internal-short-video-analytics-handler';
|
|
5
6
|
import type { IShortVideosPlayerLocalization } from './short-videos-player-localization';
|
|
6
7
|
import { type PlayerSettings, type IShortVideoAnalyticsHandler } from './types';
|
|
7
8
|
export { ShortVideosPlayer };
|
|
8
|
-
export type { IShortVideosPlayerLocalization, IMediaCenterDataProvider, IPlayerItemsProvider, IShortVideoAnalyticsHandler };
|
|
9
|
+
export type { IShortVideosPlayerLocalization, IMediaCenterDataProvider, IPlayerItemsProvider, IShortVideoAnalyticsHandler, InternalShortVideoAnalyticsHandler };
|
|
9
10
|
/**
|
|
10
11
|
* Opens the short videos player modal.
|
|
11
12
|
*
|
|
@@ -4,5 +4,5 @@ export declare class InternalShortVideoAnalyticsHandler implements IShortVideoAn
|
|
|
4
4
|
setOrganizationId: (organizationId: string) => void;
|
|
5
5
|
trackShortVideoView: (videoId: string) => void;
|
|
6
6
|
trackShortVideoProductImpression: (productId: string, videoId: string) => void;
|
|
7
|
-
|
|
7
|
+
trackShortVideoProductClick: (productId: string, videoId: string) => void;
|
|
8
8
|
}
|
|
@@ -15,7 +15,7 @@ export class InternalShortVideoAnalyticsHandler {
|
|
|
15
15
|
trackShortVideoProductImpression = (productId, videoId) => {
|
|
16
16
|
AppEventsTracker.trackShortVideoProductImpression(productId, videoId);
|
|
17
17
|
};
|
|
18
|
-
|
|
18
|
+
trackShortVideoProductClick = (productId, videoId) => {
|
|
19
19
|
AppEventsTracker.trackShortVideoProductClick(productId, videoId);
|
|
20
20
|
};
|
|
21
21
|
}
|
|
@@ -3,6 +3,7 @@ import type { IPlayerItemsProvider } from '../../ui/player';
|
|
|
3
3
|
export declare class InternalShortVideoPlayerProvider implements IPlayerItemsProvider<ShortVideoViewerModel> {
|
|
4
4
|
initialData: IPlayerItemsProvider<ShortVideoViewerModel>['initialData'];
|
|
5
5
|
private ids;
|
|
6
|
+
private idOrder;
|
|
6
7
|
private initialId?;
|
|
7
8
|
private graphql;
|
|
8
9
|
private dataLoader;
|
|
@@ -4,21 +4,25 @@ import { CursorDataLoader } from '../../core/data-loaders';
|
|
|
4
4
|
import { createLocalGQLClient } from '../../core/graphql';
|
|
5
5
|
import { mapToShortVideoViewerModel } from '../short-video-viewer';
|
|
6
6
|
import { GetShortVideosDocument } from './operations.generated';
|
|
7
|
+
const CHUNK_SIZE = 20;
|
|
7
8
|
export class InternalShortVideoPlayerProvider {
|
|
8
9
|
initialData;
|
|
9
10
|
ids;
|
|
11
|
+
idOrder = new Map();
|
|
10
12
|
initialId;
|
|
11
13
|
graphql;
|
|
12
14
|
dataLoader = new CursorDataLoader({
|
|
13
15
|
loadPage: async (continuationToken) => {
|
|
16
|
+
const startIdIndex = continuationToken.value ? parseInt(continuationToken.value, 10) : 0;
|
|
17
|
+
const endIdIndex = Math.min(startIdIndex + CHUNK_SIZE, this.ids.length);
|
|
18
|
+
const idsChunk = this.ids.slice(startIdIndex, endIdIndex);
|
|
14
19
|
try {
|
|
15
20
|
const payload = await this.graphql
|
|
16
21
|
.query(GetShortVideosDocument, {
|
|
17
22
|
input: {
|
|
18
|
-
limit:
|
|
19
|
-
continuationToken,
|
|
23
|
+
limit: idsChunk.length,
|
|
20
24
|
filter: {
|
|
21
|
-
ids:
|
|
25
|
+
ids: idsChunk
|
|
22
26
|
}
|
|
23
27
|
},
|
|
24
28
|
image_scale: ImageScale.OriginalEncoded
|
|
@@ -28,9 +32,14 @@ export class InternalShortVideoPlayerProvider {
|
|
|
28
32
|
if (!data) {
|
|
29
33
|
return null;
|
|
30
34
|
}
|
|
35
|
+
const items = data.items.map(mapToShortVideoViewerModel).sort((a, b) => {
|
|
36
|
+
const ia = this.idOrder.get(a.id) ?? Number.MAX_SAFE_INTEGER;
|
|
37
|
+
const ib = this.idOrder.get(b.id) ?? Number.MAX_SAFE_INTEGER;
|
|
38
|
+
return ia - ib;
|
|
39
|
+
});
|
|
31
40
|
return {
|
|
32
|
-
items
|
|
33
|
-
continuationToken: ContinuationToken.fromPayload(
|
|
41
|
+
items,
|
|
42
|
+
continuationToken: ContinuationToken.fromPayload(endIdIndex < this.ids.length ? endIdIndex.toString() : null)
|
|
34
43
|
};
|
|
35
44
|
}
|
|
36
45
|
catch {
|
|
@@ -42,6 +51,7 @@ export class InternalShortVideoPlayerProvider {
|
|
|
42
51
|
const { ids, graphqlOrigin, initiator, initialId } = input;
|
|
43
52
|
this.graphql = createLocalGQLClient(graphqlOrigin, initiator ? { 'x-initiator': initiator } : undefined);
|
|
44
53
|
this.ids = ids;
|
|
54
|
+
ids.forEach((id, idx) => this.idOrder.set(id, idx));
|
|
45
55
|
this.initialId = initialId;
|
|
46
56
|
this.initialData = { prefetchedItems: [], startIndex: 0 };
|
|
47
57
|
}
|
|
@@ -90,7 +90,7 @@ const onPlayerClose = () => {
|
|
|
90
90
|
(_a = on === null || on === void 0 ? void 0 : on.playerClosed) === null || _a === void 0 ? void 0 : _a.call(on);
|
|
91
91
|
};
|
|
92
92
|
const onShortVideoProductClick = (productId, videoId) => {
|
|
93
|
-
analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.
|
|
93
|
+
analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductClick(productId, videoId);
|
|
94
94
|
};
|
|
95
95
|
const onShortVideoProductImpression = (productId, videoId) => {
|
|
96
96
|
analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductImpression(productId, videoId);
|
|
@@ -155,7 +155,7 @@ const onShortVideoProductImpression = (productId, videoId) => {
|
|
|
155
155
|
playerLogo={playerLogo}
|
|
156
156
|
on={{
|
|
157
157
|
closePlayer: on?.playerClosed,
|
|
158
|
-
productClick: (productId: string) => onShortVideoProductClick(productId, buffer
|
|
158
|
+
productClick: (productId: string) => onShortVideoProductClick(productId, buffer?.current?.id || ''),
|
|
159
159
|
productImpression: onShortVideoProductImpression
|
|
160
160
|
}} />
|
|
161
161
|
{:else}
|
|
@@ -6,7 +6,7 @@ export interface IShortVideoAnalyticsHandler {
|
|
|
6
6
|
setOrganizationId: (organizationId: string) => void;
|
|
7
7
|
trackShortVideoView: (videoId: string) => void;
|
|
8
8
|
trackShortVideoProductImpression: (productId: string, videoId: string) => void;
|
|
9
|
-
|
|
9
|
+
trackShortVideoProductClick: (productId: string, videoId: string) => void;
|
|
10
10
|
}
|
|
11
11
|
export type ShortVideoPlayerProps = PlayerSettings & {
|
|
12
12
|
dataProvider: IPlayerItemsProvider<ShortVideoViewerModel>;
|
|
@@ -6,11 +6,11 @@ export declare class InternalStreamAnalyticsHandler implements IStreamAnalyticsH
|
|
|
6
6
|
trackStreamPageView: (pageId: string, streamId: string) => void;
|
|
7
7
|
trackStreamEngagementTime: (streamId: string, engagementTime: number) => void;
|
|
8
8
|
trackStreamScrollDepth: (streamId: string, scrollDepth: number) => void;
|
|
9
|
-
trackStreamProductImpression: (productId: string, streamId: string) =>
|
|
9
|
+
trackStreamProductImpression: (productId: string, streamId: string) => any;
|
|
10
10
|
trackStreamProductClicked: (productId: string, streamId: string) => void;
|
|
11
11
|
reportPageVideoViews: (videoId: string, streamId: 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
|
trackShortVideoProgress: (pageId: string, videoId: string, progress: number, streamId: string) => void;
|
|
16
16
|
}
|
|
@@ -16,6 +16,6 @@ export class InternalStreamAnalyticsHandler {
|
|
|
16
16
|
reportPageVideoViews = (videoId, streamId) => AppEventsTracker.reportPageVideoViews(videoId, streamId);
|
|
17
17
|
trackShortVideoView = (videoId) => AppEventsTracker.trackShortVideoView(videoId);
|
|
18
18
|
trackShortVideoProductImpression = (productId, videoId) => AppEventsTracker.trackShortVideoProductImpression(productId, videoId);
|
|
19
|
-
|
|
19
|
+
trackShortVideoProductClick = (productId, videoId) => AppEventsTracker.trackShortVideoProductClick(productId, videoId);
|
|
20
20
|
trackShortVideoProgress = (pageId, videoId, progress, streamId) => AppEventsTracker.trackShortVideoProgress(pageId, videoId, progress, streamId);
|
|
21
21
|
}
|
|
@@ -147,7 +147,7 @@ const onProductCardClick = (productId) => {
|
|
|
147
147
|
analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamProductClicked(productId, streamId);
|
|
148
148
|
};
|
|
149
149
|
const onShortVideoProductClick = (productId, videoId) => {
|
|
150
|
-
analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.
|
|
150
|
+
analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductClick(productId, videoId);
|
|
151
151
|
};
|
|
152
152
|
const onStreamProductImpression = (productId) => {
|
|
153
153
|
analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamProductImpression(productId, streamId);
|
|
@@ -51,6 +51,6 @@ export interface IStreamAnalyticsHandler {
|
|
|
51
51
|
reportPageVideoViews: (videoId: string, streamId: string) => void;
|
|
52
52
|
trackShortVideoView: (videoId: string) => void;
|
|
53
53
|
trackShortVideoProductImpression: (productId: string, videoId: string) => void;
|
|
54
|
-
|
|
54
|
+
trackShortVideoProductClick: (productId: string, videoId: string) => void;
|
|
55
55
|
trackShortVideoProgress: (pageId: string, videoId: string, progress: number, streamId: string) => void;
|
|
56
56
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@streamscloud/embeddable",
|
|
3
|
-
"version": "6.3.
|
|
3
|
+
"version": "6.3.8",
|
|
4
4
|
"author": "StreamsCloud",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -10,7 +10,9 @@
|
|
|
10
10
|
"scripts": {
|
|
11
11
|
"dev": "vite dev --port 3010",
|
|
12
12
|
"build": "svelte-package --tsconfig ./tsconfig.app.json && prettier --write --plugin prettier-plugin-svelte . && eslint --fix .",
|
|
13
|
-
"
|
|
13
|
+
"publish:prod": "npm run build && npm publish --access public --tag latest",
|
|
14
|
+
"version:dev": "node -e \"const fs=require('fs');const pkg=require('./package.json');const base=(pkg.version.includes('-')?pkg.version.split('-')[0]:pkg.version);pkg.version=base+'-'+Date.now();fs.writeFileSync('package.json',JSON.stringify(pkg,null,2)+'\\n');\"",
|
|
15
|
+
"publish:dev": "npm run build && npm run version:dev && npm publish --tag next && git checkout -- package.json",
|
|
14
16
|
"pack": "npm run build && npm pack",
|
|
15
17
|
"preview": "vite preview",
|
|
16
18
|
"check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json",
|