@streamscloud/embeddable 13.1.0 → 13.2.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/media-center/media-center/discover/data-loading.js +1 -1
- package/dist/media-center/media-center/discover/discover-view-handler.svelte.d.ts +1 -0
- package/dist/media-center/media-center/discover/discover-view-handler.svelte.js +15 -2
- package/dist/media-center/media-center/discover/discover-view-localization.d.ts +1 -0
- package/dist/media-center/media-center/discover/discover-view-localization.js +6 -0
- package/dist/media-center/media-center/discover/discover-view.svelte +68 -44
- package/dist/media-center/media-center/media-center-context.svelte.js +1 -0
- package/dist/ui/shadow-dom/cmp.shadow-root.svelte +2 -0
- package/dist/ui/shadow-dom/colors.scss +2 -0
- package/package.json +1 -1
|
@@ -11,7 +11,7 @@ export class DiscoverDataLoader {
|
|
|
11
11
|
}
|
|
12
12
|
const streamsResponse = await this.dataProvider.streamPlayer.getStreamsCursor({
|
|
13
13
|
filter: { categoryId: holder.categoryId ?? undefined },
|
|
14
|
-
limit:
|
|
14
|
+
limit: 5,
|
|
15
15
|
continuationToken: holder.continuationToken
|
|
16
16
|
});
|
|
17
17
|
holder.streams = [...holder.streams, ...streamsResponse.items];
|
|
@@ -51,6 +51,10 @@ export class DiscoverViewHandler {
|
|
|
51
51
|
}
|
|
52
52
|
index++;
|
|
53
53
|
}
|
|
54
|
+
const holdersWithContent = this._shortVideosInCategory.filter((x) => x.shortVideos.length > 0);
|
|
55
|
+
if (holdersWithContent.length === 1) {
|
|
56
|
+
await this._dataLoader.loadShortVideos(holdersWithContent[0]);
|
|
57
|
+
}
|
|
54
58
|
}
|
|
55
59
|
finally {
|
|
56
60
|
this._shortVideosLoadingDeferred.resolve();
|
|
@@ -58,7 +62,7 @@ export class DiscoverViewHandler {
|
|
|
58
62
|
}
|
|
59
63
|
};
|
|
60
64
|
activate = async (data) => {
|
|
61
|
-
const { activeCategoryId, childCategories } = data;
|
|
65
|
+
const { activeCategoryId, activeCategoryName, childCategories } = data;
|
|
62
66
|
this._state = 'loading';
|
|
63
67
|
try {
|
|
64
68
|
const promises = [];
|
|
@@ -72,13 +76,22 @@ export class DiscoverViewHandler {
|
|
|
72
76
|
if (streamsInCategory.continuationToken === undefined) {
|
|
73
77
|
promises.push(this._dataLoader.loadStreams(streamsInCategory));
|
|
74
78
|
}
|
|
75
|
-
// Init short videos in categories
|
|
79
|
+
// Init short videos in child categories
|
|
76
80
|
const nonExistingShortVideosInCategory = childCategories.filter((cc) => !this._shortVideosInCategoryCache.some((x) => x.categoryId === cc.id));
|
|
77
81
|
for (const category of nonExistingShortVideosInCategory) {
|
|
78
82
|
const newShortVideosInCategory = new ShortVideosInCategory({ categoryId: category.id, categoryName: category.name });
|
|
79
83
|
this._shortVideosInCategoryCache.push(newShortVideosInCategory);
|
|
80
84
|
}
|
|
81
85
|
this._shortVideosInCategory = childCategories.map((c) => this._shortVideosInCategoryCache.find((b) => b.categoryId === c.id));
|
|
86
|
+
// Init short videos in main category
|
|
87
|
+
if (activeCategoryId) {
|
|
88
|
+
let shortVideosInCategory = this._shortVideosInCategoryCache.find((x) => x.categoryId === activeCategoryId);
|
|
89
|
+
if (!shortVideosInCategory) {
|
|
90
|
+
shortVideosInCategory = new ShortVideosInCategory({ categoryId: activeCategoryId, categoryName: activeCategoryName || '' });
|
|
91
|
+
this._shortVideosInCategoryCache.push(shortVideosInCategory);
|
|
92
|
+
}
|
|
93
|
+
this._shortVideosInCategory.unshift(shortVideosInCategory);
|
|
94
|
+
}
|
|
82
95
|
const pushShortVideoPromise = (holder) => {
|
|
83
96
|
if (holder && holder.continuationToken === undefined) {
|
|
84
97
|
promises.push(this._dataLoader.loadShortVideos(holder));
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import {} from '../../../core/locale';
|
|
2
2
|
export class DiscoverViewLocalization {
|
|
3
3
|
latestStreamsSectionTitle;
|
|
4
|
+
latestShortVideosSectionTitle;
|
|
4
5
|
locale;
|
|
5
6
|
constructor(locale) {
|
|
6
7
|
this.latestStreamsSectionTitle = loc.streamsSectionTitle[locale];
|
|
8
|
+
this.latestShortVideosSectionTitle = loc.shortVideosSectionTitle[locale];
|
|
7
9
|
this.locale = locale;
|
|
8
10
|
}
|
|
9
11
|
}
|
|
@@ -11,5 +13,9 @@ const loc = {
|
|
|
11
13
|
streamsSectionTitle: {
|
|
12
14
|
en: 'Latest Streams',
|
|
13
15
|
no: 'Siste Streams'
|
|
16
|
+
},
|
|
17
|
+
shortVideosSectionTitle: {
|
|
18
|
+
en: 'Latest Short Videos',
|
|
19
|
+
no: 'Siste Korte Videoer'
|
|
14
20
|
}
|
|
15
21
|
};
|
|
@@ -10,7 +10,7 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
|
|
|
10
10
|
</script>
|
|
11
11
|
|
|
12
12
|
<div class="media-center-discover">
|
|
13
|
-
<div class="media-center-discover__content">
|
|
13
|
+
<div class="media-center-discover__content media-center-discover__feed">
|
|
14
14
|
<Header context={context} />
|
|
15
15
|
{#if handler.streamsHolder?.streams.length}
|
|
16
16
|
<div class="media-center-discover__section">
|
|
@@ -25,35 +25,38 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
|
|
|
25
25
|
</div>
|
|
26
26
|
{/if}
|
|
27
27
|
{#if !handler.loading}
|
|
28
|
-
{
|
|
29
|
-
<
|
|
30
|
-
{#
|
|
31
|
-
|
|
32
|
-
<div class="media-center-discover__section
|
|
33
|
-
|
|
28
|
+
<InfiniteScrolling loadMore={handler.loadMoreShortVideos}>
|
|
29
|
+
<div class="media-center-discover__feed">
|
|
30
|
+
{#each handler.shortVideosHolders as holder, index (holder)}
|
|
31
|
+
{#if holder.shortVideos.length}
|
|
32
|
+
<div class="media-center-discover__section">
|
|
33
|
+
<div class="media-center-discover__section-header">
|
|
34
|
+
{holder.categoryId === context.categoriesHandler.selectedCategoryId ? localization.latestShortVideosSectionTitle : holder.categoryName}
|
|
35
|
+
</div>
|
|
36
|
+
<div
|
|
37
|
+
class="media-center-discover__section-content"
|
|
38
|
+
class:media-center-discover__section-content--5={index % 2 !== 0}
|
|
39
|
+
class:media-center-discover__section-content--4={index % 2 === 0}
|
|
40
|
+
class:media-center-discover__section-content--not-alone={handler.shortVideosHolders.length > 1}>
|
|
41
|
+
{#each holder.shortVideos as item (item.id)}
|
|
42
|
+
<ShortVideoCard
|
|
43
|
+
shortVideo={{
|
|
44
|
+
id: item.id,
|
|
45
|
+
text: item.text,
|
|
46
|
+
cover: getPostCoverImage(item),
|
|
47
|
+
displayDate: item.displayDate,
|
|
48
|
+
viewsCount: item.viewsCount,
|
|
49
|
+
products: item.products
|
|
50
|
+
}}
|
|
51
|
+
locale={context.locale}
|
|
52
|
+
on={{ click: () => on.shortVideoSelected(item) }} />
|
|
53
|
+
{/each}
|
|
54
|
+
</div>
|
|
34
55
|
</div>
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
{#each holder.shortVideos as item (item.id)}
|
|
40
|
-
<ShortVideoCard
|
|
41
|
-
shortVideo={{
|
|
42
|
-
id: item.id,
|
|
43
|
-
text: item.text,
|
|
44
|
-
cover: getPostCoverImage(item),
|
|
45
|
-
displayDate: item.displayDate,
|
|
46
|
-
viewsCount: item.viewsCount,
|
|
47
|
-
products: item.products
|
|
48
|
-
}}
|
|
49
|
-
locale={context.locale}
|
|
50
|
-
on={{ click: () => on.shortVideoSelected(item) }} />
|
|
51
|
-
{/each}
|
|
52
|
-
</div>
|
|
53
|
-
</div>
|
|
54
|
-
{/if}
|
|
55
|
-
</InfiniteScrolling>
|
|
56
|
-
{/each}
|
|
56
|
+
{/if}
|
|
57
|
+
{/each}
|
|
58
|
+
</div>
|
|
59
|
+
</InfiniteScrolling>
|
|
57
60
|
{/if}
|
|
58
61
|
</div>
|
|
59
62
|
</div>
|
|
@@ -110,9 +113,6 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
|
|
|
110
113
|
width: 100%;
|
|
111
114
|
max-width: 73.75rem;
|
|
112
115
|
margin: 0 auto;
|
|
113
|
-
display: flex;
|
|
114
|
-
flex-direction: column;
|
|
115
|
-
gap: 3rem;
|
|
116
116
|
padding-bottom: 1.25rem;
|
|
117
117
|
/* Set 'container-type: inline-size;' to reference container*/
|
|
118
118
|
/* Set 'container-type: inline-size;' to reference container*/
|
|
@@ -120,22 +120,42 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
|
|
|
120
120
|
}
|
|
121
121
|
@container (width < 992px) {
|
|
122
122
|
.media-center-discover__content {
|
|
123
|
-
gap: 2.5rem;
|
|
124
123
|
padding-bottom: 1rem;
|
|
125
124
|
}
|
|
126
125
|
}
|
|
127
126
|
@container (width < 768px) {
|
|
128
127
|
.media-center-discover__content {
|
|
129
|
-
gap: 2rem;
|
|
130
128
|
padding-bottom: 0.8125rem;
|
|
131
129
|
}
|
|
132
130
|
}
|
|
133
131
|
@container (width < 576px) {
|
|
134
132
|
.media-center-discover__content {
|
|
135
|
-
gap: 1.5rem;
|
|
136
133
|
padding-bottom: 0.625rem;
|
|
137
134
|
}
|
|
138
135
|
}
|
|
136
|
+
.media-center-discover__feed {
|
|
137
|
+
display: flex;
|
|
138
|
+
flex-direction: column;
|
|
139
|
+
gap: 3rem;
|
|
140
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
141
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
142
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
143
|
+
}
|
|
144
|
+
@container (width < 992px) {
|
|
145
|
+
.media-center-discover__feed {
|
|
146
|
+
gap: 2.5rem;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
@container (width < 768px) {
|
|
150
|
+
.media-center-discover__feed {
|
|
151
|
+
gap: 2rem;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
@container (width < 576px) {
|
|
155
|
+
.media-center-discover__feed {
|
|
156
|
+
gap: 1.5rem;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
139
159
|
.media-center-discover__section {
|
|
140
160
|
display: flex;
|
|
141
161
|
flex-direction: column;
|
|
@@ -154,11 +174,15 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
|
|
|
154
174
|
font-size: 1.125rem;
|
|
155
175
|
line-height: 1.75rem;
|
|
156
176
|
font-weight: 600;
|
|
157
|
-
color: var(--sc-mc-color--text-
|
|
158
|
-
text-shadow: var(--sc-mc-color--text-
|
|
177
|
+
color: var(--sc-mc-color--text-primary);
|
|
178
|
+
text-shadow: var(--sc-mc-color--text-primary-shadow);
|
|
159
179
|
}
|
|
160
180
|
.media-center-discover__section-content {
|
|
161
181
|
display: grid;
|
|
182
|
+
--_section-content--more-items--display: block;
|
|
183
|
+
}
|
|
184
|
+
.media-center-discover__section-content--not-alone {
|
|
185
|
+
--_section-content--more-items--display: none;
|
|
162
186
|
}
|
|
163
187
|
.media-center-discover__section-content--4 {
|
|
164
188
|
gap: 1.25rem;
|
|
@@ -168,7 +192,7 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
|
|
|
168
192
|
/* Set 'container-type: inline-size;' to reference container*/
|
|
169
193
|
}
|
|
170
194
|
.media-center-discover__section-content--4 :global(> :nth-child(n + 5)) {
|
|
171
|
-
display:
|
|
195
|
+
display: var(--_section-content--more-items--display);
|
|
172
196
|
}
|
|
173
197
|
@container (width < 992px) {
|
|
174
198
|
.media-center-discover__section-content--4 {
|
|
@@ -176,7 +200,7 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
|
|
|
176
200
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
177
201
|
}
|
|
178
202
|
.media-center-discover__section-content--4 :global(> :nth-child(n + 4)) {
|
|
179
|
-
display:
|
|
203
|
+
display: var(--_section-content--more-items--display);
|
|
180
204
|
}
|
|
181
205
|
}
|
|
182
206
|
@container (width < 768px) {
|
|
@@ -188,7 +212,7 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
|
|
|
188
212
|
display: block;
|
|
189
213
|
}
|
|
190
214
|
.media-center-discover__section-content--4 :global(> :nth-child(n + 5)) {
|
|
191
|
-
display:
|
|
215
|
+
display: var(--_section-content--more-items--display);
|
|
192
216
|
}
|
|
193
217
|
}
|
|
194
218
|
@container (width < 576px) {
|
|
@@ -204,7 +228,7 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
|
|
|
204
228
|
/* Set 'container-type: inline-size;' to reference container*/
|
|
205
229
|
}
|
|
206
230
|
.media-center-discover__section-content--5 :global(> :nth-child(n + 6)) {
|
|
207
|
-
display:
|
|
231
|
+
display: var(--_section-content--more-items--display);
|
|
208
232
|
}
|
|
209
233
|
@container (width < 992px) {
|
|
210
234
|
.media-center-discover__section-content--5 {
|
|
@@ -212,7 +236,7 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
|
|
|
212
236
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
213
237
|
}
|
|
214
238
|
.media-center-discover__section-content--5 :global(> :nth-child(n + 5)) {
|
|
215
|
-
display:
|
|
239
|
+
display: var(--_section-content--more-items--display);
|
|
216
240
|
}
|
|
217
241
|
}
|
|
218
242
|
@container (width < 768px) {
|
|
@@ -221,7 +245,7 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
|
|
|
221
245
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
222
246
|
}
|
|
223
247
|
.media-center-discover__section-content--5 :global(> :nth-child(n + 4)) {
|
|
224
|
-
display:
|
|
248
|
+
display: var(--_section-content--more-items--display);
|
|
225
249
|
}
|
|
226
250
|
}
|
|
227
251
|
@container (width < 576px) {
|
|
@@ -233,6 +257,6 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
|
|
|
233
257
|
display: block;
|
|
234
258
|
}
|
|
235
259
|
.media-center-discover__section-content--5 :global(> :nth-child(n + 5)) {
|
|
236
|
-
display:
|
|
260
|
+
display: var(--_section-content--more-items--display);
|
|
237
261
|
}
|
|
238
262
|
}</style>
|
|
@@ -124,6 +124,7 @@ export class MediaCenterContext {
|
|
|
124
124
|
const childCategories = this.categoriesHandler.allCategories.filter((c) => c.parentId === this.categoriesHandler.selectedCategoryId);
|
|
125
125
|
await this.discoverHandler.activate({
|
|
126
126
|
activeCategoryId: this.categoriesHandler.selectedCategoryId,
|
|
127
|
+
activeCategoryName: this.categoriesHandler.allCategories.find((c) => c.id === this.categoriesHandler.selectedCategoryId)?.name || null,
|
|
127
128
|
childCategories: childCategories.map((c) => ({ id: c.id, name: c.name }))
|
|
128
129
|
});
|
|
129
130
|
};
|
|
@@ -77,6 +77,7 @@ const styles = $derived.by(() => {
|
|
|
77
77
|
--sc-mc-color--text-brand: #144ab0;
|
|
78
78
|
--sc-mc-color--text-inverted: #ffffff;
|
|
79
79
|
--sc-mc-color--text-primary: #000000;
|
|
80
|
+
--sc-mc-color--text-primary-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(255, 255, 255, 0.1), 0 1px 6px rgba(255, 255, 255, 0.05);
|
|
80
81
|
--sc-mc-color--text-secondary: #6b7280;
|
|
81
82
|
--sc-mc-color--text-white: #ffffff;
|
|
82
83
|
--sc-mc-color--text-white-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
|
|
@@ -109,6 +110,7 @@ const styles = $derived.by(() => {
|
|
|
109
110
|
--sc-mc-color--text-brand: #5a8dec;
|
|
110
111
|
--sc-mc-color--text-inverted: #ffffff;
|
|
111
112
|
--sc-mc-color--text-primary: #ffffff;
|
|
113
|
+
--sc-mc-color--text-primary-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
|
|
112
114
|
--sc-mc-color--text-secondary: #d1d5db;
|
|
113
115
|
--sc-mc-color--text-white: #ffffff;
|
|
114
116
|
--sc-mc-color--text-white-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
|
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
--sc-mc-color--text-brand: #{colors.$color-primary-500};
|
|
32
32
|
--sc-mc-color--text-inverted: #{colors.$color-white};
|
|
33
33
|
--sc-mc-color--text-primary: #{colors.$color-black};
|
|
34
|
+
--sc-mc-color--text-primary-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(255, 255, 255, 0.1), 0 1px 6px rgba(255, 255, 255, 0.05);
|
|
34
35
|
--sc-mc-color--text-secondary: #{colors.$color-neutral-500};
|
|
35
36
|
--sc-mc-color--text-white: #{colors.$color-white};
|
|
36
37
|
--sc-mc-color--text-white-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
|
|
@@ -67,6 +68,7 @@
|
|
|
67
68
|
--sc-mc-color--text-brand: #{colors.$color-primary-400};
|
|
68
69
|
--sc-mc-color--text-inverted: #{colors.$color-white};
|
|
69
70
|
--sc-mc-color--text-primary: #{colors.$color-white};
|
|
71
|
+
--sc-mc-color--text-primary-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
|
|
70
72
|
--sc-mc-color--text-secondary: #{colors.$color-neutral-300};
|
|
71
73
|
--sc-mc-color--text-white: #{colors.$color-white};
|
|
72
74
|
--sc-mc-color--text-white-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
|