@streamscloud/embeddable 6.5.2 → 7.0.0-1758321891466
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/enums.d.ts +3 -0
- package/dist/core/enums.js +4 -0
- package/dist/core/locale.d.ts +0 -4
- package/dist/core/locale.js +1 -12
- package/dist/media-center/config/internal-media-center-config.d.ts +9 -0
- package/dist/media-center/config/internal-media-center-config.js +81 -0
- package/dist/media-center/{data-provider → config}/operations.generated.d.ts +20 -3
- package/dist/media-center/{data-provider → config}/operations.generated.js +53 -2
- package/dist/media-center/{data-provider → config}/operations.graphql +15 -1
- package/dist/media-center/config/types.d.ts +52 -0
- package/dist/media-center/index.d.ts +1 -1
- package/dist/media-center/media-center/cmp.media-center.svelte +106 -66
- package/dist/media-center/media-center/cmp.media-center.svelte.d.ts +11 -11
- package/dist/media-center/media-center/index.d.ts +0 -1
- package/dist/media-center/media-center/media-center-localization.d.ts +3 -8
- package/dist/media-center/media-center/media-center-localization.js +12 -6
- package/dist/media-center/media-center/overview.svelte +14 -1
- package/dist/media-center/media-center/overview.svelte.d.ts +1 -0
- package/dist/media-center/media-center/short-video-resources-generator.d.ts +2 -2
- package/dist/media-center/media-center/short-video-resources-generator.js +2 -2
- package/dist/media-center/media-center/streams-in-category.svelte +100 -0
- package/dist/media-center/media-center/streams-in-category.svelte.d.ts +10 -0
- package/dist/media-center/media-center/types.d.ts +11 -0
- package/dist/products/product-card/cmp.product-card.svelte +2 -2
- package/dist/products/product-card/cmp.product-card.svelte.d.ts +1 -2
- package/dist/products/product-card/product-card-localization.d.ts +1 -4
- package/dist/products/product-card/product-card-localization.js +2 -2
- package/dist/short-videos/short-video-card/cmp.short-video-card.svelte +11 -46
- package/dist/short-videos/short-video-viewer/cmp.attachments-horizontal.svelte +1 -1
- package/dist/short-videos/short-video-viewer/cmp.attachments.svelte +3 -3
- package/dist/short-videos/short-video-viewer/cmp.attachments.svelte.d.ts +1 -2
- package/dist/short-videos/short-video-viewer/cmp.short-video-heading.svelte +2 -3
- package/dist/short-videos/short-video-viewer/cmp.short-video-heading.svelte.d.ts +2 -2
- package/dist/short-videos/short-video-viewer/cmp.short-video-product-card.svelte +2 -2
- package/dist/short-videos/short-video-viewer/cmp.short-video-product-card.svelte.d.ts +1 -2
- package/dist/short-videos/short-video-viewer/cmp.short-video-viewer.svelte +2 -2
- package/dist/short-videos/short-video-viewer/cmp.short-video-viewer.svelte.d.ts +1 -2
- package/dist/short-videos/short-video-viewer/index.d.ts +0 -2
- package/dist/short-videos/short-video-viewer/short-video-attachments-localization.d.ts +2 -6
- package/dist/short-videos/short-video-viewer/short-video-attachments-localization.js +4 -4
- package/dist/short-videos/short-video-viewer/short-video-viewer-localization.d.ts +3 -10
- package/dist/short-videos/short-video-viewer/short-video-viewer-localization.js +7 -7
- package/dist/short-videos/short-videos-player/cmp.short-videos-player.svelte +4 -4
- package/dist/short-videos/short-videos-player/cmp.short-videos-player.svelte.d.ts +2 -2
- package/dist/short-videos/short-videos-player/controls.svelte +1 -1
- package/dist/short-videos/short-videos-player/index.d.ts +12 -10
- package/dist/short-videos/short-videos-player/index.js +9 -8
- package/dist/short-videos/short-videos-player/short-videos-player-localization.d.ts +4 -11
- package/dist/short-videos/short-videos-player/short-videos-player-localization.js +8 -8
- package/dist/short-videos/short-videos-player/short-videos-player-view.svelte +4 -4
- package/dist/short-videos/short-videos-player/types.d.ts +2 -4
- package/dist/streams/cmp.stream-product-card.svelte +2 -2
- package/dist/streams/cmp.stream-product-card.svelte.d.ts +1 -2
- package/dist/streams/layout/cmp.slot-content.svelte +2 -2
- package/dist/streams/layout/cmp.slot-content.svelte.d.ts +1 -2
- package/dist/streams/layout/element-views/cmp.container-stream-element.svelte +3 -8
- package/dist/streams/layout/element-views/cmp.container-stream-element.svelte.d.ts +1 -2
- package/dist/streams/layout/element-views/cmp.price-stream-element.svelte +2 -2
- package/dist/streams/layout/element-views/cmp.price-stream-element.svelte.d.ts +1 -2
- package/dist/streams/layout/element-views/cmp.short-video-stream-element.svelte +3 -8
- package/dist/streams/layout/element-views/cmp.short-video-stream-element.svelte.d.ts +1 -2
- package/dist/streams/layout/element-views/cmp.stock-stream-element.svelte +2 -2
- package/dist/streams/layout/element-views/cmp.stock-stream-element.svelte.d.ts +1 -2
- package/dist/streams/layout/element-views/cmp.stream-element.svelte +6 -6
- package/dist/streams/layout/element-views/cmp.stream-element.svelte.d.ts +1 -2
- package/dist/streams/layout/element-views/index.d.ts +0 -4
- package/dist/streams/layout/element-views/price-element-view.svelte +1 -1
- package/dist/streams/layout/element-views/price-stream-element-localization.d.ts +2 -8
- package/dist/streams/layout/element-views/price-stream-element-localization.js +5 -5
- package/dist/streams/layout/element-views/short-video-stream-element-localization.d.ts +2 -6
- package/dist/streams/layout/element-views/short-video-stream-element-localization.js +4 -4
- package/dist/streams/layout/element-views/stock-stream-element-localization.d.ts +1 -4
- package/dist/streams/layout/element-views/stock-stream-element-localization.js +2 -2
- package/dist/streams/layout/element-views/stream-element-localization.d.ts +4 -12
- package/dist/streams/layout/element-views/stream-element-localization.js +5 -5
- package/dist/streams/stream-card/cmp.stream-card.svelte +89 -0
- package/dist/streams/stream-card/cmp.stream-card.svelte.d.ts +11 -0
- package/dist/streams/stream-card/index.d.ts +2 -0
- package/dist/streams/stream-card/index.js +1 -0
- package/dist/streams/stream-card/types.d.ts +6 -0
- package/dist/streams/stream-card/types.js +1 -0
- package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte +3 -3
- package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte.d.ts +1 -2
- package/dist/streams/stream-page-viewer/index.d.ts +0 -1
- package/dist/streams/stream-page-viewer/stream-page-viewer-localization.d.ts +2 -6
- package/dist/streams/stream-page-viewer/stream-page-viewer-localization.js +3 -3
- package/dist/streams/stream-player/controls.svelte +1 -1
- package/dist/streams/stream-player/index.d.ts +15 -10
- package/dist/streams/stream-player/index.js +11 -8
- package/dist/streams/stream-player/internal-stream-player-data-provider.d.ts +2 -0
- package/dist/streams/stream-player/internal-stream-player-data-provider.js +2 -2
- package/dist/streams/stream-player/stream-overview.svelte +1 -1
- package/dist/streams/stream-player/stream-player-localization.d.ts +6 -19
- package/dist/streams/stream-player/stream-player-localization.js +14 -14
- package/dist/streams/stream-player/stream-player.svelte +6 -6
- package/dist/streams/stream-player/types.d.ts +4 -4
- package/dist/ui/line-clamp/cmp.line-clamp.svelte +2 -2
- package/dist/ui/line-clamp/cmp.line-clamp.svelte.d.ts +1 -2
- package/dist/ui/line-clamp/index.d.ts +0 -1
- package/dist/ui/line-clamp/index.js +0 -1
- package/dist/ui/line-clamp/line-clamp-localization.d.ts +1 -5
- package/dist/ui/line-clamp/line-clamp-localization.js +4 -4
- package/dist/ui/shadow-dom/{reset.scss → reset-shadow.css} +31 -44
- package/dist/ui/shadow-dom/shadow-root-service.js +2 -2
- package/dist/ui/swipe-indicator/cmp.swipe-indicator.svelte +2 -2
- package/dist/ui/swipe-indicator/cmp.swipe-indicator.svelte.d.ts +1 -2
- package/dist/ui/swipe-indicator/index.d.ts +0 -1
- package/dist/ui/swipe-indicator/swipe-indicator-localization.d.ts +1 -4
- package/dist/ui/swipe-indicator/swipe-indicator-localization.js +3 -3
- package/dist/ui/time-ago/cmp.time-ago.svelte +2 -2
- package/dist/ui/time-ago/cmp.time-ago.svelte.d.ts +1 -2
- package/dist/ui/time-ago/index.d.ts +0 -1
- package/dist/ui/time-ago/time-ago-localization.d.ts +1 -11
- package/dist/ui/time-ago/time-ago-localization.js +10 -10
- package/package.json +1 -1
- package/dist/media-center/data-provider/index.d.ts +0 -2
- package/dist/media-center/data-provider/index.js +0 -1
- package/dist/media-center/data-provider/internal-media-center-data-provider.svelte.d.ts +0 -8
- package/dist/media-center/data-provider/internal-media-center-data-provider.svelte.js +0 -46
- package/dist/media-center/data-provider/types.d.ts +0 -24
- /package/dist/media-center/{data-provider → config}/types.js +0 -0
- /package/dist/ui/shadow-dom/{normalize.scss → normalize-shadow.css} +0 -0
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import { type
|
|
1
|
+
import { type IMediaCenterConfig } from '../../media-center/config/types';
|
|
2
|
+
import type { IPostSocialInteractionsHandler } from '../short-video-viewer';
|
|
2
3
|
import type { IPlayerItemsProvider } from '../../ui/player';
|
|
3
4
|
import { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
|
|
4
5
|
import { mapToShortVideoPlayerModel } from './mapper';
|
|
5
|
-
import type { IShortVideosPlayerLocalization } from './short-videos-player-localization';
|
|
6
6
|
import { type PlayerSettings, type IShortVideoAnalyticsHandler, type ShortVideoPlayerModel } from './types';
|
|
7
7
|
export { ShortVideosPlayer, type ShortVideoPlayerModel };
|
|
8
|
-
export type {
|
|
8
|
+
export type { IMediaCenterConfig, IPlayerItemsProvider, IShortVideoAnalyticsHandler };
|
|
9
9
|
export { mapToShortVideoPlayerModel };
|
|
10
10
|
/**
|
|
11
11
|
* Opens the short videos player modal.
|
|
12
12
|
*
|
|
13
13
|
* Two overloads (mutually exclusive):
|
|
14
|
-
* - Provider mode: openShortVideosPlayer({ shortVideosProvider,
|
|
14
|
+
* - Provider mode: openShortVideosPlayer({ shortVideosProvider, mediaCenterConfig?, ...common })
|
|
15
15
|
* - IDs mode: openShortVideosPlayer({ ids, initiator, graphqlOrigin?, initialId?, mediaPageId?, ...common })
|
|
16
16
|
*
|
|
17
17
|
* @param init Configuration options.
|
|
@@ -19,8 +19,8 @@ export { mapToShortVideoPlayerModel };
|
|
|
19
19
|
* Provider mode (overload 1)
|
|
20
20
|
* @param {IPlayerItemsProvider<ShortVideoPlayerModel>} init.shortVideosProvider
|
|
21
21
|
* Provider that supplies short-video items to the player.
|
|
22
|
-
* @param {
|
|
23
|
-
* Optional media-center
|
|
22
|
+
* @param {IMediaCenterConfig} [init.mediaCenterConfig]
|
|
23
|
+
* Optional media-center config.
|
|
24
24
|
*
|
|
25
25
|
* IDs mode (overload 2)
|
|
26
26
|
* @param {string[]} init.ids
|
|
@@ -32,12 +32,12 @@ export { mapToShortVideoPlayerModel };
|
|
|
32
32
|
* @param {string} [init.initialId]
|
|
33
33
|
* ID of the video to open first (optional).
|
|
34
34
|
* @param {string} [init.mediaPageId]
|
|
35
|
-
* Optional media page ID used to construct an internal media-center
|
|
35
|
+
* Optional media page ID used to construct an internal media-center config.
|
|
36
36
|
*
|
|
37
37
|
* Common settings
|
|
38
38
|
* @param {IPostSocialInteractionsHandler} [init.socialInteractionsHandler]
|
|
39
39
|
* Handler for social interactions (like, share, etc.).
|
|
40
|
-
* @param {
|
|
40
|
+
* @param {Locale} [init.locale]
|
|
41
41
|
* Localization for the player UI. If omitted, 'en' is used.
|
|
42
42
|
* @param {boolean} [init.disableBackground]
|
|
43
43
|
* If true, hides the player's background image.
|
|
@@ -60,7 +60,7 @@ export { mapToShortVideoPlayerModel };
|
|
|
60
60
|
*
|
|
61
61
|
* openShortVideosPlayer({
|
|
62
62
|
* shortVideosProvider: myShortVideosProvider,
|
|
63
|
-
*
|
|
63
|
+
* mediaCenterConfig: mymediaCenterConfig,
|
|
64
64
|
* localization: { next: 'Next', previous: 'Previous' },
|
|
65
65
|
* showStreamsCloudWatermark: true,
|
|
66
66
|
* on: {
|
|
@@ -90,7 +90,9 @@ export { mapToShortVideoPlayerModel };
|
|
|
90
90
|
*/
|
|
91
91
|
export declare function openShortVideosPlayer(init: PlayerSettings & {
|
|
92
92
|
shortVideosProvider: IPlayerItemsProvider<ShortVideoPlayerModel>;
|
|
93
|
-
|
|
93
|
+
mediaCenterConfig?: IMediaCenterConfig;
|
|
94
|
+
analyticsHandler?: IShortVideoAnalyticsHandler;
|
|
95
|
+
socialInteractionsHandler?: IPostSocialInteractionsHandler;
|
|
94
96
|
}): void;
|
|
95
97
|
export declare function openShortVideosPlayer(init: PlayerSettings & {
|
|
96
98
|
ids: string[];
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { toastrWarning } from '../../core/toastr';
|
|
2
|
-
import {
|
|
2
|
+
import { InternalMediaCenterConfig } from '../../media-center/config/internal-media-center-config';
|
|
3
|
+
import {} from '../../media-center/config/types';
|
|
3
4
|
import { MediaCenter, MediaCenterMode } from '../../media-center/media-center';
|
|
4
5
|
import { ModalShadowHost } from '../../ui/shadow-dom';
|
|
5
6
|
import { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
|
|
@@ -11,7 +12,7 @@ import { mount, unmount } from 'svelte';
|
|
|
11
12
|
export { ShortVideosPlayer };
|
|
12
13
|
export { mapToShortVideoPlayerModel };
|
|
13
14
|
export function openShortVideosPlayer(init) {
|
|
14
|
-
const { shortVideosProvider, ids, graphqlOrigin, initialId, initiator, socialInteractionsHandler, disableBackground,
|
|
15
|
+
const { shortVideosProvider, ids, graphqlOrigin, initialId, initiator, socialInteractionsHandler, disableBackground, locale, showStreamsCloudWatermark } = init;
|
|
15
16
|
let dataProvider = shortVideosProvider;
|
|
16
17
|
if (!dataProvider && ids) {
|
|
17
18
|
dataProvider = new InternalShortVideoPlayerProvider({ ids, graphqlOrigin, initialId, initiator });
|
|
@@ -20,9 +21,9 @@ export function openShortVideosPlayer(init) {
|
|
|
20
21
|
toastrWarning('Data provider is not specified.');
|
|
21
22
|
return;
|
|
22
23
|
}
|
|
23
|
-
let
|
|
24
|
-
if (!
|
|
25
|
-
|
|
24
|
+
let mediaCenterConfig = init.mediaCenterConfig;
|
|
25
|
+
if (!mediaCenterConfig && init.mediaPageId) {
|
|
26
|
+
mediaCenterConfig = new InternalMediaCenterConfig(init.mediaPageId, graphqlOrigin);
|
|
26
27
|
}
|
|
27
28
|
let analyticsHandler = init.analyticsHandler;
|
|
28
29
|
if (!analyticsHandler && !init.shortVideosProvider) {
|
|
@@ -33,14 +34,14 @@ export function openShortVideosPlayer(init) {
|
|
|
33
34
|
const mounted = mount(MediaCenter, {
|
|
34
35
|
target: shadowHost.shadowRoot,
|
|
35
36
|
props: {
|
|
36
|
-
|
|
37
|
+
config: mediaCenterConfig || null,
|
|
37
38
|
playerProps: {
|
|
38
|
-
|
|
39
|
+
mode: MediaCenterMode.ShortVideos,
|
|
39
40
|
props: {
|
|
40
41
|
dataProvider,
|
|
41
42
|
socialInteractionsHandler,
|
|
42
43
|
disableBackground,
|
|
43
|
-
|
|
44
|
+
locale,
|
|
44
45
|
showStreamsCloudWatermark,
|
|
45
46
|
analyticsHandler,
|
|
46
47
|
on: {
|
|
@@ -1,14 +1,7 @@
|
|
|
1
1
|
import { type Locale } from '../../core/locale';
|
|
2
|
-
import type { IShortVideoAttachmentsLocalization, IShortVideoViewerLocalization } from '../short-video-viewer';
|
|
3
|
-
import type { ISwipeIndicatorLocalization } from '../../ui/swipe-indicator';
|
|
4
|
-
export interface IShortVideosPlayerLocalization {
|
|
5
|
-
shortVideoAttachmentsLocalization?: IShortVideoAttachmentsLocalization | Locale;
|
|
6
|
-
shortVideoViewerLocalization?: IShortVideoViewerLocalization | Locale;
|
|
7
|
-
swipeIndicatorLocalization?: ISwipeIndicatorLocalization | Locale;
|
|
8
|
-
}
|
|
9
2
|
export declare class ShortVideosPlayerLocalization {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
constructor(
|
|
3
|
+
shortVideoAttachmentsLocale: Locale;
|
|
4
|
+
shortVideoViewerLocale: Locale;
|
|
5
|
+
swipeIndicatorLocale: Locale;
|
|
6
|
+
constructor(locale: Locale);
|
|
14
7
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {} from '../../core/locale';
|
|
2
2
|
export class ShortVideosPlayerLocalization {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
constructor(
|
|
7
|
-
this.
|
|
8
|
-
this.
|
|
9
|
-
this.
|
|
3
|
+
shortVideoAttachmentsLocale;
|
|
4
|
+
shortVideoViewerLocale;
|
|
5
|
+
swipeIndicatorLocale;
|
|
6
|
+
constructor(locale) {
|
|
7
|
+
this.shortVideoAttachmentsLocale = locale;
|
|
8
|
+
this.shortVideoViewerLocale = locale;
|
|
9
|
+
this.swipeIndicatorLocale = locale;
|
|
10
10
|
}
|
|
11
11
|
}
|
|
@@ -19,8 +19,8 @@ import { InternalShortVideoPlayerProvider } from './internal-short-video-player-
|
|
|
19
19
|
import { ShortVideosPlayerLocalization } from './short-videos-player-localization';
|
|
20
20
|
import { ShortVideosPlayerUiManager } from './ui-manager.svelte';
|
|
21
21
|
import { untrack } from 'svelte';
|
|
22
|
-
let { dataProvider, socialInteractionsHandler,
|
|
23
|
-
const localization = $derived(new ShortVideosPlayerLocalization(
|
|
22
|
+
let { dataProvider, socialInteractionsHandler, locale = 'en', showStreamsCloudWatermark, disableBackground, analyticsHandler, on, categoriesSwitcher, playerLogo = null, fadeContent = false } = $props();
|
|
23
|
+
const localization = $derived(new ShortVideosPlayerLocalization(locale));
|
|
24
24
|
let everTouched = $state(false);
|
|
25
25
|
let background = $state(null);
|
|
26
26
|
let bufferIsLoading = $state(false);
|
|
@@ -143,7 +143,7 @@ const onShortVideoAdImpression = (adId) => {
|
|
|
143
143
|
autoplay="on-appearance"
|
|
144
144
|
showAttachments={uiManager.showShortVideoOverlayAttachments}
|
|
145
145
|
showControls={uiManager.showShortVideoOverlayControls}
|
|
146
|
-
|
|
146
|
+
locale={localization.shortVideoViewerLocale}
|
|
147
147
|
on={{
|
|
148
148
|
productClick: (productId) => onShortVideoProductClick(productId, item.id),
|
|
149
149
|
productImpression: (productId, videoId) => onShortVideoProductImpression(productId, videoId),
|
|
@@ -153,7 +153,7 @@ const onShortVideoAdImpression = (adId) => {
|
|
|
153
153
|
{/snippet}
|
|
154
154
|
</PlayerSlider>
|
|
155
155
|
{#if uiManager.isMobileView && buffer.loaded.length > 1 && !everTouched}
|
|
156
|
-
<SwipeIndicator
|
|
156
|
+
<SwipeIndicator locale={localization.swipeIndicatorLocale} />
|
|
157
157
|
{/if}
|
|
158
158
|
</div>
|
|
159
159
|
</SpotlightLayout>
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import type { Locale } from '../../core/locale';
|
|
2
2
|
import type { ShortVideoViewerModel, IPostSocialInteractionsHandler } from '../short-video-viewer';
|
|
3
3
|
import type { IPlayerItemsProvider } from '../../ui/player';
|
|
4
|
-
import type { IShortVideosPlayerLocalization } from './short-videos-player-localization';
|
|
5
4
|
export interface IShortVideoAnalyticsHandler {
|
|
6
5
|
setOrganizationId: (organizationId: string) => void;
|
|
7
6
|
trackShortVideoView: (videoId: string) => void;
|
|
@@ -15,14 +14,13 @@ export type ShortVideoPlayerModel = ShortVideoViewerModel & {
|
|
|
15
14
|
};
|
|
16
15
|
export type ShortVideoPlayerProps = PlayerSettings & {
|
|
17
16
|
dataProvider: IPlayerItemsProvider<ShortVideoPlayerModel>;
|
|
17
|
+
socialInteractionsHandler?: IPostSocialInteractionsHandler;
|
|
18
18
|
analyticsHandler?: IShortVideoAnalyticsHandler;
|
|
19
19
|
};
|
|
20
20
|
export type PlayerSettings = {
|
|
21
|
-
socialInteractionsHandler?: IPostSocialInteractionsHandler;
|
|
22
21
|
disableBackground?: boolean;
|
|
23
|
-
|
|
22
|
+
locale?: Locale;
|
|
24
23
|
showStreamsCloudWatermark?: boolean;
|
|
25
|
-
analyticsHandler?: IShortVideoAnalyticsHandler;
|
|
26
24
|
on?: {
|
|
27
25
|
playerClosed?: () => void;
|
|
28
26
|
videoActivated?: (id: string) => void;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script lang="ts">import { ProductCard } from '../products/product-card';
|
|
2
2
|
import { onMount } from 'svelte';
|
|
3
|
-
let { product, streamId,
|
|
3
|
+
let { product, streamId, locale, includeBeforeNowPrefix, inert = false, on } = $props();
|
|
4
4
|
let productElement;
|
|
5
5
|
onMount(() => {
|
|
6
6
|
if (productElement && (on === null || on === void 0 ? void 0 : on.impression)) {
|
|
@@ -21,5 +21,5 @@ onMount(() => {
|
|
|
21
21
|
</script>
|
|
22
22
|
|
|
23
23
|
<div bind:this={productElement}>
|
|
24
|
-
<ProductCard product={product}
|
|
24
|
+
<ProductCard product={product} locale={locale} includeBeforeNowPrefix={includeBeforeNowPrefix} inert={inert} on={on} />
|
|
25
25
|
</div>
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import type { Locale } from '../core/locale';
|
|
2
|
-
import type { IProductCardLocalization } from '../products/product-card/product-card-localization';
|
|
3
2
|
import type { ProductCardModel } from '../products/product-card/types';
|
|
4
3
|
type Props = {
|
|
5
4
|
product: ProductCardModel;
|
|
6
5
|
streamId: string;
|
|
7
|
-
|
|
6
|
+
locale?: Locale;
|
|
8
7
|
includeBeforeNowPrefix?: boolean;
|
|
9
8
|
inert?: boolean;
|
|
10
9
|
on?: {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { StreamElementView } from './element-views';
|
|
3
3
|
import { StreamComponentDataType } from './enums';
|
|
4
4
|
import { onMount } from 'svelte';
|
|
5
|
-
let { model,
|
|
5
|
+
let { model, locale, on } = $props();
|
|
6
6
|
const component = $derived.by(() => {
|
|
7
7
|
return model.components.find((c) => (model.data ? c.dataType === model.data.type : c.dataType === StreamComponentDataType.NoData));
|
|
8
8
|
});
|
|
@@ -62,7 +62,7 @@ onMount(() => {
|
|
|
62
62
|
{#snippet slotContent()}
|
|
63
63
|
{#if component && (!model.data || dataIsFilled)}
|
|
64
64
|
{#each component.elements as element (element)}
|
|
65
|
-
<StreamElementView model={element} data={model.data}
|
|
65
|
+
<StreamElementView model={element} data={model.data} locale={locale} on={on} />
|
|
66
66
|
{/each}
|
|
67
67
|
{/if}
|
|
68
68
|
{/snippet}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import type { Locale } from '../../core/locale';
|
|
2
|
-
import { type IStreamElementLocalization } from './element-views';
|
|
3
2
|
import type { StreamSlot } from './slot';
|
|
4
3
|
type Props = {
|
|
5
4
|
model: StreamSlot;
|
|
6
|
-
|
|
5
|
+
locale: Locale;
|
|
7
6
|
on?: {
|
|
8
7
|
productClick: (productId: string) => void;
|
|
9
8
|
productImpression?: (productId: string) => void;
|
|
@@ -1,16 +1,11 @@
|
|
|
1
|
-
<script lang="ts">import {} from '
|
|
2
|
-
import { StreamElementStyleDirection } from '../enums';
|
|
1
|
+
<script lang="ts">import { StreamElementStyleDirection } from '../enums';
|
|
3
2
|
import { generateContainerStyles } from '../styles-transformer';
|
|
4
3
|
import { default as StreamElement } from './cmp.stream-element.svelte';
|
|
5
|
-
let { model, data,
|
|
4
|
+
let { model, data, locale } = $props();
|
|
6
5
|
</script>
|
|
7
6
|
|
|
8
7
|
<div class="container-stream-element" style={generateContainerStyles(model.styles)}>
|
|
9
8
|
{#each model.elements as element (element)}
|
|
10
|
-
<StreamElement
|
|
11
|
-
model={element}
|
|
12
|
-
data={data}
|
|
13
|
-
constainerDirection={model.styles?.direction ?? StreamElementStyleDirection.Vertical}
|
|
14
|
-
localization={localization} />
|
|
9
|
+
<StreamElement model={element} data={data} constainerDirection={model.styles?.direction ?? StreamElementStyleDirection.Vertical} locale={locale} />
|
|
15
10
|
{/each}
|
|
16
11
|
</div>
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import type { Locale } from '../../../core/locale';
|
|
2
|
-
import { type IStreamElementLocalization } from './stream-element-localization';
|
|
3
2
|
import type { ContainerStreamElementModel } from '../elements';
|
|
4
3
|
import type { StreamSlotData } from '../slot-data';
|
|
5
4
|
type Props = {
|
|
6
5
|
model: ContainerStreamElementModel;
|
|
7
6
|
data: StreamSlotData | null;
|
|
8
|
-
|
|
7
|
+
locale: Locale;
|
|
9
8
|
};
|
|
10
9
|
declare const Cmp: import("svelte").Component<Props, {}, "">;
|
|
11
10
|
type Cmp = ReturnType<typeof Cmp>;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<script lang="ts">var _a;
|
|
2
2
|
import { PriceStreamElementLocalization } from './price-stream-element-localization';
|
|
3
3
|
import { default as PriceElementView } from './price-element-view.svelte';
|
|
4
|
-
let { model, data,
|
|
5
|
-
const localization = $derived(new PriceStreamElementLocalization(
|
|
4
|
+
let { model, data, locale } = $props();
|
|
5
|
+
const localization = $derived(new PriceStreamElementLocalization(locale));
|
|
6
6
|
let baseMaxHeight = $derived(((_a = model.styles) === null || _a === void 0 ? void 0 : _a.height) || 32);
|
|
7
7
|
let adjustedHeight = $derived(baseMaxHeight);
|
|
8
8
|
</script>
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import type { Locale } from '../../../core/locale';
|
|
2
|
-
import { type IPriceStreamElementLocalization } from './price-stream-element-localization';
|
|
3
2
|
import type { PriceStreamElementModel } from '../elements';
|
|
4
3
|
import type { StreamLayoutProductPriceModel } from '../models';
|
|
5
4
|
type Props = {
|
|
6
5
|
model: PriceStreamElementModel;
|
|
7
6
|
data: StreamLayoutProductPriceModel;
|
|
8
|
-
|
|
7
|
+
locale: Locale;
|
|
9
8
|
};
|
|
10
9
|
declare const Cmp: import("svelte").Component<Props, {}, "">;
|
|
11
10
|
type Cmp = ReturnType<typeof Cmp>;
|
|
@@ -1,13 +1,8 @@
|
|
|
1
1
|
<script lang="ts">import { ShortVideoViewer } from '../../../short-videos/short-video-viewer';
|
|
2
2
|
import { ShortVideoStreamElementLocalization } from './short-video-stream-element-localization';
|
|
3
3
|
import { mapToShortVideoViewerModel } from '../models';
|
|
4
|
-
let { data,
|
|
5
|
-
const localization = $derived(new ShortVideoStreamElementLocalization(
|
|
4
|
+
let { data, locale, on } = $props();
|
|
5
|
+
const localization = $derived(new ShortVideoStreamElementLocalization(locale));
|
|
6
6
|
</script>
|
|
7
7
|
|
|
8
|
-
<ShortVideoViewer
|
|
9
|
-
model={mapToShortVideoViewerModel(data)}
|
|
10
|
-
autoplay={false}
|
|
11
|
-
showControls={false}
|
|
12
|
-
localization={localization.shortVideoViewerLocalization}
|
|
13
|
-
on={on} />
|
|
8
|
+
<ShortVideoViewer model={mapToShortVideoViewerModel(data)} autoplay={false} showControls={false} locale={localization.shortVideoViewerLocale} on={on} />
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import type { Locale } from '../../../core/locale';
|
|
2
|
-
import { type IShortVideoStreamElementLocalization } from './short-video-stream-element-localization';
|
|
3
2
|
import { type StreamLayoutShortVideoModel } from '../models';
|
|
4
3
|
type Props = {
|
|
5
4
|
data: StreamLayoutShortVideoModel;
|
|
6
|
-
|
|
5
|
+
locale: Locale;
|
|
7
6
|
on?: {
|
|
8
7
|
progress?: (progress: number) => void;
|
|
9
8
|
};
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
import { StockStreamElementLocalization } from './stock-stream-element-localization';
|
|
3
3
|
import { StockStreamElementLevel } from '../enums';
|
|
4
4
|
import { mapFlexJustifyContent, transformNumericValue } from '../styles-transformer';
|
|
5
|
-
let { model, heightOverrideDdu,
|
|
6
|
-
const localization = $derived(new StockStreamElementLocalization(
|
|
5
|
+
let { model, heightOverrideDdu, locale } = $props();
|
|
6
|
+
const localization = $derived(new StockStreamElementLocalization(locale));
|
|
7
7
|
const height = $derived(heightOverrideDdu || ((_a = model.styles) === null || _a === void 0 ? void 0 : _a.height) || 16);
|
|
8
8
|
const containerStyles = $derived.by(() => {
|
|
9
9
|
var _a;
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import type { Locale } from '../../../core/locale';
|
|
2
|
-
import { type IStockStreamElementLocalization } from './stock-stream-element-localization';
|
|
3
2
|
import type { StockStreamElementModel } from '../elements';
|
|
4
3
|
type Props = {
|
|
5
4
|
model: StockStreamElementModel;
|
|
6
5
|
heightOverrideDdu?: number;
|
|
7
|
-
|
|
6
|
+
locale: Locale;
|
|
8
7
|
};
|
|
9
8
|
declare const Cmp: import("svelte").Component<Props, {}, "">;
|
|
10
9
|
type Cmp = ReturnType<typeof Cmp>;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<script lang="ts">import { AnnotationStreamElementView, ContainerStreamElementView, ImageRefStreamElementView, ImagesStreamElementView, PriceStreamElementView, ShortVideoStreamElementView, SpacerStreamElementView, StockStreamElementView, TextRefStreamElementView, TextStreamElementView, WebViewStreamElementView } from '.';
|
|
2
2
|
import { StreamElementLocalization } from './stream-element-localization';
|
|
3
3
|
import { StreamComponentDataType, StreamElementStyleDirection, StreamElementType } from '../enums';
|
|
4
|
-
let { model, data, constainerDirection = StreamElementStyleDirection.Vertical,
|
|
5
|
-
const localization = $derived(new StreamElementLocalization(
|
|
4
|
+
let { model, data, constainerDirection = StreamElementStyleDirection.Vertical, locale, on } = $props();
|
|
5
|
+
const localization = $derived(new StreamElementLocalization(locale));
|
|
6
6
|
const shortVideoModel = $derived.by(() => {
|
|
7
7
|
if (!data) {
|
|
8
8
|
return null;
|
|
@@ -44,17 +44,17 @@ const productModel = $derived.by(() => {
|
|
|
44
44
|
{#if model.type === StreamElementType.Annotation}
|
|
45
45
|
<AnnotationStreamElementView model={model} />
|
|
46
46
|
{:else if model.type === StreamElementType.Container}
|
|
47
|
-
<ContainerStreamElementView model={model} data={data}
|
|
47
|
+
<ContainerStreamElementView model={model} data={data} locale={locale} />
|
|
48
48
|
{:else if model.type === StreamElementType.ImageRef && data}
|
|
49
49
|
<ImageRefStreamElementView model={model} data={data} />
|
|
50
50
|
{:else if model.type === StreamElementType.Images && imagesModel?.length}
|
|
51
51
|
<ImagesStreamElementView model={model} data={imagesModel} />
|
|
52
52
|
{:else if model.type === StreamElementType.Price && productModel}
|
|
53
|
-
<PriceStreamElementView model={model} data={productModel.price}
|
|
53
|
+
<PriceStreamElementView model={model} data={productModel.price} locale={localization.priceElementLocalization} />
|
|
54
54
|
{:else if model.type === StreamElementType.ShortVideo && shortVideoModel}
|
|
55
55
|
<ShortVideoStreamElementView
|
|
56
56
|
data={shortVideoModel}
|
|
57
|
-
|
|
57
|
+
locale={localization.shortVideoElementLocalization}
|
|
58
58
|
on={on
|
|
59
59
|
? {
|
|
60
60
|
progress: (progress: Number) => {
|
|
@@ -65,7 +65,7 @@ const productModel = $derived.by(() => {
|
|
|
65
65
|
{:else if model.type === StreamElementType.Spacer}
|
|
66
66
|
<SpacerStreamElementView model={model} parentContainerDirection={constainerDirection} />
|
|
67
67
|
{:else if model.type === StreamElementType.Stock}
|
|
68
|
-
<StockStreamElementView model={model}
|
|
68
|
+
<StockStreamElementView model={model} locale={localization.stockElementLocalization} />
|
|
69
69
|
{:else if model.type === StreamElementType.Text}
|
|
70
70
|
<TextStreamElementView model={model} />
|
|
71
71
|
{:else if model.type === StreamElementType.TextRef && data}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import type { Locale } from '../../../core/locale';
|
|
2
|
-
import { type IStreamElementLocalization } from './stream-element-localization';
|
|
3
2
|
import type { StreamElementModel } from '../elements';
|
|
4
3
|
import { StreamElementStyleDirection } from '../enums';
|
|
5
4
|
import type { StreamSlotData } from '../slot-data';
|
|
@@ -7,7 +6,7 @@ type Props = {
|
|
|
7
6
|
model: StreamElementModel;
|
|
8
7
|
data: StreamSlotData | null;
|
|
9
8
|
constainerDirection?: StreamElementStyleDirection;
|
|
10
|
-
|
|
9
|
+
locale: Locale;
|
|
11
10
|
on?: {
|
|
12
11
|
progress?: (videoId: string, progress: number) => void;
|
|
13
12
|
};
|
|
@@ -10,7 +10,3 @@ export { default as StockStreamElementView } from './cmp.stock-stream-element.sv
|
|
|
10
10
|
export { default as TextRefStreamElementView } from './cmp.text-ref-stream-element.svelte';
|
|
11
11
|
export { default as TextStreamElementView } from './cmp.text-stream-element.svelte';
|
|
12
12
|
export { default as WebViewStreamElementView } from './cmp.web-view-stream-element.svelte';
|
|
13
|
-
export type { IStreamElementLocalization } from './stream-element-localization';
|
|
14
|
-
export type { IPriceStreamElementLocalization } from './price-stream-element-localization';
|
|
15
|
-
export type { IStockStreamElementLocalization } from './stock-stream-element-localization';
|
|
16
|
-
export type { IShortVideoStreamElementLocalization } from './short-video-stream-element-localization';
|
|
@@ -140,7 +140,7 @@ $effect(() => {
|
|
|
140
140
|
{/if}
|
|
141
141
|
</div>
|
|
142
142
|
{#if model.stock}
|
|
143
|
-
<StockElementView model={model.stock} heightOverrideDdu={stockElementHeight}
|
|
143
|
+
<StockElementView model={model.stock} heightOverrideDdu={stockElementHeight} locale={localization.stockLocalization} />
|
|
144
144
|
{/if}
|
|
145
145
|
</div>
|
|
146
146
|
|
|
@@ -1,13 +1,7 @@
|
|
|
1
1
|
import { type Locale } from '../../../core/locale';
|
|
2
|
-
import type { IStockStreamElementLocalization } from './stock-stream-element-localization';
|
|
3
|
-
export interface IPriceStreamElementLocalization {
|
|
4
|
-
saveValue?: (value: string | number) => string;
|
|
5
|
-
beforeValue?: (value: string) => string;
|
|
6
|
-
stockLocalization?: IStockStreamElementLocalization | Locale;
|
|
7
|
-
}
|
|
8
2
|
export declare class PriceStreamElementLocalization {
|
|
9
3
|
saveValue: (value: string | number) => string;
|
|
10
4
|
beforeValue: (value: string) => string;
|
|
11
|
-
stockLocalization:
|
|
12
|
-
constructor(
|
|
5
|
+
stockLocalization: Locale;
|
|
6
|
+
constructor(locale: Locale);
|
|
13
7
|
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {} from '../../../core/locale';
|
|
2
2
|
export class PriceStreamElementLocalization {
|
|
3
3
|
saveValue;
|
|
4
4
|
beforeValue;
|
|
5
5
|
stockLocalization;
|
|
6
|
-
constructor(
|
|
7
|
-
this.saveValue =
|
|
8
|
-
this.beforeValue =
|
|
9
|
-
this.stockLocalization =
|
|
6
|
+
constructor(locale) {
|
|
7
|
+
this.saveValue = loc.saveValue[locale];
|
|
8
|
+
this.beforeValue = loc.beforeValue[locale];
|
|
9
|
+
this.stockLocalization = locale;
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
12
|
const loc = {
|
|
@@ -1,9 +1,5 @@
|
|
|
1
1
|
import { type Locale } from '../../../core/locale';
|
|
2
|
-
import type { IShortVideoViewerLocalization } from '../../../short-videos/short-video-viewer';
|
|
3
|
-
export interface IShortVideoStreamElementLocalization {
|
|
4
|
-
shortVideoViewerLocalization?: IShortVideoViewerLocalization | Locale;
|
|
5
|
-
}
|
|
6
2
|
export declare class ShortVideoStreamElementLocalization {
|
|
7
|
-
|
|
8
|
-
constructor(
|
|
3
|
+
shortVideoViewerLocale: Locale;
|
|
4
|
+
constructor(locale: Locale);
|
|
9
5
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {} from '../../../core/locale';
|
|
2
2
|
export class ShortVideoStreamElementLocalization {
|
|
3
|
-
|
|
4
|
-
constructor(
|
|
5
|
-
this.
|
|
3
|
+
shortVideoViewerLocale;
|
|
4
|
+
constructor(locale) {
|
|
5
|
+
this.shortVideoViewerLocale = locale;
|
|
6
6
|
}
|
|
7
7
|
}
|
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
import { type Locale } from '../../../core/locale';
|
|
2
|
-
export interface IStockStreamElementLocalization {
|
|
3
|
-
quantity?: (value: number, low: boolean) => string;
|
|
4
|
-
}
|
|
5
2
|
export declare class StockStreamElementLocalization {
|
|
6
3
|
quantity: (value: number, low: boolean) => string;
|
|
7
|
-
constructor(init:
|
|
4
|
+
constructor(init: Locale);
|
|
8
5
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {} from '../../../core/locale';
|
|
2
2
|
export class StockStreamElementLocalization {
|
|
3
3
|
quantity;
|
|
4
4
|
constructor(init) {
|
|
5
|
-
this.quantity =
|
|
5
|
+
this.quantity = loc.quantity[init];
|
|
6
6
|
}
|
|
7
7
|
}
|
|
8
8
|
const loc = {
|
|
@@ -1,15 +1,7 @@
|
|
|
1
1
|
import { type Locale } from '../../../core/locale';
|
|
2
|
-
import type { IPriceStreamElementLocalization } from './price-stream-element-localization';
|
|
3
|
-
import type { IShortVideoStreamElementLocalization } from './short-video-stream-element-localization';
|
|
4
|
-
import type { IStockStreamElementLocalization } from './stock-stream-element-localization';
|
|
5
|
-
export interface IStreamElementLocalization {
|
|
6
|
-
priceElementLocalization?: IPriceStreamElementLocalization | Locale;
|
|
7
|
-
stockElementLocalization?: IStockStreamElementLocalization | Locale;
|
|
8
|
-
shortVideoElementLocalization?: IShortVideoStreamElementLocalization | Locale;
|
|
9
|
-
}
|
|
10
2
|
export declare class StreamElementLocalization {
|
|
11
|
-
priceElementLocalization:
|
|
12
|
-
stockElementLocalization:
|
|
13
|
-
shortVideoElementLocalization:
|
|
14
|
-
constructor(
|
|
3
|
+
priceElementLocalization: Locale;
|
|
4
|
+
stockElementLocalization: Locale;
|
|
5
|
+
shortVideoElementLocalization: Locale;
|
|
6
|
+
constructor(locale: Locale);
|
|
15
7
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {} from '../../../core/locale';
|
|
2
2
|
export class StreamElementLocalization {
|
|
3
3
|
priceElementLocalization;
|
|
4
4
|
stockElementLocalization;
|
|
5
5
|
shortVideoElementLocalization;
|
|
6
|
-
constructor(
|
|
7
|
-
this.priceElementLocalization =
|
|
8
|
-
this.stockElementLocalization =
|
|
9
|
-
this.shortVideoElementLocalization =
|
|
6
|
+
constructor(locale) {
|
|
7
|
+
this.priceElementLocalization = locale;
|
|
8
|
+
this.stockElementLocalization = locale;
|
|
9
|
+
this.shortVideoElementLocalization = locale;
|
|
10
10
|
}
|
|
11
11
|
}
|