@streamscloud/embeddable 6.1.0 → 6.2.1

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.
Files changed (16) hide show
  1. package/dist/core/enums.d.ts +6 -0
  2. package/dist/core/enums.js +8 -0
  3. package/dist/media-center/data-provider/internal-media-center-data-provider.svelte.js +3 -1
  4. package/dist/media-center/data-provider/operations.generated.js +20 -4
  5. package/dist/media-center/media-center/cmp.media-center.svelte +33 -10
  6. package/dist/short-videos/short-video-viewer/cmp.attachments.svelte +1 -1
  7. package/dist/short-videos/short-video-viewer/mapper.js +1 -0
  8. package/dist/short-videos/short-video-viewer/operations.generated.js +20 -4
  9. package/dist/short-videos/short-video-viewer/operations.graphql +4 -4
  10. package/dist/short-videos/short-video-viewer/types.d.ts +1 -0
  11. package/dist/short-videos/short-videos-player/controls.svelte +2 -2
  12. package/dist/short-videos/short-videos-player/operations.generated.js +20 -4
  13. package/dist/short-videos/short-videos-player/ui-manager.svelte.js +1 -1
  14. package/dist/streams/layout/models/mapper.js +1 -0
  15. package/dist/streams/stream-player/controls.svelte +1 -0
  16. package/package.json +1 -1
package/dist/core/enums.d.ts CHANGED
@@ -29,3 +29,9 @@ export declare enum ImageScale {
29
29
  OriginalEncoded = "ORIGINAL_ENCODED",
30
30
  Small = "SMALL"
31
31
  }
32
+ export declare enum PostType {
33
+ ShortVideo = "SHORT_VIDEO"
34
+ }
35
+ export declare enum Status {
36
+ Published = "PUBLISHED"
37
+ }
package/dist/core/enums.js CHANGED
@@ -35,3 +35,11 @@ export var ImageScale;
35
35
  ImageScale["OriginalEncoded"] = "ORIGINAL_ENCODED";
36
36
  ImageScale["Small"] = "SMALL";
37
37
  })(ImageScale || (ImageScale = {}));
38
+ export var PostType;
39
+ (function (PostType) {
40
+ PostType["ShortVideo"] = "SHORT_VIDEO";
41
+ })(PostType || (PostType = {}));
42
+ export var Status;
43
+ (function (Status) {
44
+ Status["Published"] = "PUBLISHED";
45
+ })(Status || (Status = {}));
package/dist/media-center/data-provider/internal-media-center-data-provider.svelte.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { PostType, Status } from '../../core/enums';
1
2
  import { createLocalGQLClient } from '../../core/graphql';
2
3
  import { mapToShortVideoViewerModel } from '../../short-videos/short-video-viewer';
3
4
  import { GetMediaPageConfigDocument, GetShortVideosDocument } from './operations.generated';
