@streamscloud/embeddable 2.5.0 → 2.6.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/locale.d.ts +6 -0
- package/dist/core/locale.js +24 -0
- package/dist/short-videos/short-video-viewer/cmp.attachments.svelte +2 -2
- package/dist/short-videos/short-video-viewer/cmp.attachments.svelte.d.ts +3 -2
- package/dist/short-videos/short-video-viewer/cmp.product.svelte +1 -1
- package/dist/short-videos/short-video-viewer/cmp.product.svelte.d.ts +3 -2
- package/dist/short-videos/short-video-viewer/cmp.short-video-details.svelte +1 -1
- package/dist/short-videos/short-video-viewer/cmp.short-video-details.svelte.d.ts +3 -2
- package/dist/short-videos/short-video-viewer/cmp.short-video-heading.svelte +1 -1
- package/dist/short-videos/short-video-viewer/cmp.short-video-heading.svelte.d.ts +1 -1
- package/dist/short-videos/short-video-viewer/cmp.short-video-viewer.svelte +1 -1
- package/dist/short-videos/short-video-viewer/cmp.short-video-viewer.svelte.d.ts +3 -2
- package/dist/short-videos/short-video-viewer/description.svelte.d.ts +1 -1
- package/dist/short-videos/short-video-viewer/index.d.ts +3 -2
- package/dist/short-videos/short-video-viewer/{short-video-attachments-localization.svelte.d.ts → short-video-attachments-localization.d.ts} +5 -4
- package/dist/short-videos/short-video-viewer/short-video-attachments-localization.js +21 -0
- package/dist/short-videos/short-video-viewer/{short-video-details-localization.svelte.d.ts → short-video-details-localization.d.ts} +7 -6
- package/dist/short-videos/short-video-viewer/short-video-details-localization.js +17 -0
- package/dist/short-videos/short-video-viewer/{short-video-product-localization.svelte.d.ts → short-video-product-localization.d.ts} +2 -1
- package/dist/short-videos/short-video-viewer/short-video-product-localization.js +13 -0
- package/dist/short-videos/short-video-viewer/short-video-viewer-localization.d.ts +14 -0
- package/dist/short-videos/short-video-viewer/short-video-viewer-localization.js +17 -0
- package/dist/short-videos/short-videos-player/cmp.short-videos-player.svelte +7 -3
- package/dist/short-videos/short-videos-player/cmp.short-videos-player.svelte.d.ts +3 -2
- package/dist/short-videos/short-videos-player/controls.svelte +2 -2
- package/dist/short-videos/short-videos-player/controls.svelte.d.ts +1 -1
- package/dist/short-videos/short-videos-player/index.d.ts +1 -1
- package/dist/short-videos/short-videos-player/index.js +2 -1
- package/dist/short-videos/short-videos-player/short-videos-player-localization.d.ts +16 -0
- package/dist/short-videos/short-videos-player/short-videos-player-localization.js +13 -0
- package/dist/short-videos/short-videos-player/types.d.ts +3 -3
- package/dist/streams/layout/cmp.slot-content.svelte.d.ts +2 -1
- package/dist/streams/layout/element-views/cmp.container-stream-element.svelte +1 -1
- package/dist/streams/layout/element-views/cmp.container-stream-element.svelte.d.ts +3 -2
- package/dist/streams/layout/element-views/cmp.price-stream-element.svelte +50 -29
- package/dist/streams/layout/element-views/cmp.price-stream-element.svelte.d.ts +3 -2
- package/dist/streams/layout/element-views/cmp.short-video-stream-element.svelte +4 -2
- package/dist/streams/layout/element-views/cmp.short-video-stream-element.svelte.d.ts +3 -0
- package/dist/streams/layout/element-views/cmp.stock-stream-element.svelte +74 -0
- package/dist/streams/layout/element-views/cmp.stock-stream-element.svelte.d.ts +11 -0
- package/dist/streams/layout/element-views/cmp.stream-element.svelte +10 -7
- package/dist/streams/layout/element-views/cmp.stream-element.svelte.d.ts +3 -2
- package/dist/streams/layout/element-views/cmp.text-stream-element.svelte +6 -2
- package/dist/streams/layout/element-views/cmp.text-stream-element.svelte.d.ts +2 -0
- package/dist/streams/layout/element-views/index.d.ts +5 -2
- package/dist/streams/layout/element-views/index.js +1 -0
- package/dist/streams/layout/element-views/price-stream-element-localization.d.ts +13 -0
- package/dist/streams/layout/element-views/price-stream-element-localization.js +21 -0
- package/dist/streams/layout/element-views/short-video-stream-element-localization.d.ts +9 -0
- package/dist/streams/layout/element-views/short-video-stream-element-localization.js +7 -0
- package/dist/streams/layout/element-views/stock-stream-element-localization.d.ts +8 -0
- package/dist/streams/layout/element-views/stock-stream-element-localization.js +26 -0
- package/dist/streams/layout/element-views/stream-element-localization.d.ts +15 -0
- package/dist/streams/layout/element-views/stream-element-localization.js +11 -0
- package/dist/streams/layout/elements.d.ts +14 -3
- package/dist/streams/layout/elements.js +1 -1
- package/dist/streams/layout/enums.d.ts +8 -1
- package/dist/streams/layout/enums.js +9 -1
- package/dist/streams/layout/serializer.svelte.js +7 -0
- package/dist/streams/layout/styles.d.ts +4 -0
- package/dist/streams/layout/type-guards.d.ts +4 -2
- package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte +4 -2
- package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte.d.ts +3 -0
- package/dist/streams/stream-page-viewer/index.d.ts +1 -0
- package/dist/streams/stream-page-viewer/stream-page-viewer-localization.d.ts +9 -0
- package/dist/streams/stream-page-viewer/stream-page-viewer-localization.js +7 -0
- package/dist/streams/stream-player/cmp.stream-player.svelte +4 -2
- package/dist/streams/stream-player/cmp.stream-player.svelte.d.ts +3 -2
- package/dist/streams/stream-player/controls.svelte +46 -3
- package/dist/streams/stream-player/controls.svelte.d.ts +1 -1
- package/dist/streams/stream-player/index.d.ts +2 -2
- package/dist/streams/stream-player/index.js +2 -1
- package/dist/streams/stream-player/stream-overview.svelte +2 -2
- package/dist/streams/stream-player/stream-overview.svelte.d.ts +1 -1
- package/dist/streams/stream-player/stream-player-localization.d.ts +26 -0
- package/dist/streams/stream-player/stream-player-localization.js +31 -0
- package/dist/ui/line-clamp/cmp.line-clamp.svelte +2 -2
- package/dist/ui/line-clamp/cmp.line-clamp.svelte.d.ts +3 -2
- package/dist/ui/line-clamp/index.d.ts +1 -1
- package/dist/ui/line-clamp/index.js +1 -1
- package/dist/ui/line-clamp/{line-clamp-localization.svelte.d.ts → line-clamp-localization.d.ts} +2 -1
- package/dist/ui/line-clamp/line-clamp-localization.js +19 -0
- package/dist/ui/swipe-indicator/cmp.swipe-indicator.svelte +1 -1
- package/dist/ui/swipe-indicator/cmp.swipe-indicator.svelte.d.ts +3 -2
- package/dist/ui/swipe-indicator/index.d.ts +1 -1
- package/dist/ui/swipe-indicator/{swipe-indicator-localization.svelte.d.ts → swipe-indicator-localization.d.ts} +2 -1
- package/dist/ui/swipe-indicator/swipe-indicator-localization.js +13 -0
- package/dist/ui/time-ago/cmp.time-ago.svelte +1 -1
- package/dist/ui/time-ago/cmp.time-ago.svelte.d.ts +3 -2
- package/dist/ui/time-ago/index.d.ts +1 -1
- package/dist/ui/time-ago/{time-ago-localization.svelte.d.ts → time-ago-localization.d.ts} +2 -1
- package/dist/ui/time-ago/time-ago-localization.js +55 -0
- package/package.json +1 -1
- package/dist/short-videos/short-video-viewer/short-video-attachments-localization.svelte.js +0 -10
- package/dist/short-videos/short-video-viewer/short-video-details-localization.svelte.js +0 -10
- package/dist/short-videos/short-video-viewer/short-video-product-localization.svelte.js +0 -11
- package/dist/short-videos/short-video-viewer/short-video-viewer-localization.svelte.d.ts +0 -13
- package/dist/short-videos/short-video-viewer/short-video-viewer-localization.svelte.js +0 -10
- package/dist/short-videos/short-videos-player/short-videos-player-localization.svelte.d.ts +0 -8
- package/dist/short-videos/short-videos-player/short-videos-player-localization.svelte.js +0 -6
- package/dist/streams/layout/element-views/price-stream-element-localization.svelte.d.ts +0 -9
- package/dist/streams/layout/element-views/price-stream-element-localization.svelte.js +0 -8
- package/dist/streams/layout/element-views/stream-element-localization.svelte.d.ts +0 -8
- package/dist/streams/layout/element-views/stream-element-localization.svelte.js +0 -6
- package/dist/streams/stream-page-viewer/stream-page-viewer-localization.svelte.d.ts +0 -13
- package/dist/streams/stream-page-viewer/stream-page-viewer-localization.svelte.js +0 -10
- package/dist/streams/stream-player/stream-player-localization.svelte.d.ts +0 -12
- package/dist/streams/stream-player/stream-player-localization.svelte.js +0 -10
- package/dist/ui/line-clamp/line-clamp-localization.svelte.js +0 -15
- package/dist/ui/swipe-indicator/swipe-indicator-localization.svelte.js +0 -6
- package/dist/ui/time-ago/time-ago-localization.svelte.js +0 -39
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
<script lang="ts">var _a, _b;
|
|
2
2
|
import { ShortVideoDetails, ShortVideoViewerAttachmentsInline, ShortVideoViewerAttachments } from '../../short-videos/short-video-viewer';
|
|
3
|
+
import { StreamElementType } from '../layout/enums';
|
|
3
4
|
import { mapToShortVideoViewerModel } from '../layout/models';
|
|
4
5
|
import { Icon } from '../../ui/icon';
|
|
5
6
|
import { MediaVolumeManager } from '../../ui/media-playback';
|
|
6
7
|
import { default as ActionButton } from './action-button.svelte';
|
|
7
|
-
import { StreamPlayerLocalization } from './stream-player-localization
|
|
8
|
+
import { StreamPlayerLocalization } from './stream-player-localization';
|
|
8
9
|
import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
|
|
9
10
|
import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_20_regular.svg?raw';
|
|
10
11
|
import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
|
|
@@ -17,6 +18,36 @@ const toggleMuted = () => {
|
|
|
17
18
|
MediaVolumeManager.isMuted = !MediaVolumeManager.isMuted;
|
|
18
19
|
};
|
|
19
20
|
const shortVideo = $derived(((_a = buffer.current) === null || _a === void 0 ? void 0 : _a.type) === 'short-video' && ((_b = buffer.current) === null || _b === void 0 ? void 0 : _b.shortVideo) ? mapToShortVideoViewerModel(buffer.current.shortVideo) : null);
|
|
21
|
+
const singleWebViewPage = $derived.by(() => {
|
|
22
|
+
var _a;
|
|
23
|
+
if (((_a = buffer.current) === null || _a === void 0 ? void 0 : _a.type) !== 'general') {
|
|
24
|
+
return false;
|
|
25
|
+
}
|
|
26
|
+
const layout = buffer.current.layout;
|
|
27
|
+
const collectRenderableElements = (elements) => {
|
|
28
|
+
const renderableElements = [];
|
|
29
|
+
for (const element of elements) {
|
|
30
|
+
if (element.type === StreamElementType.Container) {
|
|
31
|
+
if (element.elements) {
|
|
32
|
+
renderableElements.push(...collectRenderableElements(element.elements));
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
else {
|
|
36
|
+
renderableElements.push(element);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
return renderableElements;
|
|
40
|
+
};
|
|
41
|
+
const allRenderableElements = [];
|
|
42
|
+
for (const slot of layout.slots) {
|
|
43
|
+
for (const component of slot.components) {
|
|
44
|
+
if (component.elements) {
|
|
45
|
+
allRenderableElements.push(...collectRenderableElements(component.elements));
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
return allRenderableElements.length === 1 && allRenderableElements[0].type === StreamElementType.WebView;
|
|
50
|
+
});
|
|
20
51
|
</script>
|
|
21
52
|
|
|
22
53
|
<div class="stream-player-controls">
|
|
@@ -28,7 +59,7 @@ const shortVideo = $derived(((_a = buffer.current) === null || _a === void 0 ? v
|
|
|
28
59
|
</div>
|
|
29
60
|
</div>
|
|
30
61
|
{/if}
|
|
31
|
-
<div class="stream-player-controls__navigation-buttons">
|
|
62
|
+
<div class="stream-player-controls__navigation-buttons" class:stream-player-controls__navigation-buttons--single-web-view-page={singleWebViewPage}>
|
|
32
63
|
<button type="button" class="navigation-button" disabled={!buffer.canLoadPrevious} onclick={buffer.loadPrevious}>
|
|
33
64
|
<Icon src={IconChevronUp} />
|
|
34
65
|
</button>
|
|
@@ -42,7 +73,7 @@ const shortVideo = $derived(((_a = buffer.current) === null || _a === void 0 ? v
|
|
|
42
73
|
<div class="stream-player-controls__short-video-attachments">
|
|
43
74
|
<ShortVideoViewerAttachments
|
|
44
75
|
shortVideo={shortVideo}
|
|
45
|
-
localization={localization.
|
|
76
|
+
localization={localization.shortVideoAttachmentsLocalization}
|
|
46
77
|
on={{
|
|
47
78
|
productClick: on.productClick
|
|
48
79
|
}} />
|
|
@@ -214,6 +245,18 @@ const shortVideo = $derived(((_a = buffer.current) === null || _a === void 0 ? v
|
|
|
214
245
|
visibility: hidden;
|
|
215
246
|
}
|
|
216
247
|
}
|
|
248
|
+
.stream-player-controls__navigation-buttons--single-web-view-page {
|
|
249
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
250
|
+
}
|
|
251
|
+
@container (width < 6.25rem) {
|
|
252
|
+
.stream-player-controls__navigation-buttons--single-web-view-page {
|
|
253
|
+
visibility: visible;
|
|
254
|
+
position: absolute;
|
|
255
|
+
bottom: var(--stream-player--controls--offset-vertical);
|
|
256
|
+
right: var(--stream-player--controls--offset-horizontal);
|
|
257
|
+
z-index: 1;
|
|
258
|
+
}
|
|
259
|
+
}
|
|
217
260
|
.stream-player-controls__controls {
|
|
218
261
|
display: flex;
|
|
219
262
|
margin-top: auto;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { StreamPlayerBuffer } from './stream-player-buffer.svelte';
|
|
2
|
-
import { StreamPlayerLocalization } from './stream-player-localization
|
|
2
|
+
import { StreamPlayerLocalization } from './stream-player-localization';
|
|
3
3
|
import type { StreamPlayerUiManager } from './ui-manager.svelte';
|
|
4
4
|
type Props = {
|
|
5
5
|
buffer: StreamPlayerBuffer;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { IStreamPlayerLocalization } from './stream-player-localization
|
|
1
|
+
import type { IStreamPlayerLocalization } from './stream-player-localization';
|
|
2
2
|
export type { IStreamPlayerLocalization };
|
|
3
3
|
/**
|
|
4
4
|
* Opens the stream player modal with the specified stream details.
|
|
@@ -26,7 +26,7 @@ export type { IStreamPlayerLocalization };
|
|
|
26
26
|
export declare const openStreamPlayer: (init: {
|
|
27
27
|
streamId: string;
|
|
28
28
|
graphqlOrigin?: string;
|
|
29
|
-
localization?: IStreamPlayerLocalization;
|
|
29
|
+
localization?: IStreamPlayerLocalization | "en" | "no";
|
|
30
30
|
on?: {
|
|
31
31
|
streamActivated?: (data: {
|
|
32
32
|
title: string;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { getLocale } from '../../core/locale';
|
|
1
2
|
import { ShadowHost } from '../../ui/shadow-dom';
|
|
2
3
|
import { default as StreamPlayer } from './cmp.stream-player.svelte';
|
|
3
4
|
import { AppEventsTracker } from '@streamscloud/streams-analytics-collector';
|
|
@@ -33,7 +34,7 @@ export const openStreamPlayer = (init) => {
|
|
|
33
34
|
props: {
|
|
34
35
|
streamId,
|
|
35
36
|
graphqlOrigin,
|
|
36
|
-
localization,
|
|
37
|
+
localization: getLocale(localization),
|
|
37
38
|
on: {
|
|
38
39
|
streamActivated: (data) => {
|
|
39
40
|
AppEventsTracker.setOrganizationId(data.ownerId);
|
|
@@ -6,7 +6,7 @@ import { LineClamp } from '../../ui/line-clamp';
|
|
|
6
6
|
import { ProportionalContainer } from '../../ui/proportional-container';
|
|
7
7
|
import { TimeAgo } from '../../ui/time-ago';
|
|
8
8
|
import { default as ActionButton } from './action-button.svelte';
|
|
9
|
-
import { StreamPlayerLocalization } from './stream-player-localization
|
|
9
|
+
import { StreamPlayerLocalization } from './stream-player-localization';
|
|
10
10
|
import IconPanelLeftText from '@fluentui/svg-icons/icons/panel_left_text_20_regular.svg?raw';
|
|
11
11
|
let { model, buffer, activePageId, on, uiManager, localization } = $props();
|
|
12
12
|
</script>
|
|
@@ -26,7 +26,7 @@ let { model, buffer, activePageId, on, uiManager, localization } = $props();
|
|
|
26
26
|
</div>
|
|
27
27
|
<div class="stream-overview-owner__meta">
|
|
28
28
|
<LineClamp maxLines={1}>
|
|
29
|
-
<TimeAgo date={model.publishedAt || model.createdAt} />
|
|
29
|
+
<TimeAgo date={model.publishedAt || model.createdAt} localization={localization.timeAgoLocalization} />
|
|
30
30
|
</LineClamp>
|
|
31
31
|
</div>
|
|
32
32
|
</div>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { StreamPlayerBuffer } from './stream-player-buffer.svelte';
|
|
2
|
-
import { StreamPlayerLocalization } from './stream-player-localization
|
|
2
|
+
import { StreamPlayerLocalization } from './stream-player-localization';
|
|
3
3
|
import type { StreamPlayerModel } from './types';
|
|
4
4
|
import type { StreamPlayerUiManager } from './ui-manager.svelte';
|
|
5
5
|
type Props = {
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { type Locale } from '../../core/locale';
|
|
2
|
+
import type { IShortVideoAttachmentsLocalization, IShortVideoDetailsLocalization, IShortVideoViewerLocalization } from '../../short-videos/short-video-viewer';
|
|
3
|
+
import type { IStreamPageViewerLocalization } from '../stream-page-viewer';
|
|
4
|
+
import type { ISwipeIndicatorLocalization } from '../../ui/swipe-indicator';
|
|
5
|
+
import type { ITimeAgoLocalization } from '../../ui/time-ago';
|
|
6
|
+
export interface IStreamPlayerLocalization {
|
|
7
|
+
streamNotFound?: string;
|
|
8
|
+
pagesCount?: (count: number) => string;
|
|
9
|
+
timeAgoLocalization?: ITimeAgoLocalization | Locale;
|
|
10
|
+
streamPageViewerLocalization?: IStreamPageViewerLocalization | Locale;
|
|
11
|
+
shortVideoAttachmentsLocalization?: IShortVideoAttachmentsLocalization | Locale;
|
|
12
|
+
shortVideoDetailsLocalization?: IShortVideoDetailsLocalization | Locale;
|
|
13
|
+
shortVideoViewerLocalization?: IShortVideoViewerLocalization | Locale;
|
|
14
|
+
swipeIndicatorLocalization?: ISwipeIndicatorLocalization | Locale;
|
|
15
|
+
}
|
|
16
|
+
export declare class StreamPlayerLocalization {
|
|
17
|
+
streamNotFound: string;
|
|
18
|
+
pagesCount: (count: number) => string;
|
|
19
|
+
timeAgoLocalization: ITimeAgoLocalization | Locale;
|
|
20
|
+
streamPageViewerLocalization: IStreamPageViewerLocalization | Locale;
|
|
21
|
+
shortVideoAttachmentsLocalization: IShortVideoAttachmentsLocalization | Locale;
|
|
22
|
+
shortVideoDetailsLocalization: IShortVideoDetailsLocalization | Locale;
|
|
23
|
+
shortVideoViewerLocalization: IShortVideoDetailsLocalization | Locale;
|
|
24
|
+
swipeIndicatorLocalization: ISwipeIndicatorLocalization | Locale;
|
|
25
|
+
constructor(init: IStreamPlayerLocalization | Locale);
|
|
26
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { isLocale } from '../../core/locale';
|
|
2
|
+
export class StreamPlayerLocalization {
|
|
3
|
+
streamNotFound;
|
|
4
|
+
pagesCount;
|
|
5
|
+
timeAgoLocalization;
|
|
6
|
+
streamPageViewerLocalization;
|
|
7
|
+
shortVideoAttachmentsLocalization;
|
|
8
|
+
shortVideoDetailsLocalization;
|
|
9
|
+
shortVideoViewerLocalization;
|
|
10
|
+
swipeIndicatorLocalization;
|
|
11
|
+
constructor(init) {
|
|
12
|
+
this.streamNotFound = isLocale(init) ? loc.streamNotFound[init] : init?.streamNotFound || loc.streamNotFound.en;
|
|
13
|
+
this.pagesCount = isLocale(init) ? loc.pagesCount[init] : init?.pagesCount || loc.pagesCount.en;
|
|
14
|
+
this.timeAgoLocalization = isLocale(init) ? init : init.timeAgoLocalization || 'en';
|
|
15
|
+
this.streamPageViewerLocalization = isLocale(init) ? init : init.streamPageViewerLocalization || 'en';
|
|
16
|
+
this.shortVideoAttachmentsLocalization = isLocale(init) ? init : init.shortVideoAttachmentsLocalization || 'en';
|
|
17
|
+
this.shortVideoDetailsLocalization = isLocale(init) ? init : init.shortVideoDetailsLocalization || 'en';
|
|
18
|
+
this.shortVideoViewerLocalization = isLocale(init) ? init : init.shortVideoViewerLocalization || 'en';
|
|
19
|
+
this.swipeIndicatorLocalization = isLocale(init) ? init : init.swipeIndicatorLocalization || 'en';
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
const loc = {
|
|
23
|
+
streamNotFound: {
|
|
24
|
+
en: 'Stream not found',
|
|
25
|
+
no: 'Stream ikke funnet'
|
|
26
|
+
},
|
|
27
|
+
pagesCount: {
|
|
28
|
+
en: (count) => (count === 1 ? '1 page' : `${count} pages`),
|
|
29
|
+
no: (count) => (count === 1 ? '1 side' : `${count} sider`)
|
|
30
|
+
}
|
|
31
|
+
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
<script lang="ts">import { LineClampLocalization } from './line-clamp-localization
|
|
1
|
+
<script lang="ts">import { LineClampLocalization } from './line-clamp-localization';
|
|
2
2
|
import { LineClampUtils } from './line-clamp-utils';
|
|
3
3
|
import { onDestroy, onMount } from 'svelte';
|
|
4
4
|
let { value = undefined, maxLines = 3, localization: localizationInit, enableShowMore = false, children } = $props();
|
|
5
|
-
const localization = $derived(new LineClampLocalization(localizationInit));
|
|
5
|
+
const localization = $derived(new LineClampLocalization(localizationInit !== null && localizationInit !== void 0 ? localizationInit : 'en'));
|
|
6
6
|
let parent;
|
|
7
7
|
let element;
|
|
8
8
|
let clampWrapperRef;
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import type { Locale } from '../../core/locale';
|
|
2
|
+
import { type ILineClampLocalization } from './line-clamp-localization';
|
|
2
3
|
import { type Snippet } from 'svelte';
|
|
3
4
|
type Props = {
|
|
4
5
|
value?: string | null;
|
|
5
6
|
maxLines?: number | 'auto';
|
|
6
7
|
enableShowMore?: boolean;
|
|
7
|
-
localization?: ILineClampLocalization;
|
|
8
|
+
localization?: ILineClampLocalization | Locale;
|
|
8
9
|
children?: Snippet;
|
|
9
10
|
};
|
|
10
11
|
declare const Cmp: import("svelte").Component<Props, {}, "">;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { default as LineClamp } from './cmp.line-clamp.svelte';
|
|
2
|
-
export { type ILineClampLocalization } from './line-clamp-localization
|
|
2
|
+
export { type ILineClampLocalization } from './line-clamp-localization';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { default as LineClamp } from './cmp.line-clamp.svelte';
|
|
2
|
-
export {} from './line-clamp-localization
|
|
2
|
+
export {} from './line-clamp-localization';
|
package/dist/ui/line-clamp/{line-clamp-localization.svelte.d.ts → line-clamp-localization.d.ts}
RENAMED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { type Locale } from '../../core/locale';
|
|
1
2
|
export interface ILineClampLocalization {
|
|
2
3
|
showLess?: string;
|
|
3
4
|
showMore?: string;
|
|
@@ -5,5 +6,5 @@ export interface ILineClampLocalization {
|
|
|
5
6
|
export declare class LineClampLocalization {
|
|
6
7
|
showLess: string;
|
|
7
8
|
showMore: string;
|
|
8
|
-
constructor(init
|
|
9
|
+
constructor(init: ILineClampLocalization | Locale);
|
|
9
10
|
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { isLocale } from '../../core/locale';
|
|
2
|
+
export class LineClampLocalization {
|
|
3
|
+
showLess;
|
|
4
|
+
showMore;
|
|
5
|
+
constructor(init) {
|
|
6
|
+
this.showLess = isLocale(init) ? loc.showLess[init] : init.showLess || loc.showLess.en;
|
|
7
|
+
this.showMore = isLocale(init) ? loc.showMore[init] : init.showMore || loc.showMore.en;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
const loc = {
|
|
11
|
+
showLess: {
|
|
12
|
+
en: 'Show less',
|
|
13
|
+
no: 'Vis mindre'
|
|
14
|
+
},
|
|
15
|
+
showMore: {
|
|
16
|
+
en: 'Show more',
|
|
17
|
+
no: 'Vis mer'
|
|
18
|
+
}
|
|
19
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script lang="ts">import { Icon } from '../icon';
|
|
2
|
-
import { SwipeIndicatorLocalization } from './swipe-indicator-localization
|
|
2
|
+
import { SwipeIndicatorLocalization } from './swipe-indicator-localization';
|
|
3
3
|
import IconArrowUp from '@fluentui/svg-icons/icons/arrow_up_20_regular.svg?raw';
|
|
4
4
|
let { fadeTimeout = 2000, localization: localizationInit } = $props();
|
|
5
5
|
const localization = $derived(new SwipeIndicatorLocalization(localizationInit));
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import type { Locale } from '../../core/locale';
|
|
2
|
+
import { type ISwipeIndicatorLocalization } from './swipe-indicator-localization';
|
|
2
3
|
type Props = {
|
|
3
4
|
fadeTimeout?: number;
|
|
4
|
-
localization
|
|
5
|
+
localization: ISwipeIndicatorLocalization | Locale;
|
|
5
6
|
};
|
|
6
7
|
declare const Cmp: import("svelte").Component<Props, {}, "">;
|
|
7
8
|
type Cmp = ReturnType<typeof Cmp>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { default as SwipeIndicator } from './cmp.swipe-indicator.svelte';
|
|
2
|
-
export type { ISwipeIndicatorLocalization } from './swipe-indicator-localization
|
|
2
|
+
export type { ISwipeIndicatorLocalization } from './swipe-indicator-localization';
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
+
import { type Locale } from '../../core/locale';
|
|
1
2
|
export interface ISwipeIndicatorLocalization {
|
|
2
3
|
swipe?: string;
|
|
3
4
|
}
|
|
4
5
|
export declare class SwipeIndicatorLocalization {
|
|
5
6
|
swipe: string;
|
|
6
|
-
constructor(init
|
|
7
|
+
constructor(init: ISwipeIndicatorLocalization | Locale);
|
|
7
8
|
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { isLocale } from '../../core/locale';
|
|
2
|
+
export class SwipeIndicatorLocalization {
|
|
3
|
+
swipe;
|
|
4
|
+
constructor(init) {
|
|
5
|
+
this.swipe = isLocale(init) ? loc.swipe[init] : init.swipe || loc.swipe.en;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
const loc = {
|
|
9
|
+
swipe: {
|
|
10
|
+
en: 'Swipe',
|
|
11
|
+
no: 'Sveip'
|
|
12
|
+
}
|
|
13
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script lang="ts">import { DateFormatOptions, DateHelper } from '../../core/utils/date-helper';
|
|
2
|
-
import { TimeAgoLocalization } from './time-ago-localization
|
|
2
|
+
import { TimeAgoLocalization } from './time-ago-localization';
|
|
3
3
|
import { onDestroy } from 'svelte';
|
|
4
4
|
let { date = null, thresholdMinutes = 60 * 24 * 2 /* 2 days */, localization: localizationInit } = $props();
|
|
5
5
|
const localization = $derived(new TimeAgoLocalization(localizationInit));
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import type { Locale } from '../../core/locale';
|
|
2
|
+
import { type ITimeAgoLocalization } from './time-ago-localization';
|
|
2
3
|
type Props = {
|
|
3
4
|
date: Date | string | null;
|
|
4
5
|
thresholdMinutes?: number;
|
|
5
|
-
localization
|
|
6
|
+
localization: ITimeAgoLocalization | Locale;
|
|
6
7
|
};
|
|
7
8
|
declare const Cmp: import("svelte").Component<Props, {}, "">;
|
|
8
9
|
type Cmp = ReturnType<typeof Cmp>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { default as TimeAgo } from './cmp.time-ago.svelte';
|
|
2
|
-
export type { ITimeAgoLocalization } from './time-ago-localization
|
|
2
|
+
export type { ITimeAgoLocalization } from './time-ago-localization';
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { type Locale } from '../../core/locale';
|
|
1
2
|
export interface ITimeAgoLocalization {
|
|
2
3
|
locale?: string;
|
|
3
4
|
aMinuteAgo?: string;
|
|
@@ -17,5 +18,5 @@ export declare class TimeAgoLocalization {
|
|
|
17
18
|
hoursAgo: (hours: number) => string;
|
|
18
19
|
minutesAgo: (minutes: number) => string;
|
|
19
20
|
yesterday: (time: string) => string;
|
|
20
|
-
constructor(init
|
|
21
|
+
constructor(init: ITimeAgoLocalization | Locale);
|
|
21
22
|
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { isLocale } from '../../core/locale';
|
|
2
|
+
export class TimeAgoLocalization {
|
|
3
|
+
locale;
|
|
4
|
+
aMinuteAgo;
|
|
5
|
+
anHourAgo;
|
|
6
|
+
justNow;
|
|
7
|
+
at;
|
|
8
|
+
hoursAgo;
|
|
9
|
+
minutesAgo;
|
|
10
|
+
yesterday;
|
|
11
|
+
constructor(init) {
|
|
12
|
+
this.locale = isLocale(init) ? loc.locale[init] : init.locale || loc.locale.en;
|
|
13
|
+
this.aMinuteAgo = isLocale(init) ? loc.aMinuteAgo[init] : init.aMinuteAgo || loc.aMinuteAgo.en;
|
|
14
|
+
this.anHourAgo = isLocale(init) ? loc.anHourAgo[init] : init.anHourAgo || loc.anHourAgo.en;
|
|
15
|
+
this.justNow = isLocale(init) ? loc.justNow[init] : init.justNow || loc.justNow.en;
|
|
16
|
+
this.at = isLocale(init) ? loc.at[init] : init.at || loc.at.en;
|
|
17
|
+
this.hoursAgo = isLocale(init) ? loc.hoursAgo[init] : init.hoursAgo || loc.hoursAgo.en;
|
|
18
|
+
this.minutesAgo = isLocale(init) ? loc.minutesAgo[init] : init.minutesAgo || loc.minutesAgo.en;
|
|
19
|
+
this.yesterday = isLocale(init) ? loc.yesterday[init] : init.yesterday || loc.yesterday.en;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
const loc = {
|
|
23
|
+
locale: {
|
|
24
|
+
en: 'en-US',
|
|
25
|
+
no: 'no-NO'
|
|
26
|
+
},
|
|
27
|
+
aMinuteAgo: {
|
|
28
|
+
en: 'a minute ago',
|
|
29
|
+
no: 'ett minutt siden'
|
|
30
|
+
},
|
|
31
|
+
anHourAgo: {
|
|
32
|
+
en: 'an hour ago',
|
|
33
|
+
no: 'en time siden'
|
|
34
|
+
},
|
|
35
|
+
justNow: {
|
|
36
|
+
en: 'just now',
|
|
37
|
+
no: 'nettopp nå'
|
|
38
|
+
},
|
|
39
|
+
at: {
|
|
40
|
+
en: (date, time) => `${date} at ${time}`,
|
|
41
|
+
no: (date, time) => `${date} kl. ${time}`
|
|
42
|
+
},
|
|
43
|
+
hoursAgo: {
|
|
44
|
+
en: (hours) => `${hours} hours ago`,
|
|
45
|
+
no: (hours) => `${hours} timer siden`
|
|
46
|
+
},
|
|
47
|
+
minutesAgo: {
|
|
48
|
+
en: (minutes) => `${minutes} minutes ago`,
|
|
49
|
+
no: (minutes) => `${minutes} minutter siden`
|
|
50
|
+
},
|
|
51
|
+
yesterday: {
|
|
52
|
+
en: (time) => `Yesterday at ${time}`,
|
|
53
|
+
no: (time) => `I går kl. ${time}`
|
|
54
|
+
}
|
|
55
|
+
};
|
package/package.json
CHANGED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export class ShortVideoAttachmentsLocalizationSvelte {
|
|
2
|
-
productsSection = $state('Products');
|
|
3
|
-
offersSection = $state('Offers');
|
|
4
|
-
productLocalization = $state(undefined);
|
|
5
|
-
constructor(init) {
|
|
6
|
-
this.productsSection = init?.productsSection || this.productsSection;
|
|
7
|
-
this.offersSection = init?.offersSection || this.offersSection;
|
|
8
|
-
this.productLocalization = init?.productLocalization;
|
|
9
|
-
}
|
|
10
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export class ShortVideoDetailsLocalization {
|
|
2
|
-
viewsCount = $state((count) => (count === 1 ? '1 view' : `${count} views`));
|
|
3
|
-
timeAgoLocalization = $state(undefined);
|
|
4
|
-
attachmentsLocalization = $state(undefined);
|
|
5
|
-
constructor(init) {
|
|
6
|
-
this.viewsCount = init?.viewsCount ? init.viewsCount : this.viewsCount;
|
|
7
|
-
this.timeAgoLocalization = init?.timeAgoLocalization;
|
|
8
|
-
this.attachmentsLocalization = init?.attachmentsLocalization;
|
|
9
|
-
}
|
|
10
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import type { ITimeAgoLocalization } from '../../ui/time-ago';
|
|
2
|
-
import type { IShortVideoProductLocalization } from './short-video-product-localization.svelte';
|
|
3
|
-
export interface IShortVideoViewerLocalization {
|
|
4
|
-
viewsCount?: (count: number) => string;
|
|
5
|
-
timeAgoLocalization?: ITimeAgoLocalization;
|
|
6
|
-
productLocalization?: IShortVideoProductLocalization;
|
|
7
|
-
}
|
|
8
|
-
export declare class ShortVideoViewerLocalization {
|
|
9
|
-
viewsCount: (count: number) => string;
|
|
10
|
-
timeAgoLocalization: ITimeAgoLocalization | undefined;
|
|
11
|
-
productLocalization: IShortVideoProductLocalization | undefined;
|
|
12
|
-
constructor(init?: IShortVideoViewerLocalization);
|
|
13
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export class ShortVideoViewerLocalization {
|
|
2
|
-
viewsCount = $state((count) => (count === 1 ? '1 view' : `${count} views`));
|
|
3
|
-
timeAgoLocalization = $state(undefined);
|
|
4
|
-
productLocalization = $state(undefined);
|
|
5
|
-
constructor(init) {
|
|
6
|
-
this.viewsCount = init?.viewsCount ? init.viewsCount : this.viewsCount;
|
|
7
|
-
this.timeAgoLocalization = init?.timeAgoLocalization;
|
|
8
|
-
this.productLocalization = init?.productLocalization;
|
|
9
|
-
}
|
|
10
|
-
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { IShortVideoDetailsLocalization } from '../short-video-viewer';
|
|
2
|
-
export interface IShortVideosPlayerLocalization {
|
|
3
|
-
shortVideoDetailsLocalization?: IShortVideoDetailsLocalization;
|
|
4
|
-
}
|
|
5
|
-
export declare class ShortVideosPlayerLocalization {
|
|
6
|
-
shortVideoDetailsLocalization: IShortVideoDetailsLocalization | undefined;
|
|
7
|
-
constructor(init?: IShortVideosPlayerLocalization);
|
|
8
|
-
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
export interface IPriceStreamElementLocalization {
|
|
2
|
-
saveValue?: (value: string | number) => string;
|
|
3
|
-
beforeValue?: (value: string) => string;
|
|
4
|
-
}
|
|
5
|
-
export declare class PriceStreamElementLocalization {
|
|
6
|
-
saveValue: (value: string | number) => string;
|
|
7
|
-
beforeValue: (value: string) => string;
|
|
8
|
-
constructor(init?: IPriceStreamElementLocalization);
|
|
9
|
-
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
export class PriceStreamElementLocalization {
|
|
2
|
-
saveValue = $state((value) => `Save ${value}`);
|
|
3
|
-
beforeValue = $state((value) => `Before ${value}`);
|
|
4
|
-
constructor(init) {
|
|
5
|
-
this.saveValue = init?.saveValue ?? this.saveValue;
|
|
6
|
-
this.beforeValue = init?.beforeValue ?? this.beforeValue;
|
|
7
|
-
}
|
|
8
|
-
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { IPriceStreamElementLocalization } from './price-stream-element-localization.svelte';
|
|
2
|
-
export interface IStreamElementLocalization {
|
|
3
|
-
priceElementLocalization?: IPriceStreamElementLocalization;
|
|
4
|
-
}
|
|
5
|
-
export declare class StreamElementLocalization {
|
|
6
|
-
priceElementLocalization: IPriceStreamElementLocalization | undefined;
|
|
7
|
-
constructor(init?: IStreamElementLocalization);
|
|
8
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import type { IStreamElementLocalization } from '../layout/element-views';
|
|
2
|
-
import type { ITimeAgoLocalization } from '../../ui/time-ago';
|
|
3
|
-
export interface IStreamPageViewerLocalization {
|
|
4
|
-
viewsCount?: (count: number) => string;
|
|
5
|
-
timeAgoLocalization?: ITimeAgoLocalization;
|
|
6
|
-
elementsLocalization?: IStreamElementLocalization;
|
|
7
|
-
}
|
|
8
|
-
export declare class StreamPageViewerLocalization {
|
|
9
|
-
viewsCount: (count: number) => string;
|
|
10
|
-
timeAgoLocalization: ITimeAgoLocalization | undefined;
|
|
11
|
-
elementsLocalization: IStreamElementLocalization | undefined;
|
|
12
|
-
constructor(init?: IStreamPageViewerLocalization);
|
|
13
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export class StreamPageViewerLocalization {
|
|
2
|
-
viewsCount = $state((count) => (count === 1 ? '1 view' : `${count} views`));
|
|
3
|
-
timeAgoLocalization = $state(undefined);
|
|
4
|
-
elementsLocalization = $state(undefined);
|
|
5
|
-
constructor(init) {
|
|
6
|
-
this.viewsCount = init?.viewsCount ?? this.viewsCount;
|
|
7
|
-
this.timeAgoLocalization = init?.timeAgoLocalization ?? this.timeAgoLocalization;
|
|
8
|
-
this.elementsLocalization = init?.elementsLocalization ?? this.elementsLocalization;
|
|
9
|
-
}
|
|
10
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import type { IShortVideoDetailsLocalization } from '../../short-videos/short-video-viewer';
|
|
2
|
-
export interface IStreamPlayerLocalization {
|
|
3
|
-
streamNotFound?: string;
|
|
4
|
-
pagesCount?: (count: number) => string;
|
|
5
|
-
shortVideoDetailsLocalization?: IShortVideoDetailsLocalization;
|
|
6
|
-
}
|
|
7
|
-
export declare class StreamPlayerLocalization {
|
|
8
|
-
streamNotFound: string;
|
|
9
|
-
pagesCount: (count: number) => string;
|
|
10
|
-
shortVideoDetailsLocalization: IShortVideoDetailsLocalization | undefined;
|
|
11
|
-
constructor(init?: IStreamPlayerLocalization);
|
|
12
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export class StreamPlayerLocalization {
|
|
2
|
-
streamNotFound = $state('Stream not found');
|
|
3
|
-
pagesCount = $state((count) => (count === 1 ? '1 page' : `${count} pages`));
|
|
4
|
-
shortVideoDetailsLocalization = $state(undefined);
|
|
5
|
-
constructor(init) {
|
|
6
|
-
this.streamNotFound = init?.streamNotFound || this.streamNotFound;
|
|
7
|
-
this.pagesCount = init?.pagesCount || this.pagesCount;
|
|
8
|
-
this.shortVideoDetailsLocalization = init?.shortVideoDetailsLocalization || this.shortVideoDetailsLocalization;
|
|
9
|
-
}
|
|
10
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export class LineClampLocalization {
|
|
2
|
-
showLess = $state('Show less');
|
|
3
|
-
showMore = $state('Show more');
|
|
4
|
-
constructor(init) {
|
|
5
|
-
if (!init) {
|
|
6
|
-
return;
|
|
7
|
-
}
|
|
8
|
-
if (init.showLess !== undefined) {
|
|
9
|
-
this.showLess = init.showLess;
|
|
10
|
-
}
|
|
11
|
-
if (init.showMore !== undefined) {
|
|
12
|
-
this.showMore = init.showMore;
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
}
|