@streamscloud/embeddable 15.0.1 → 15.0.2
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/ads/ad-card/cmp.ad-card.svelte +7 -9
- package/dist/external-api/data-providers/internal-media-center-analytics-handler.d.ts +14 -14
- package/dist/external-api/data-providers/internal-post-analytics-handler.d.ts +6 -6
- package/dist/external-api/data-providers/internal-stream-analytics-handler.d.ts +13 -13
- package/dist/media-center/media-center/cmp.media-center-proxy.svelte +4 -5
- package/dist/media-center/media-center/discover/community-features.svelte +12 -21
- package/dist/media-center/media-center/discover/discover-view.svelte +44 -35
- package/dist/media-center/media-center/handlers/categories-handler.svelte.js +2 -1
- package/dist/media-center/media-center/header/media-center-header-mobile.svelte +2 -4
- package/dist/media-center/media-center/header/media-center-header.svelte +4 -6
- package/dist/media-center/media-center/media-center-context.svelte.js +2 -1
- package/dist/media-center/media-center/media-center-view.svelte +5 -14
- package/dist/media-center/media-center/menu/category-following-wrapper.svelte +7 -16
- package/dist/media-center/media-center/menu/menu.svelte +5 -3
- package/dist/media-center/media-center/moments/cmp.moments-circle.svelte +1 -1
- package/dist/media-center/media-center/moments/moments-state.svelte.js +2 -1
- package/dist/media-center/media-center/streams-in-category/streams-in-category-panel.svelte +6 -2
- package/dist/media-page/cmp.media-page.svelte +6 -15
- package/dist/posts/controls/post-actions-generator.svelte.js +2 -1
- package/dist/posts/post-viewer/attachments-horizontal.svelte +23 -26
- package/dist/posts/post-viewer/media/post-media.svelte +5 -3
- package/dist/posts/posts-player/cmp.posts-player.svelte +4 -13
- package/dist/posts/posts-player/posts-player-proxy.svelte +2 -3
- package/dist/posts/posts-player/posts-player-view.svelte +36 -47
- package/dist/products/product-card/cmp.product-card.svelte +6 -7
- package/dist/short-videos/short-video-card/cmp.short-video-card.svelte +1 -1
- package/dist/streams/controls/stream-actions-generator.svelte.js +2 -1
- package/dist/streams/layout/cmp.slot-content.svelte +5 -6
- package/dist/streams/layout/element-views/cmp.price-stream-element.svelte +2 -3
- package/dist/streams/layout/element-views/cmp.products-slider-stream-element.svelte +1 -1
- package/dist/streams/layout/element-views/cmp.stock-stream-element.svelte +4 -7
- package/dist/streams/layout/element-views/price-element-view.svelte +14 -27
- package/dist/streams/streams-player/cmp.streams-player.svelte +4 -13
- package/dist/streams/streams-player/streams-player-proxy.svelte +2 -3
- package/dist/streams/streams-player/streams-player-view.svelte +44 -57
- package/dist/ui/button/resources/button-theme.svelte +4 -2
- package/dist/ui/dropdown/cmp.dropdown.svelte +4 -6
- package/dist/ui/icon/cmp.icon.svelte +1 -1
- package/dist/ui/image/cmp.image.svelte +2 -2
- package/dist/ui/infinite-scrolling/cmp.infinite-scrolling.svelte +6 -15
- package/dist/ui/line-clamp/cmp.line-clamp-auto.svelte +2 -2
- package/dist/ui/media-item-view/cmp.media-item-view.svelte +1 -1
- package/dist/ui/media-items-gallery/cmp.media-items-gallery.svelte +6 -15
- 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/close-orchestrator/close-orchestrator.svelte.js +2 -1
- package/dist/ui/player/player/cmp.player.svelte +2 -3
- package/dist/ui/player/player/cmp.player.svelte.d.ts +1 -1
- package/dist/ui/player/player/controls-and-attachments.svelte +2 -2
- package/dist/ui/player/player/overview-panel.svelte +3 -1
- package/dist/ui/player/slider/cmp.player-slider.svelte +6 -7
- package/dist/ui/player/slider-horizontal/cmp.slider.svelte +14 -11
- package/dist/ui/seek-bar/cmp.seek-bar.svelte +7 -9
- package/dist/ui/shadow-dom/cmp.shadow-root.svelte +2 -2
- package/dist/ui/video/cmp.video.svelte +17 -29
- package/package.json +41 -39
|
@@ -1,13 +1,4 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
|
-
import { Utils } from '../../../core/utils';
|
|
1
|
+
<script lang="ts">import { Utils } from '../../../core/utils';
|
|
11
2
|
import { toPriceRepresentation } from '../../../products/price-helper';
|
|
12
3
|
import { LineClamp } from '../../../ui/line-clamp';
|
|
13
4
|
import { PriceStreamElementLocalization } from './price-stream-element-localization';
|
|
@@ -21,7 +12,7 @@ let adjustedHeight = $derived(maxElementHeight);
|
|
|
21
12
|
const lineHeight = 1.2;
|
|
22
13
|
const elementHeight = $derived(adjustedHeight);
|
|
23
14
|
const priceHeight = $derived(model.stock ? elementHeight * 0.68 : elementHeight);
|
|
24
|
-
const adjustableHeight = $derived(!!
|
|
15
|
+
const adjustableHeight = $derived(!!on?.heightAdjusted);
|
|
25
16
|
const priceOptions = $derived({
|
|
26
17
|
currencyMode: model.includeCurrency ? 'symbol' : 'none'
|
|
27
18
|
});
|
|
@@ -41,13 +32,12 @@ const beforeValue = $derived.by(() => {
|
|
|
41
32
|
return toPriceRepresentation({ amount: data.price, currency: data.currency, options: priceOptions });
|
|
42
33
|
});
|
|
43
34
|
const elementContainerStyles = $derived.by(() => {
|
|
44
|
-
var _a, _b;
|
|
45
35
|
const values = [
|
|
46
36
|
'display: flex;',
|
|
47
37
|
'flex-direction: column;',
|
|
48
38
|
'justify-content: space-between;',
|
|
49
|
-
`align-items: ${mapFlexJustifyContent(
|
|
50
|
-
`font-family: ${mapFontFamily(
|
|
39
|
+
`align-items: ${mapFlexJustifyContent(model.styles?.horizontalAlign)};`,
|
|
40
|
+
`font-family: ${mapFontFamily(model.styles?.fontFamily)};`,
|
|
51
41
|
`height: ${transformNumericValue(elementHeight)};`
|
|
52
42
|
];
|
|
53
43
|
return values.join('');
|
|
@@ -57,34 +47,31 @@ const priceContainerStyles = $derived.by(() => {
|
|
|
57
47
|
return values.join('');
|
|
58
48
|
});
|
|
59
49
|
const priceCustomStyles = $derived.by(() => {
|
|
60
|
-
var _a, _b, _c;
|
|
61
50
|
const values = [
|
|
62
51
|
`font-size: ${transformFontSizeValue(priceHeight / lineHeight)};`,
|
|
63
52
|
`line-height: ${lineHeight};`,
|
|
64
|
-
`font-weight: ${mapFontWeight(
|
|
65
|
-
`color: ${transformTextColorValue(data.salePrice ?
|
|
53
|
+
`font-weight: ${mapFontWeight(model.styles?.fontWeight)};`,
|
|
54
|
+
`color: ${transformTextColorValue(data.salePrice ? model.styles?.salePriceColor : model.styles?.regularPriceColor)};`
|
|
66
55
|
];
|
|
67
56
|
return values.join('');
|
|
68
57
|
});
|
|
69
58
|
const saveValueCustomStyles = $derived.by(() => {
|
|
70
|
-
var _a, _b;
|
|
71
59
|
const values = [
|
|
72
60
|
`margin-top: ${transformNumericValue((priceHeight - priceHeight / lineHeight) / 2)};`,
|
|
73
61
|
`font-size: ${transformFontSizeValue(priceHeight / 4)};`,
|
|
74
62
|
`font-weight: 500;`,
|
|
75
63
|
`padding: ${transformNumericValue(priceHeight / 8)} ${transformNumericValue(priceHeight / 4)};`,
|
|
76
64
|
`border-radius: ${transformNumericValue(priceHeight / 8)};`,
|
|
77
|
-
`background-color: ${transformBackgroundColorValue(
|
|
78
|
-
`color: ${transformTextColorValue(
|
|
65
|
+
`background-color: ${transformBackgroundColorValue(model.styles?.saveValueBackgroundColor)};`,
|
|
66
|
+
`color: ${transformTextColorValue(model.styles?.saveValueColor)};`
|
|
79
67
|
];
|
|
80
68
|
return values.join('');
|
|
81
69
|
});
|
|
82
70
|
const beforeValueCustomStyles = $derived.by(() => {
|
|
83
|
-
var _a;
|
|
84
71
|
const values = [
|
|
85
72
|
`font-size: ${transformFontSizeValue(priceHeight / 5)};`,
|
|
86
73
|
`font-weight: 500;`,
|
|
87
|
-
`color: ${transformTextColorValue(
|
|
74
|
+
`color: ${transformTextColorValue(model.styles?.beforeValueColor)};`
|
|
88
75
|
];
|
|
89
76
|
return values.join('');
|
|
90
77
|
});
|
|
@@ -93,15 +80,15 @@ const textAfterCustomStyles = $derived.by(() => {
|
|
|
93
80
|
return values.join('');
|
|
94
81
|
});
|
|
95
82
|
const stockElementHeight = $derived(elementHeight * 0.23);
|
|
96
|
-
const adjustHeightToFit = () =>
|
|
83
|
+
const adjustHeightToFit = async () => {
|
|
97
84
|
if (!priceContainerRef || !priceElementRef || !adjustableHeight) {
|
|
98
85
|
return;
|
|
99
86
|
}
|
|
100
|
-
|
|
87
|
+
await new Promise((resolve) => requestAnimationFrame(resolve));
|
|
101
88
|
let currentHeight = maxElementHeight;
|
|
102
89
|
while (currentHeight > minElementHeight) {
|
|
103
90
|
adjustedHeight = currentHeight;
|
|
104
|
-
|
|
91
|
+
await new Promise((resolve) => requestAnimationFrame(resolve));
|
|
105
92
|
if (!priceContainerRef || !priceElementRef || !adjustableHeight) {
|
|
106
93
|
return;
|
|
107
94
|
}
|
|
@@ -111,8 +98,8 @@ const adjustHeightToFit = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
|
111
98
|
}
|
|
112
99
|
currentHeight -= 1;
|
|
113
100
|
}
|
|
114
|
-
on
|
|
115
|
-
}
|
|
101
|
+
on?.heightAdjusted(currentHeight);
|
|
102
|
+
};
|
|
116
103
|
const debouncedAdjustHeightToFit = Utils.debounce(adjustHeightToFit, 400);
|
|
117
104
|
$effect(() => {
|
|
118
105
|
const references = [maxElementHeight, currentPrice, saveValue, beforeValue, model.textAfter, model.includeCurrency, model.excludeBeforePrice];
|
|
@@ -1,13 +1,4 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
|
-
import { CloseOrchestrator } from '../../ui/player/close-orchestrator';
|
|
1
|
+
<script lang="ts">import { CloseOrchestrator } from '../../ui/player/close-orchestrator';
|
|
11
2
|
import { createShadowRoot } from '../../ui/shadow-dom';
|
|
12
3
|
import { default as StreamsPlayerProxy } from './streams-player-proxy.svelte';
|
|
13
4
|
import { mount, unmount } from 'svelte';
|
|
@@ -24,9 +15,9 @@ const initHost = (node) => {
|
|
|
24
15
|
amplificationParameters,
|
|
25
16
|
playerSettings,
|
|
26
17
|
closeOrchestrator: new CloseOrchestrator({
|
|
27
|
-
closeFn: () =>
|
|
28
|
-
|
|
29
|
-
}
|
|
18
|
+
closeFn: async () => {
|
|
19
|
+
await unmount(mounted);
|
|
20
|
+
},
|
|
30
21
|
canClose: false
|
|
31
22
|
}),
|
|
32
23
|
on
|
|
@@ -9,10 +9,9 @@ const handleBackgroundImagedLoaded = (url) => {
|
|
|
9
9
|
backgroundImageUrl = url;
|
|
10
10
|
};
|
|
11
11
|
$effect(() => {
|
|
12
|
-
void
|
|
12
|
+
void playerSettings?.theme;
|
|
13
13
|
untrack(() => {
|
|
14
|
-
|
|
15
|
-
Theme.set((_a = playerSettings === null || playerSettings === void 0 ? void 0 : playerSettings.theme) !== null && _a !== void 0 ? _a : 'dark');
|
|
14
|
+
Theme.set(playerSettings?.theme ?? 'dark');
|
|
16
15
|
});
|
|
17
16
|
});
|
|
18
17
|
</script>
|
|
@@ -1,14 +1,4 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
|
-
var _a;
|
|
11
|
-
import { preloadImage } from '../../core/image-preloader';
|
|
1
|
+
<script lang="ts">import { preloadImage } from '../../core/image-preloader';
|
|
12
2
|
import { PostAttachments } from '../../posts/attachments';
|
|
13
3
|
import { PostModel } from '../../posts/model';
|
|
14
4
|
import { PostViewer } from '../../posts/post-viewer';
|
|
@@ -24,11 +14,12 @@ import { StreamsPlayerBuffer } from './streams-player-buffer.svelte';
|
|
|
24
14
|
import IconDelete from '@fluentui/svg-icons/icons/delete_32_regular.svg?raw';
|
|
25
15
|
import IconEdit from '@fluentui/svg-icons/icons/edit_32_regular.svg?raw';
|
|
26
16
|
import { untrack } from 'svelte';
|
|
17
|
+
import { SvelteMap } from 'svelte/reactivity';
|
|
27
18
|
let { dataProvider, analyticsHandler, postSocialInteractionsHandler, sharingHandler, amplificationParameters, managementActions, playerSettings, closeOrchestrator, on } = $props();
|
|
28
|
-
const localization = $derived(new StreamPlayerLocalization(
|
|
19
|
+
const localization = $derived(new StreamPlayerLocalization(playerSettings?.locale ?? 'en'));
|
|
29
20
|
let currentStreamModel = $state(null);
|
|
30
|
-
let mappedPostsCache = new
|
|
31
|
-
let activePageId = $derived.by(() =>
|
|
21
|
+
let mappedPostsCache = new SvelteMap();
|
|
22
|
+
let activePageId = $derived.by(() => buffer?.current?.id ?? '');
|
|
32
23
|
let buffer = $state(null);
|
|
33
24
|
let totalEngagementTimeSeconds = 0;
|
|
34
25
|
let inactiveTimeSeconds = 10; // // Mark as inactive after 10 seconds of no activity
|
|
@@ -40,7 +31,7 @@ const trackingParams = $derived.by(() => {
|
|
|
40
31
|
return currentStreamModel
|
|
41
32
|
? {
|
|
42
33
|
streamId: currentStreamModel.id,
|
|
43
|
-
campaignId: amplificationParameters
|
|
34
|
+
campaignId: amplificationParameters?.campaignId
|
|
44
35
|
}
|
|
45
36
|
: false;
|
|
46
37
|
});
|
|
@@ -49,29 +40,27 @@ $effect(() => {
|
|
|
49
40
|
untrack(() => {
|
|
50
41
|
buffer = null;
|
|
51
42
|
contentPlayerConfig.playerBuffer = null;
|
|
52
|
-
mappedPostsCache = new
|
|
43
|
+
mappedPostsCache = new SvelteMap();
|
|
53
44
|
initPlayerBuffer(dataProvider);
|
|
54
45
|
});
|
|
55
46
|
return () => { };
|
|
56
47
|
});
|
|
57
48
|
$effect(() => {
|
|
58
|
-
|
|
59
|
-
const stream = (_a = buffer === null || buffer === void 0 ? void 0 : buffer.activeChunk) === null || _a === void 0 ? void 0 : _a.model;
|
|
49
|
+
const stream = buffer?.activeChunk?.model;
|
|
60
50
|
untrack(() => {
|
|
61
|
-
var _a;
|
|
62
51
|
if (stream) {
|
|
63
52
|
currentStreamModel = stream;
|
|
64
|
-
|
|
65
|
-
analyticsHandler
|
|
53
|
+
on?.streamActivated?.({ id: stream.id, title: stream.title, image: stream.cover });
|
|
54
|
+
analyticsHandler?.trackStreamView(stream.id);
|
|
66
55
|
startActivityTracking();
|
|
67
56
|
}
|
|
68
57
|
});
|
|
69
58
|
return () => {
|
|
70
59
|
stopActivityTracking();
|
|
71
60
|
if (currentStreamModel) {
|
|
72
|
-
analyticsHandler
|
|
61
|
+
analyticsHandler?.trackStreamEngagementTime(currentStreamModel.id, totalEngagementTimeSeconds);
|
|
73
62
|
let scrollDepth = Math.round(((maxPageIndexViewed + 1) / currentStreamModel.pagesCount) * 100);
|
|
74
|
-
analyticsHandler
|
|
63
|
+
analyticsHandler?.trackStreamScrollDepth(currentStreamModel.id, scrollDepth);
|
|
75
64
|
}
|
|
76
65
|
totalEngagementTimeSeconds = 0;
|
|
77
66
|
maxPageIndexViewed = 0;
|
|
@@ -81,11 +70,11 @@ const streamTrackingParams = $derived.by(() => {
|
|
|
81
70
|
return currentStreamModel
|
|
82
71
|
? {
|
|
83
72
|
streamId: currentStreamModel.id,
|
|
84
|
-
campaignId: amplificationParameters
|
|
73
|
+
campaignId: amplificationParameters?.campaignId
|
|
85
74
|
}
|
|
86
75
|
: false;
|
|
87
76
|
});
|
|
88
|
-
const initPlayerBuffer = (dataProvider) =>
|
|
77
|
+
const initPlayerBuffer = async (dataProvider) => {
|
|
89
78
|
let newBuffer;
|
|
90
79
|
if (dataProvider.type === 'buffer') {
|
|
91
80
|
newBuffer = dataProvider.buffer;
|
|
@@ -93,32 +82,32 @@ const initPlayerBuffer = (dataProvider) => __awaiter(void 0, void 0, void 0, fun
|
|
|
93
82
|
else {
|
|
94
83
|
newBuffer = new StreamsPlayerBuffer(dataProvider.provider);
|
|
95
84
|
}
|
|
96
|
-
if (newBuffer.loaded.length &&
|
|
85
|
+
if (newBuffer.loaded.length && on?.backgroundImageLoaded) {
|
|
97
86
|
const coverUrl = newBuffer.loaded[0].cover;
|
|
98
87
|
if (coverUrl) {
|
|
99
|
-
|
|
88
|
+
await preloadImage(coverUrl);
|
|
100
89
|
}
|
|
101
90
|
on.backgroundImageLoaded(coverUrl);
|
|
102
91
|
}
|
|
103
92
|
buffer = newBuffer;
|
|
104
93
|
contentPlayerConfig.playerBuffer = newBuffer;
|
|
105
|
-
}
|
|
106
|
-
const contentPlayerConfig = new PlayerConfig({
|
|
94
|
+
};
|
|
95
|
+
const contentPlayerConfig = untrack(() => new PlayerConfig({
|
|
107
96
|
playerBuffer: null,
|
|
108
97
|
settings: new PlayerSettings(playerSettings),
|
|
109
98
|
closeOrchestrator,
|
|
110
99
|
playerSliderCallbacks: {
|
|
111
100
|
itemActivated: (item) => onPageActivated(item),
|
|
112
101
|
itemDeactivated: (itemId) => executeWithStreamId((streamId) => {
|
|
113
|
-
analyticsHandler
|
|
102
|
+
analyticsHandler?.reportPageVideoViews(itemId, streamId);
|
|
114
103
|
})
|
|
115
104
|
}
|
|
116
|
-
});
|
|
117
|
-
const streamActionsGenerator = new StreamActionsGenerator({
|
|
105
|
+
}));
|
|
106
|
+
const streamActionsGenerator = untrack(() => new StreamActionsGenerator({
|
|
118
107
|
postSocialInteractionsHandler,
|
|
119
108
|
sharingHandler,
|
|
120
109
|
on: { attachmentClicked: () => (contentPlayerConfig.uiManager.attachmentsCollapsed = !contentPlayerConfig.uiManager.attachmentsCollapsed) }
|
|
121
|
-
});
|
|
110
|
+
}));
|
|
122
111
|
const itemAsPostModel = (item) => {
|
|
123
112
|
if (item.type !== 'short-video' || !item.shortVideo) {
|
|
124
113
|
return null;
|
|
@@ -137,18 +126,17 @@ const handleChangePage = (index) => {
|
|
|
137
126
|
buffer.setActiveChunkItemIndex(index);
|
|
138
127
|
};
|
|
139
128
|
const onPageActivated = (id) => {
|
|
140
|
-
|
|
141
|
-
const activeChunk = buffer === null || buffer === void 0 ? void 0 : buffer.activeChunk;
|
|
129
|
+
const activeChunk = buffer?.activeChunk;
|
|
142
130
|
if (!activeChunk) {
|
|
143
131
|
return;
|
|
144
132
|
}
|
|
145
133
|
const page = activeChunk.items.find((x) => x.id === id);
|
|
146
|
-
|
|
134
|
+
on?.backgroundImageLoaded?.(page?.cover || null);
|
|
147
135
|
if (page) {
|
|
148
|
-
|
|
149
|
-
analyticsHandler
|
|
136
|
+
on?.streamPageActivated?.({ streamId: activeChunk.model.id, streamPageId: page.id });
|
|
137
|
+
analyticsHandler?.trackStreamPageView(id, activeChunk.model.id);
|
|
150
138
|
if (page.type === 'short-video' && page.shortVideo) {
|
|
151
|
-
analyticsHandler
|
|
139
|
+
analyticsHandler?.trackShortVideoView(page.shortVideo.id);
|
|
152
140
|
}
|
|
153
141
|
const currentIndex = activeChunk.items.findIndex((p) => p.id === id);
|
|
154
142
|
if (currentIndex > maxPageIndexViewed) {
|
|
@@ -160,32 +148,32 @@ const onShortVideoProgress = (pageId, videoId, progress) => {
|
|
|
160
148
|
onProgress(pageId, videoId, progress);
|
|
161
149
|
};
|
|
162
150
|
const onShortVideoProductClick = (id, videoId) => {
|
|
163
|
-
analyticsHandler
|
|
151
|
+
analyticsHandler?.trackShortVideoProductClick(id, videoId);
|
|
164
152
|
onStreamProductClick(id);
|
|
165
153
|
};
|
|
166
154
|
const onShortVideoProductImpression = (id, videoId) => {
|
|
167
|
-
analyticsHandler
|
|
155
|
+
analyticsHandler?.trackShortVideoProductImpression(id, videoId);
|
|
168
156
|
onStreamProductImpression(id);
|
|
169
157
|
};
|
|
170
158
|
const onShortVideoAdClick = (id) => {
|
|
171
|
-
analyticsHandler
|
|
159
|
+
analyticsHandler?.trackAdClick(id);
|
|
172
160
|
};
|
|
173
161
|
const onShortVideoAdImpression = (id) => {
|
|
174
|
-
analyticsHandler
|
|
162
|
+
analyticsHandler?.trackAdImpression(id);
|
|
175
163
|
};
|
|
176
164
|
const onStreamProductClick = (productId) => {
|
|
177
165
|
executeWithStreamId((streamId) => {
|
|
178
|
-
analyticsHandler
|
|
166
|
+
analyticsHandler?.trackStreamProductClicked(productId, streamId);
|
|
179
167
|
});
|
|
180
168
|
};
|
|
181
169
|
const onStreamProductImpression = (productId) => {
|
|
182
170
|
executeWithStreamId((streamId) => {
|
|
183
|
-
analyticsHandler
|
|
171
|
+
analyticsHandler?.trackStreamProductImpression(productId, streamId);
|
|
184
172
|
});
|
|
185
173
|
};
|
|
186
174
|
const onProgress = (pageId, videoId, progress) => {
|
|
187
175
|
executeWithStreamId((streamId) => {
|
|
188
|
-
analyticsHandler
|
|
176
|
+
analyticsHandler?.trackShortVideoProgress(pageId, videoId, progress, streamId);
|
|
189
177
|
});
|
|
190
178
|
};
|
|
191
179
|
const executeWithStreamId = (action) => {
|
|
@@ -195,7 +183,7 @@ const executeWithStreamId = (action) => {
|
|
|
195
183
|
action(currentStreamModel.id);
|
|
196
184
|
};
|
|
197
185
|
const currentItemActions = $derived.by(() => {
|
|
198
|
-
if (!
|
|
186
|
+
if (!buffer?.current || !buffer.activeChunk) {
|
|
199
187
|
return [];
|
|
200
188
|
}
|
|
201
189
|
const result = [];
|
|
@@ -214,33 +202,32 @@ const currentItemActions = $derived.by(() => {
|
|
|
214
202
|
});
|
|
215
203
|
result.push(...handler.actions);
|
|
216
204
|
}
|
|
217
|
-
if (managementActions
|
|
205
|
+
if (managementActions?.editStream) {
|
|
218
206
|
result.push({
|
|
219
207
|
icon: IconEdit,
|
|
220
|
-
callback: () =>
|
|
221
|
-
|
|
222
|
-
}
|
|
208
|
+
callback: async () => {
|
|
209
|
+
await managementActions.editStream(buffer.activeChunk.model.id);
|
|
210
|
+
}
|
|
223
211
|
});
|
|
224
212
|
}
|
|
225
|
-
if (managementActions
|
|
213
|
+
if (managementActions?.deleteStreamPage) {
|
|
226
214
|
result.push({
|
|
227
215
|
icon: IconDelete,
|
|
228
216
|
iconColor: IconColor.Red,
|
|
229
|
-
callback: () =>
|
|
230
|
-
|
|
231
|
-
}
|
|
217
|
+
callback: async () => {
|
|
218
|
+
await managementActions.deleteStreamPage(buffer.current.id);
|
|
219
|
+
}
|
|
232
220
|
});
|
|
233
221
|
}
|
|
234
222
|
return result;
|
|
235
223
|
});
|
|
236
224
|
const handlePageViewMounted = (node) => {
|
|
237
225
|
const updatePosition = () => {
|
|
238
|
-
var _a;
|
|
239
226
|
const progressElement = node.querySelector('[id^="chunk-progress-"]');
|
|
240
227
|
if (!progressElement) {
|
|
241
228
|
return;
|
|
242
229
|
}
|
|
243
|
-
const overlayMinOffsetTop =
|
|
230
|
+
const overlayMinOffsetTop = playerSettings?.overlayMinOffsetTop ?? 0;
|
|
244
231
|
if (!overlayMinOffsetTop) {
|
|
245
232
|
progressElement.style.top = '';
|
|
246
233
|
return;
|
|
@@ -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;
|
|
@@ -6,8 +6,7 @@ import { createPopper } from '@popperjs/core';
|
|
|
6
6
|
import { onDestroy } from 'svelte';
|
|
7
7
|
let { position = 'bottom-start', disabled = false, keepDropdownOpen = false, fixedPosition = false, offset = 8, boundaryMargin = 8, on, children, trigger, isOpenRequested } = $props();
|
|
8
8
|
$effect(() => {
|
|
9
|
-
|
|
10
|
-
(_a = on === null || on === void 0 ? void 0 : on.mounted) === null || _a === void 0 ? void 0 : _a.call(on, {
|
|
9
|
+
on?.mounted?.({
|
|
11
10
|
toggleOpen: (value) => {
|
|
12
11
|
if (value === undefined) {
|
|
13
12
|
if (opened) {
|
|
@@ -30,16 +29,15 @@ $effect(() => {
|
|
|
30
29
|
});
|
|
31
30
|
let opened = $state(false);
|
|
32
31
|
$effect(() => {
|
|
33
|
-
var _a, _b;
|
|
34
32
|
if (opened) {
|
|
35
|
-
|
|
33
|
+
on?.opened?.();
|
|
36
34
|
}
|
|
37
35
|
else {
|
|
38
|
-
|
|
36
|
+
on?.closed?.();
|
|
39
37
|
}
|
|
40
38
|
});
|
|
41
39
|
$effect(() => {
|
|
42
|
-
popper
|
|
40
|
+
popper?.setOptions({ placement: position });
|
|
43
41
|
});
|
|
44
42
|
$effect(() => {
|
|
45
43
|
if (isOpenRequested) {
|
|
@@ -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>
|
|
@@ -6,11 +6,11 @@ let hasError = $state(false);
|
|
|
6
6
|
const imageState = $derived(calculateImageState(src, hasError, showStubOnError));
|
|
7
7
|
const onLoad = () => {
|
|
8
8
|
hasError = false;
|
|
9
|
-
on
|
|
9
|
+
on?.load(true);
|
|
10
10
|
};
|
|
11
11
|
const onLoadError = () => {
|
|
12
12
|
hasError = true;
|
|
13
|
-
on
|
|
13
|
+
on?.load(false);
|
|
14
14
|
};
|
|
15
15
|
</script>
|
|
16
16
|
|
|
@@ -1,13 +1,4 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
|
-
import { Loading } from '../loading';
|
|
1
|
+
<script lang="ts">import { Loading } from '../loading';
|
|
11
2
|
import { onDestroy, onMount } from 'svelte';
|
|
12
3
|
let { loadMore, container = null, actuationOffset = '', children, loading } = $props();
|
|
13
4
|
let isLoading = $state(false);
|
|
@@ -32,21 +23,21 @@ onMount(() => {
|
|
|
32
23
|
resizeObserver.observe(itemsContainer);
|
|
33
24
|
});
|
|
34
25
|
onDestroy(() => {
|
|
35
|
-
resizeObserver
|
|
36
|
-
intersectionObserver
|
|
26
|
+
resizeObserver?.disconnect();
|
|
27
|
+
intersectionObserver?.disconnect();
|
|
37
28
|
});
|
|
38
|
-
const onLoadMore = () =>
|
|
29
|
+
const onLoadMore = async () => {
|
|
39
30
|
if (isLoading) {
|
|
40
31
|
return;
|
|
41
32
|
}
|
|
42
33
|
isLoading = true;
|
|
43
34
|
try {
|
|
44
|
-
|
|
35
|
+
await loadMore();
|
|
45
36
|
}
|
|
46
37
|
finally {
|
|
47
38
|
isLoading = false;
|
|
48
39
|
}
|
|
49
|
-
}
|
|
40
|
+
};
|
|
50
41
|
</script>
|
|
51
42
|
|
|
52
43
|
<div class="infinite-scrolling">
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { LineClampUtils } from './line-clamp-utils';
|
|
3
3
|
import { onDestroy, onMount } from 'svelte';
|
|
4
4
|
let { locale, enableShowMore = false, children } = $props();
|
|
5
|
-
const localization = $derived(new LineClampLocalization(locale
|
|
5
|
+
const localization = $derived(new LineClampLocalization(locale ?? 'en'));
|
|
6
6
|
let parent;
|
|
7
7
|
let element;
|
|
8
8
|
let clampWrapperRef;
|
|
@@ -23,7 +23,7 @@ onMount(() => {
|
|
|
23
23
|
}
|
|
24
24
|
});
|
|
25
25
|
onDestroy(() => {
|
|
26
|
-
resizeObserver
|
|
26
|
+
resizeObserver?.disconnect();
|
|
27
27
|
resizeObserver = null;
|
|
28
28
|
});
|
|
29
29
|
const clamp = () => {
|
|
@@ -5,7 +5,7 @@ import { ProportionalContainer } from '../proportional-container';
|
|
|
5
5
|
import { Video } from '../video';
|
|
6
6
|
let { media, ratio = 0, inert = false, on } = $props();
|
|
7
7
|
const handleClick = (e) => {
|
|
8
|
-
if (on
|
|
8
|
+
if (on?.click) {
|
|
9
9
|
e.stopPropagation();
|
|
10
10
|
on.click();
|
|
11
11
|
}
|
|
@@ -1,34 +1,25 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
|
-
import { MediaFormat } from '../../core/enums';
|
|
1
|
+
<script lang="ts">import { MediaFormat } from '../../core/enums';
|
|
11
2
|
import {} from '../../core/media';
|
|
12
3
|
import { MediaItemView } from '../media-item-view';
|
|
13
4
|
import { GalleryLayout } from './types';
|
|
14
5
|
let { media, singleImageRatio = 0, inert = false, on } = $props();
|
|
15
6
|
let layout = $state(null);
|
|
16
|
-
const initLayout = () =>
|
|
7
|
+
const initLayout = async () => {
|
|
17
8
|
if (!media.length || media.length === 1 || media.length > 4) {
|
|
18
9
|
layout = null;
|
|
19
10
|
}
|
|
20
11
|
else {
|
|
21
|
-
layout =
|
|
12
|
+
layout = await GalleryLayout.generate(media);
|
|
22
13
|
}
|
|
23
|
-
}
|
|
14
|
+
};
|
|
24
15
|
$effect(() => {
|
|
25
16
|
initLayout();
|
|
26
17
|
});
|
|
27
18
|
const upperTwoImages = $derived(media.length > 4 ? media.slice(0, 2) : []);
|
|
28
19
|
const bottomThreeImages = $derived(media.length > 4 ? media.slice(2, 5) : []);
|
|
29
20
|
const handleGalleryItemClick = (index) => {
|
|
30
|
-
if (on
|
|
31
|
-
on
|
|
21
|
+
if (on?.click) {
|
|
22
|
+
on?.click(index);
|
|
32
23
|
return;
|
|
33
24
|
}
|
|
34
25
|
/*const toMediaViewerItemType = (type: MediaType) => {
|
|
@@ -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,3 +1,4 @@
|
|
|
1
|
+
import { SvelteSet } from 'svelte/reactivity';
|
|
1
2
|
export class CloseOrchestrator {
|
|
2
3
|
closingInProgress = $state(false);
|
|
3
4
|
closed = $state(false);
|
|
@@ -5,7 +6,7 @@ export class CloseOrchestrator {
|
|
|
5
6
|
closeTriggerAttached = $state(false);
|
|
6
7
|
_canClose;
|
|
7
8
|
_closeFn;
|
|
8
|
-
_callbacks = new
|
|
9
|
+
_callbacks = new SvelteSet();
|
|
9
10
|
constructor(init) {
|
|
10
11
|
this._closeFn = init.closeFn;
|
|
11
12
|
this._canClose = init.canClose;
|