@@ -26,7 +27,8 @@ export class InternalMediaCenterDataProvider {
26
27
  input: {
27
28
  filter: {
28
29
  mediaPageId: this.mediaPageId,
29
- types: ['SHORT_VIDEO'],
30
+ types: [PostType.ShortVideo],
31
+ statuses: [Status.Published],
30
32
  categoryId: filter.categoryId,
31
33
  excludeIds: filter.excludeIds
32
34
  },
package/dist/media-center/data-provider/operations.generated.js CHANGED
@@ -143,8 +143,16 @@ export const GetShortVideosDocument = {
143
143
  selectionSet: {
144
144
  kind: 'SelectionSet',
145
145
  selections: [
146
- { kind: 'Field', name: { kind: 'Name', value: 'url' } },
147
- { kind: 'Field', name: { kind: 'Name', value: 'thumbnailUrl' } },
146
+ {
147
+ kind: 'Field',
148
+ name: { kind: 'Name', value: 'url' },
149
+ arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
150
+ },
151
+ {
152
+ kind: 'Field',
153
+ name: { kind: 'Name', value: 'thumbnailUrl' },
154
+ arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
155
+ },
148
156
  { kind: 'Field', name: { kind: 'Name', value: 'type' } }
149
157
  ]
150
158
  }
@@ -213,8 +221,16 @@ export const GetShortVideosDocument = {
213
221
  selectionSet: {
214
222
  kind: 'SelectionSet',
215
223
  selections: [
216
- { kind: 'Field', name: { kind: 'Name', value: 'url' } },
217
- { kind: 'Field', name: { kind: 'Name', value: 'thumbnailUrl' } },
224
+ {
225
+ kind: 'Field',
226
+ name: { kind: 'Name', value: 'url' },
227
+ arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
228
+ },
229
+ {
230
+ kind: 'Field',
231
+ name: { kind: 'Name', value: 'thumbnailUrl' },
232
+ arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
233
+ },
218
234
  { kind: 'Field', name: { kind: 'Name', value: 'type' } }
219
235
  ]
220
236
  }
package/dist/media-center/media-center/cmp.media-center.svelte CHANGED
@@ -73,6 +73,9 @@ const selectCategory = (categoryId) => {
73
73
  return;
74
74
  }
75
75
  if (selectedCategoryId === categoryId) {
76
+ if (overviewOpened) {
77
+ overviewOpened = false;
78
+ }
76
79
  return;
77
80
  }
78
81
  switch (mediaCenterMode) {
@@ -89,6 +92,7 @@ const selectCategory = (categoryId) => {
89
92
  Utils.assertUnreachable(mediaCenterMode);
90
93
  }
91
94
  selectedCategoryId = categoryId;
95
+ overviewOpened = false;
92
96
  };
93
97
  const activateSelectedShortVideoFeed = (shortVideo) => {
94
98
  if (!dataProvider || !shortVideoProps) {
@@ -191,14 +195,14 @@ const onScrollMounted = (node) => {
191
195
  class:media-center__scroll--has-both={scrollHasRight && scrollHasLeft}
192
196
  use:onScrollMounted
193
197
  onscroll={updateScrollShadows}>
194
- <button type="button" class="media-center__overview-button" onclick={toggleOverview}>
198
+ <button type="button" class="media-center__overview-button" class:media-center__overview-button--active={overviewOpened} onclick={toggleOverview}>
195
199
  <Icon src={IconTextColumnThree} />
196
200
  </button>
197
201
  {#each categories as category (category.id)}
198
202
  <button
199
203
  type="button"
200
204
  class="media-center__category-button"
201
- class:media-center__category-button--active={selectedCategoryId === category.id}
205
+ class:media-center__category-button--active={!overviewOpened && selectedCategoryId === category.id}
202
206
  title={category.name}
203
207
  onclick={() => selectCategory(category.id)}>{category.name}</button>
204
208
  {/each}
@@ -212,14 +216,18 @@ const onScrollMounted = (node) => {
212
216
  </div>
213
217
  {/snippet}
214
218
  <div class="media-center__overview-dropdown-content">
215
- <button type="button" class="media-center__category-button media-center__category-button--dropdown" onclick={toggleOverview}>
219
+ <button
220
+ type="button"
221
+ class="media-center__category-button media-center__category-button--dropdown"
222
+ class:media-center__category-button--active={overviewOpened}
223
+ onclick={toggleOverview}>
216
224
  {localization.overviewLabel}
217
225
  </button>
218
226
  {#each categories as category (category.id)}
219
227
  <button
220
228
  type="button"
221
229
  class="media-center__category-button media-center__category-button--dropdown"
222
- class:media-center__category-button--active={selectedCategoryId === category.id}
230
+ class:media-center__category-button--active={!overviewOpened && selectedCategoryId === category.id}
223
231
  title={category.name}
224
232
  onclick={() => selectCategory(category.id)}>{category.name}</button>
225
233
  {/each}
@@ -318,12 +326,21 @@ const onScrollMounted = (node) => {
318
326
  pointer-events: auto;
319
327
  padding: 0.375rem 0.75rem;
320
328
  line-height: 0;
329
+ white-space: nowrap;
330
+ flex: 0 0 auto;
321
331
  border-radius: 0.875rem;
322
332
  background-color: rgba(0, 0, 0, 0.6);
323
333
  color: #f2f2f2;
324
334
  transition: background 0.3s ease-in-out;
325
- white-space: nowrap;
326
- flex: 0 0 auto;
335
+ -webkit-user-drag: none;
336
+ user-select: none;
337
+ }
338
+ .media-center__overview-button :global([contenteditable]) {
339
+ user-select: text;
340
+ }
341
+ .media-center__overview-button--active {
342
+ background-color: rgba(255, 255, 255, 0.9);
343
+ color: #000000;
327
344
  }
328
345
  .media-center__overview-button:hover:not(.media-center__overview-button--active) {
329
346
  background-color: rgba(0, 0, 0, 0.9);
@@ -331,25 +348,31 @@ const onScrollMounted = (node) => {
331
348
  .media-center__category-button {
332
349
  pointer-events: auto;
333
350
  font-size: 0.875rem;
351
+ line-height: 1;
334
352
  padding: 0.5rem 1.5rem;
335
353
  white-space: nowrap;
336
354
  width: auto;
337
355
  max-width: none;
338
356
  min-width: 0;
357
+ scroll-snap-align: start;
358
+ flex: 0 0 auto;
339
359
  border-radius: 0.875rem;
340
360
  background-color: rgba(0, 0, 0, 0.6);
341
361
  color: #f2f2f2;
342
362
  transition: background 0.3s ease-in-out;
343
- scroll-snap-align: start;
344
- flex: 0 0 auto;
363
+ -webkit-user-drag: none;
364
+ user-select: none;
345
365
  }
346
- .media-center__category-button:hover:not(.media-center__category-button--active) {
347
- background-color: rgba(0, 0, 0, 0.9);
366
+ .media-center__category-button :global([contenteditable]) {
367
+ user-select: text;
348
368
  }
349
369
  .media-center__category-button--active {
350
370
  background-color: rgba(255, 255, 255, 0.9);
351
371
  color: #000000;
352
372
  }
373
+ .media-center__category-button:hover:not(.media-center__category-button--active) {
374
+ background-color: rgba(0, 0, 0, 0.9);
375
+ }
353
376
  .media-center__category-button--dropdown {
354
377
  width: max-content;
355
378
  }
package/dist/short-videos/short-video-viewer/cmp.attachments.svelte CHANGED
@@ -6,7 +6,7 @@ let { shortVideo, localization: localizationInit = 'en', on } = $props();
6
6
  const localization = $derived(new ShortVideoAttachmentsLocalization(localizationInit));
7
7
  </script>
8
8
 
9
- {#if shortVideo.products.length || shortVideo.ad}
9
+ {#if shortVideo.hasAttachments}
10
10
  <div class="short-video-attachments">
11
11
  {#if shortVideo.ad}
12
12
  <AdCard ad={shortVideo.ad} />
package/dist/short-videos/short-video-viewer/mapper.js CHANGED
@@ -18,6 +18,7 @@ export const mapToShortVideoViewerModel = (payload) => {
18
18
  text: payload.postData.shortVideoData.text,
19
19
  enableSocialInteractions: payload.enableSocialInteractions,
20
20
  heading: null,
21
+ hasAttachments: !!(payload.allProducts.length || payload.ad),
21
22
  ad: payload.ad ? mapToShortVideoAdCardModel(payload.ad) : null,
22
23
  products: payload.allProducts.map((x) => mapToShortVideoProductCard(x))
23
24
  // uncomment if you want to test many products behavior
package/dist/short-videos/short-video-viewer/operations.generated.js CHANGED
@@ -26,8 +26,16 @@ export const ShortVideoViewerPayloadFragmentDoc = {
26
26
  selectionSet: {
27
27
  kind: 'SelectionSet',
28
28
  selections: [
29
- { kind: 'Field', name: { kind: 'Name', value: 'url' } },
30
- { kind: 'Field', name: { kind: 'Name', value: 'thumbnailUrl' } },
29
+ {
30
+ kind: 'Field',
31
+ name: { kind: 'Name', value: 'url' },
32
+ arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
33
+ },
34
+ {
35
+ kind: 'Field',
36
+ name: { kind: 'Name', value: 'thumbnailUrl' },
37
+ arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
38
+ },
31
39
  { kind: 'Field', name: { kind: 'Name', value: 'type' } }
32
40
  ]
33
41
  }
@@ -96,8 +104,16 @@ export const ShortVideoViewerPayloadFragmentDoc = {
96
104
  selectionSet: {
97
105
  kind: 'SelectionSet',
98
106
  selections: [
99
- { kind: 'Field', name: { kind: 'Name', value: 'url' } },
100
- { kind: 'Field', name: { kind: 'Name', value: 'thumbnailUrl' } },
107
+ {
108
+ kind: 'Field',
109
+ name: { kind: 'Name', value: 'url' },
110
+ arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
111
+ },
112
+ {
113
+ kind: 'Field',
114
+ name: { kind: 'Name', value: 'thumbnailUrl' },
115
+ arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
116
+ },
101
117
  { kind: 'Field', name: { kind: 'Name', value: 'type' } }
102
118
  ]
103
119
  }
package/dist/short-videos/short-video-viewer/operations.graphql CHANGED
@@ -7,8 +7,8 @@ fragment ShortVideoViewerPayloadFragment on Post {
7
7
  shortDescription
8
8
  link
9
9
  media {
10
- url
11
- thumbnailUrl
10
+ url(scale: SMALL)
11
+ thumbnailUrl(scale: SMALL)
12
12
  type
13
13
  }
14
14
  brand {
@@ -40,8 +40,8 @@ fragment ShortVideoViewerPayloadFragment on Post {
40
40
  }
41
41
  type
42
42
  media {
43
- url
44
- thumbnailUrl
43
+ url(scale: SMALL)
44
+ thumbnailUrl(scale: SMALL)
45
45
  type
46
46
  }
47
47
  }
package/dist/short-videos/short-video-viewer/types.d.ts CHANGED
@@ -14,6 +14,7 @@ export type ShortVideoViewerModel = {
14
14
  enableSocialInteractions: boolean;
15
15
  products: ShortVideoProductCardModel[];
16
16
  ad: ShortVideoAdCardModel | null;
17
+ hasAttachments: boolean;
17
18
  };
18
19
  export type ShortVideoViewerHeadingModel = {
19
20
  image: string | null;
package/dist/short-videos/short-videos-player/controls.svelte CHANGED
@@ -44,7 +44,7 @@ const changeShowAttachments = () => {
44
44
  <img src={playerLogo} class="short-videos-player-controls__logo-img" alt="Player Logo" />
45
45
  </div>
46
46
  {/if}
47
- {#if shortVideo && uiManager.showAttachments}
47
+ {#if shortVideo?.hasAttachments && uiManager.showAttachments}
48
48
  <div class="short-videos-player-controls__short-video-attachments" transition:slideHorizontally|local>
49
49
  <ShortVideoViewerAttachments
50
50
  shortVideo={shortVideo}
@@ -109,6 +109,7 @@ const changeShowAttachments = () => {
109
109
  overflow-y: auto;
110
110
  scrollbar-color: transparent transparent;
111
111
  scrollbar-width: thin;
112
+ scrollbar-gutter: stable;
112
113
  }
113
114
  .short-videos-player-controls__right::-webkit-scrollbar {
114
115
  width: 3px;
@@ -148,7 +149,6 @@ const changeShowAttachments = () => {
148
149
  height: var(--short-videos-player--media-center-header--height);
149
150
  min-height: var(--short-videos-player--media-center-header--height);
150
151
  max-height: var(--short-videos-player--media-center-header--height);
151
- min-height: 4.375rem;
152
152
  display: flex;
153
153
  justify-content: center;
154
154
  align-items: center;
package/dist/short-videos/short-videos-player/operations.generated.js CHANGED
@@ -69,8 +69,16 @@ export const GetShortVideosDocument = {
69
69
  selectionSet: {
70
70
  kind: 'SelectionSet',
71
71
  selections: [
72
- { kind: 'Field', name: { kind: 'Name', value: 'url' } },
73
- { kind: 'Field', name: { kind: 'Name', value: 'thumbnailUrl' } },
72
+ {
73
+ kind: 'Field',
74
+ name: { kind: 'Name', value: 'url' },
75
+ arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
76
+ },
77
+ {
78
+ kind: 'Field',
79
+ name: { kind: 'Name', value: 'thumbnailUrl' },
80
+ arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
81
+ },
74
82
  { kind: 'Field', name: { kind: 'Name', value: 'type' } }
75
83
  ]
76
84
  }
@@ -139,8 +147,16 @@ export const GetShortVideosDocument = {
139
147
  selectionSet: {
140
148
  kind: 'SelectionSet',
141
149
  selections: [
142
- { kind: 'Field', name: { kind: 'Name', value: 'url' } },
143
- { kind: 'Field', name: { kind: 'Name', value: 'thumbnailUrl' } },
150
+ {
151
+ kind: 'Field',
152
+ name: { kind: 'Name', value: 'url' },
153
+ arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
154
+ },
155
+ {
156
+ kind: 'Field',
157
+ name: { kind: 'Name', value: 'thumbnailUrl' },
158
+ arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'EnumValue', value: 'SMALL' } }]
159
+ },
144
160
  { kind: 'Field', name: { kind: 'Name', value: 'type' } }
145
161
  ]
146
162
  }
package/dist/short-videos/short-videos-player/ui-manager.svelte.js CHANGED
@@ -11,7 +11,7 @@ export class ShortVideosPlayerUiManager {
11
11
  `--short-videos-player--controls--available-space: ${(this._viewTotalWidth - this._mainViewColumnWidth) / 2}px`,
12
12
  `--short-videos-player--controls--padding: ${this._mediaCenterHeaderHeight ? 0 : CONTROLS_PADDING_VERTICAL}px ${CONTROLS_PADDING_HORIZONTAL}px ${CONTROLS_PADDING_VERTICAL}px`,
13
13
  `--short-videos-player--icon--size: ${ICON_SIZE}px`,
14
- `--short-videos-player--media-center-header--height: ${this._mediaCenterHeaderHeight}px`,
14
+ `--short-videos-player--media-center-header--height: ${this._mediaCenterHeaderHeight || 72}px`,
15
15
  `--short-videos-player--padding: ${this._mediaCenterHeaderHeight ? this._mediaCenterHeaderHeight : PLAYER_PADDING_VERTICAL}px 0 ${PLAYER_PADDING_VERTICAL}px`
16
16
  ];
17
17
  return values.join(';');
package/dist/streams/layout/models/mapper.js CHANGED
@@ -17,6 +17,7 @@ export const mapToShortVideoViewerModel = (model) => {
17
17
  viewsCount: model.header.postViewsCount
18
18
  },
19
19
  enableSocialInteractions: model.enableSocialInteractions,
20
+ hasAttachments: !!(model.products.length || model.ad),
20
21
  ad: model.ad ? mapToAdViewModel(model.ad) : null,
21
22
  products: model.products.map(mapToProductCardModel)
22
23
  // uncomment if you want to test many products behavior
package/dist/streams/stream-player/controls.svelte CHANGED
@@ -129,6 +129,7 @@ const changeShowShortVideoAttachments = () => {
129
129
  justify-content: space-between;
130
130
  align-items: flex-end;
131
131
  flex-direction: column;
132
+ scrollbar-gutter: stable;
132
133
  }
133
134
  .stream-player-controls__short-video-hub {
134
135
  gap: 2.5rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@streamscloud/embeddable",
3
- "version": "6.1.0",
3
+ "version": "6.2.1",
4
4
  "author": "StreamsCloud",
5
5
  "repository": {
6
6
  "type": "git",