@streamscloud/embeddable 14.0.0-rc.0 → 14.0.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.
Files changed (165) hide show
  1. package/dist/core/analytics.profile-id.d.ts +5 -0
  2. package/dist/core/{analytics.installation-id.js → analytics.profile-id.js} +10 -20
  3. package/dist/external-api/data-providers/internal-media-center-analytics-handler.d.ts +14 -14
  4. package/dist/external-api/data-providers/internal-media-center-analytics-handler.js +19 -170
  5. package/dist/external-api/data-providers/internal-media-center-data-provider.svelte.js +6 -6
  6. package/dist/external-api/data-providers/internal-post-analytics-handler.d.ts +7 -7
  7. package/dist/external-api/data-providers/internal-post-analytics-handler.js +11 -72
  8. package/dist/external-api/data-providers/internal-stream-analytics-handler.d.ts +13 -12
  9. package/dist/external-api/data-providers/internal-stream-analytics-handler.js +18 -162
  10. package/dist/external-api/data-providers/mocks/index.d.ts +5 -0
  11. package/dist/external-api/data-providers/mocks/index.js +5 -0
  12. package/dist/{media-center/categories-following → external-api/data-providers/mocks}/mock-categories-following-handler.svelte.d.ts +1 -1
  13. package/dist/external-api/data-providers/mocks/mock-content-management-handler.svelte.d.ts +29 -0
  14. package/dist/external-api/data-providers/mocks/mock-content-management-handler.svelte.js +61 -0
  15. package/dist/{media-center/membership → external-api/data-providers/mocks}/mock-membership-handler.svelte.d.ts +1 -1
  16. package/dist/{media-center/navigation → external-api/data-providers/mocks}/mock-navigation-handler.svelte.d.ts +1 -2
  17. package/dist/{posts/social-interactions → external-api/data-providers/mocks}/mock-post-social-interactions-handler.svelte.d.ts +1 -2
  18. package/dist/{posts/social-interactions → external-api/data-providers/mocks}/mock-post-social-interactions-handler.svelte.js +17 -6
  19. package/dist/external-api/data-providers/mocks/operations.generated.d.ts +115 -0
  20. package/dist/external-api/data-providers/mocks/operations.generated.js +377 -0
  21. package/dist/external-api/data-providers/mocks/operations.graphql +18 -0
  22. package/dist/external-api/data-providers/post-data-loaders/mapper.js +3 -1
  23. package/dist/media-center/config/types.d.ts +7 -1
  24. package/dist/media-center/content-management/index.d.ts +1 -0
  25. package/dist/media-center/content-management/index.js +1 -0
  26. package/dist/media-center/content-management/types.d.ts +24 -0
  27. package/dist/media-center/content-management/types.js +1 -0
  28. package/dist/media-center/index.d.ts +2 -1
  29. package/dist/media-center/media-center/cmp.media-center-proxy.svelte +2 -2
  30. package/dist/media-center/media-center/discover/data-loading.d.ts +3 -0
  31. package/dist/media-center/media-center/discover/data-loading.js +13 -2
  32. package/dist/media-center/media-center/discover/discover-view-handler.svelte.d.ts +23 -0
  33. package/dist/media-center/media-center/discover/discover-view-handler.svelte.js +88 -0
  34. package/dist/media-center/media-center/discover/discover-view.svelte +90 -47
  35. package/dist/media-center/media-center/discover/discover-view.svelte.d.ts +2 -2
  36. package/dist/media-center/media-center/footer/media-center-footer.svelte +1 -1
  37. package/dist/media-center/media-center/handlers/index.d.ts +1 -0
  38. package/dist/media-center/media-center/handlers/index.js +1 -0
  39. package/dist/media-center/media-center/handlers/media-center-content-handler.svelte.d.ts +62 -0
  40. package/dist/media-center/media-center/handlers/media-center-content-handler.svelte.js +144 -0
  41. package/dist/media-center/media-center/header/media-center-header-mobile.svelte +10 -7
  42. package/dist/media-center/media-center/header/media-center-header.svelte +1 -1
  43. package/dist/media-center/media-center/media-center-context.svelte.d.ts +3 -2
  44. package/dist/media-center/media-center/media-center-context.svelte.js +30 -11
  45. package/dist/media-center/media-center/media-center-view.svelte +31 -13
  46. package/dist/media-center/media-center/menu/menu.svelte +16 -7
  47. package/dist/media-center/media-center/menu/menu.svelte.d.ts +1 -0
  48. package/dist/media-center/media-center/menu/popular-streams-panel-handler.svelte.d.ts +7 -0
  49. package/dist/media-center/media-center/menu/popular-streams-panel-handler.svelte.js +23 -8
  50. package/dist/media-center/media-center/moments/moments-feed-handler.svelte.d.ts +19 -2
  51. package/dist/media-center/media-center/moments/moments-feed-handler.svelte.js +51 -6
  52. package/dist/media-center/media-center/moments/moments-state.svelte.d.ts +2 -0
  53. package/dist/media-center/media-center/moments/moments-state.svelte.js +16 -1
  54. package/dist/media-center/media-center/posts-feed/posts-feed-handler.svelte.d.ts +24 -4
  55. package/dist/media-center/media-center/posts-feed/posts-feed-handler.svelte.js +90 -9
  56. package/dist/media-center/media-center/streams-feed/streams-feed-handler.svelte.d.ts +18 -3
  57. package/dist/media-center/media-center/streams-feed/streams-feed-handler.svelte.js +64 -9
  58. package/dist/media-center/media-center/streams-in-category/streams-in-category-panel.svelte +2 -6
  59. package/dist/posts/controls/index.d.ts +2 -1
  60. package/dist/posts/controls/index.js +2 -1
  61. package/dist/posts/controls/post-actions-generator.svelte.d.ts +20 -0
  62. package/dist/posts/controls/post-actions-generator.svelte.js +27 -0
  63. package/dist/posts/controls/post-actions-handler.svelte.d.ts +26 -0
  64. package/dist/posts/controls/post-actions-handler.svelte.js +56 -0
  65. package/dist/posts/index.d.ts +1 -0
  66. package/dist/posts/model/types.d.ts +1 -0
  67. package/dist/posts/post-viewer/cmp.post-viewer.svelte +6 -7
  68. package/dist/posts/post-viewer/cmp.post-viewer.svelte.d.ts +2 -2
  69. package/dist/posts/post-viewer/mapper.js +1 -0
  70. package/dist/posts/posts-player/cmp.posts-player.svelte +2 -1
  71. package/dist/posts/posts-player/cmp.posts-player.svelte.d.ts +2 -0
  72. package/dist/posts/posts-player/index.d.ts +2 -0
  73. package/dist/posts/posts-player/index.js +2 -1
  74. package/dist/posts/posts-player/posts-player-proxy.svelte +2 -1
  75. package/dist/posts/posts-player/posts-player-proxy.svelte.d.ts +3 -1
  76. package/dist/posts/posts-player/posts-player-view.svelte +132 -34
  77. package/dist/posts/posts-player/types.d.ts +13 -3
  78. package/dist/posts/sharing/index.d.ts +1 -0
  79. package/dist/posts/sharing/index.js +1 -0
  80. package/dist/posts/sharing/types.d.ts +5 -0
  81. package/dist/posts/sharing/types.js +1 -0
  82. package/dist/posts/social-interactions/types.d.ts +0 -1
  83. package/dist/streams/controls/index.d.ts +1 -0
  84. package/dist/streams/controls/index.js +1 -0
  85. package/dist/streams/controls/stream-actions-generator.svelte.d.ts +31 -0
  86. package/dist/streams/controls/stream-actions-generator.svelte.js +42 -0
  87. package/dist/streams/index.d.ts +1 -0
  88. package/dist/streams/index.js +1 -0
  89. package/dist/streams/layout/cmp.layout.svelte +4 -1
  90. package/dist/streams/layout/cmp.layout.svelte.d.ts +1 -0
  91. package/dist/streams/layout/element-views/cmp.short-video-stream-element.svelte +1 -0
  92. package/dist/streams/layout/models/mapper.js +1 -0
  93. package/dist/streams/sharing/index.d.ts +1 -0
  94. package/dist/streams/sharing/index.js +1 -0
  95. package/dist/streams/sharing/types.d.ts +5 -0
  96. package/dist/streams/sharing/types.js +1 -0
  97. package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte +43 -1
  98. package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte.d.ts +9 -0
  99. package/dist/streams/streams-player/cmp.streams-player.svelte +2 -1
  100. package/dist/streams/streams-player/cmp.streams-player.svelte.d.ts +2 -0
  101. package/dist/streams/streams-player/index.d.ts +2 -0
  102. package/dist/streams/streams-player/index.js +2 -1
  103. package/dist/streams/streams-player/streams-player-proxy.svelte +2 -1
  104. package/dist/streams/streams-player/streams-player-proxy.svelte.d.ts +2 -0
  105. package/dist/streams/streams-player/streams-player-view.svelte +150 -34
  106. package/dist/streams/streams-player/types.d.ts +8 -0
  107. package/dist/ui/button/resources/button-theme.svelte +2 -4
  108. package/dist/ui/card-actions/card-action-container.d.ts +2 -0
  109. package/dist/ui/card-actions/card-action-container.js +17 -0
  110. package/dist/ui/card-actions/cmp.card-action.svelte +28 -0
  111. package/dist/ui/card-actions/cmp.card-action.svelte.d.ts +10 -0
  112. package/dist/ui/card-actions/cmp.card-actions.svelte +71 -0
  113. package/dist/ui/card-actions/cmp.card-actions.svelte.d.ts +9 -0
  114. package/dist/ui/card-actions/index.d.ts +4 -0
  115. package/dist/ui/card-actions/index.js +3 -0
  116. package/dist/ui/card-actions/types.d.ts +9 -0
  117. package/dist/ui/card-actions/types.js +1 -0
  118. package/dist/ui/icon/cmp.icon.svelte +1 -1
  119. package/dist/ui/player/button/cmp.player-button.svelte +1 -3
  120. package/dist/ui/player/button/cmp.player-buttons-group.svelte +1 -3
  121. package/dist/ui/player/button/cmp.responsive-player-buttons-group.svelte +53 -0
  122. package/dist/ui/player/button/cmp.responsive-player-buttons-group.svelte.d.ts +10 -0
  123. package/dist/ui/player/button/index.d.ts +1 -0
  124. package/dist/ui/player/button/index.js +1 -0
  125. package/dist/{content-player → ui/player/content-player}/cmp.content-player.svelte +7 -29
  126. package/dist/{content-player → ui/player/content-player}/cmp.content-player.svelte.d.ts +11 -15
  127. package/dist/ui/player/content-player/content-player-config.svelte.d.ts +29 -0
  128. package/dist/ui/player/content-player/content-player-config.svelte.js +27 -0
  129. package/dist/{content-player → ui/player/content-player}/content-player-settings.svelte.d.ts +3 -3
  130. package/dist/{content-player → ui/player/content-player}/content-player-settings.svelte.js +2 -2
  131. package/dist/{content-player → ui/player/content-player}/controls-and-attachments.svelte +18 -65
  132. package/dist/{content-player → ui/player/content-player}/controls-and-attachments.svelte.d.ts +11 -14
  133. package/dist/{content-player → ui/player/content-player}/overview-panel.svelte +2 -4
  134. package/dist/{content-player → ui/player/content-player}/overview-panel.svelte.d.ts +5 -14
  135. package/dist/{content-player → ui/player/content-player}/ui-manager.svelte.d.ts +3 -2
  136. package/dist/{content-player → ui/player/content-player}/ui-manager.svelte.js +3 -2
  137. package/dist/ui/player/providers/chunks-player-buffer/player-chunk-item.svelte.d.ts +0 -2
  138. package/dist/ui/player/providers/chunks-player-buffer/player-chunk-item.svelte.js +1 -3
  139. package/dist/ui/player/providers/chunks-player-buffer/player-chunk.svelte.d.ts +3 -2
  140. package/dist/ui/player/providers/chunks-player-buffer/player-chunk.svelte.js +11 -5
  141. package/dist/ui/player/providers/chunks-player-buffer/player-chunks-manager.svelte.d.ts +3 -0
  142. package/dist/ui/player/providers/chunks-player-buffer/player-chunks-manager.svelte.js +74 -8
  143. package/dist/ui/player/providers/default-chunks-player-buffer.svelte.d.ts +2 -0
  144. package/dist/ui/player/providers/default-chunks-player-buffer.svelte.js +15 -4
  145. package/dist/ui/player/providers/default-feed-player-buffer.svelte.d.ts +1 -0
  146. package/dist/ui/player/providers/default-feed-player-buffer.svelte.js +27 -5
  147. package/dist/ui/player/providers/types.d.ts +1 -0
  148. package/dist/ui/player/slider/cmp.player-slider.svelte.d.ts +5 -14
  149. package/dist/ui/player/slider-horizontal/cmp.slider.svelte +2 -6
  150. package/dist/ui/player/slider-horizontal/cmp.slider.svelte.d.ts +5 -12
  151. package/dist/ui/shadow-dom/cmp.shadow-root.svelte +11 -6
  152. package/dist/ui/shadow-dom/colors.scss +2 -0
  153. package/package.json +7 -3
  154. package/dist/content-player/content-player-config.svelte.d.ts +0 -51
  155. package/dist/content-player/content-player-config.svelte.js +0 -48
  156. package/dist/core/analytics.installation-id.d.ts +0 -5
  157. package/dist/external-api/data-providers/mapper.d.ts +0 -3
  158. package/dist/external-api/data-providers/mapper.js +0 -18
  159. package/dist/posts/controls/cmp.controls.svelte +0 -120
  160. package/dist/posts/controls/cmp.controls.svelte.d.ts +0 -16
  161. /package/dist/{media-center/categories-following → external-api/data-providers/mocks}/mock-categories-following-handler.svelte.js +0 -0
  162. /package/dist/{media-center/membership → external-api/data-providers/mocks}/mock-membership-handler.svelte.js +0 -0
  163. /package/dist/{media-center/navigation → external-api/data-providers/mocks}/mock-navigation-handler.svelte.js +0 -0
  164. /package/dist/{content-player → ui/player/content-player}/index.d.ts +0 -0
  165. /package/dist/{content-player → ui/player/content-player}/index.js +0 -0
@@ -6,7 +6,6 @@ export class PlayerChunk {
6
6
  model;
7
7
  items = $derived.by(() => this._chunkItems.map((i) => i.model));
8
8
  chunkItems = $derived.by(() => this._chunkItems);
9
- chunkIndex;
10
9
  activeChunkItem = $derived.by(() => this._chunkItems[this._activeItemIndex] ?? null);
11
10
  isEmpty = $derived.by(() => this.isFullyLoaded && this._chunkItems.length === 0);
12
11
  isFullyLoaded = $state(false);
@@ -15,9 +14,8 @@ export class PlayerChunk {
15
14
  _isLoading = $state(false);
16
15
  _itemsLoader;
17
16
  constructor(data) {
18
- const { chunk, provider, chunkIndex, callbacks } = data;
17
+ const { chunk, provider, callbacks } = data;
19
18
  this.model = chunk;
20
- this.chunkIndex = chunkIndex;
21
19
  this._itemsLoader = new CursorDataLoader({
22
20
  loadPage: async (continuationToken) => {
23
21
  if (this.isFullyLoaded) {
@@ -27,9 +25,8 @@ export class PlayerChunk {
27
25
  const newItems = result.items;
28
26
  this._chunkItems = [
29
27
  ...this._chunkItems,
30
- ...newItems.map((item, index) => new PlayerChunkItem({
28
+ ...newItems.map((item) => new PlayerChunkItem({
31
29
  model: item,
32
- indexWithinChunk: this._chunkItems.length + index,
33
30
  chunkId: this.model.id
34
31
  }))
35
32
  ];
@@ -45,6 +42,12 @@ export class PlayerChunk {
45
42
  }
46
43
  });
47
44
  }
45
+ get isLoading() {
46
+ return this._isLoading;
47
+ }
48
+ get activeItemIndex() {
49
+ return this._activeItemIndex;
50
+ }
48
51
  loadMore = () => this._itemsLoader.loadMore();
49
52
  setActiveItemIndex = async (index, warmUp = true) => {
50
53
  this._activeItemIndex = index;
@@ -52,6 +55,9 @@ export class PlayerChunk {
52
55
  await this.warmUp();
53
56
  }
54
57
  };
58
+ mutateChunkItems = (items) => {
59
+ this._chunkItems = items;
60
+ };
55
61
  warmUp = async () => {
56
62
  if (this._chunkItems.length >= this._activeItemIndex + CHUNK_ITEMS_BUFFER_SIZE || this._isLoading) {
57
63
  return;
@@ -8,9 +8,12 @@ export declare class PlayerChunksManager<TItem extends WithId, TChunk extends Wi
8
8
  constructor(provider: IChunksPlayerDataProvider<TItem, TChunk>);
9
9
  get activeChunk(): PlayerChunk<TItem, TChunk>;
10
10
  get loadedChunks(): PlayerChunk<TItem, TChunk>[];
11
+ get isLoading(): boolean;
11
12
  get flattenedChunkItems(): TItem[];
12
13
  get flattenedActiveChunkItemIndex(): number;
13
14
  tryActivateItemById: (id: string) => boolean;
15
+ removeItemById: (id: string) => boolean;
16
+ removeChunkById: (id: string) => boolean | undefined;
14
17
  initialize: () => Promise<void>;
15
18
  setActiveChunkIndex: (index: number) => Promise<void>;
16
19
  activateItemAtFlattenedIndex: (index: number) => Promise<void>;
@@ -16,6 +16,9 @@ export class PlayerChunksManager {
16
16
  get loadedChunks() {
17
17
  return this._loadedChunks;
18
18
  }
19
+ get isLoading() {
20
+ return this._fetchDeferred !== null || this._loadedChunks.some((c) => c.isLoading);
21
+ }
19
22
  get flattenedChunkItems() {
20
23
  return this._loadedChunks.reduce((acc, chunk) => {
21
24
  acc.push(...chunk.items);
@@ -27,21 +30,85 @@ export class PlayerChunksManager {
27
30
  return -1;
28
31
  }
29
32
  let itemsBeforeActiveChunk = 0;
30
- for (let i = 0; i < this.activeChunk.chunkIndex; i++) {
33
+ for (let i = 0; i < this._activeChunkIndex; i++) {
31
34
  itemsBeforeActiveChunk += this._loadedChunks[i].items.length;
32
35
  }
33
- return itemsBeforeActiveChunk + this.activeChunk.activeChunkItem.indexWithinChunk;
36
+ return itemsBeforeActiveChunk + this.activeChunk.activeItemIndex;
34
37
  }
35
38
  tryActivateItemById = (id) => {
36
- const chunkWithItem = this._loadedChunks.find((chunk) => chunk.items.some((item) => item.id === id));
39
+ const chunkWithItemIndex = this._loadedChunks.findIndex((chunk) => chunk.items.some((item) => item.id === id));
40
+ const chunkWithItem = this._loadedChunks[chunkWithItemIndex];
37
41
  if (!chunkWithItem) {
38
42
  return false;
39
43
  }
40
44
  const itemIndex = chunkWithItem.items.findIndex((item) => item.id === id);
41
- this.setActiveChunkIndex(chunkWithItem.chunkIndex);
45
+ this.setActiveChunkIndex(chunkWithItemIndex);
42
46
  this.activeChunk.setActiveItemIndex(itemIndex);
43
47
  return true;
44
48
  };
49
+ removeItemById = (id) => {
50
+ const itemIndex = this.flattenedChunkItems.findIndex((item) => item.id === id);
51
+ if (itemIndex === -1) {
52
+ return false;
53
+ }
54
+ const currentItem = this.flattenedChunkItems[this.flattenedActiveChunkItemIndex];
55
+ // Find next item to activate BEFORE removing (if removing current item)
56
+ let nextItemId = currentItem?.id;
57
+ if (this.flattenedActiveChunkItemIndex === itemIndex) {
58
+ // Try next item
59
+ if (itemIndex + 1 < this.flattenedChunkItems.length) {
60
+ nextItemId = this.flattenedChunkItems[itemIndex + 1].id;
61
+ }
62
+ // Try previous item
63
+ else if (itemIndex > 0) {
64
+ nextItemId = this.flattenedChunkItems[itemIndex - 1].id;
65
+ }
66
+ else {
67
+ // No items left
68
+ nextItemId = null;
69
+ }
70
+ }
71
+ // Remove item from chunks
72
+ this._loadedChunks.forEach((chunk) => {
73
+ if (chunk.chunkItems.some((i) => i.model.id === id)) {
74
+ chunk.mutateChunkItems(chunk.chunkItems.filter((i) => i.model.id !== id));
75
+ }
76
+ });
77
+ if (nextItemId) {
78
+ this.tryActivateItemById(nextItemId);
79
+ }
80
+ else {
81
+ this._activeChunkIndex = -1;
82
+ }
83
+ return true;
84
+ };
85
+ removeChunkById = (id) => {
86
+ const chunkIndex = this._loadedChunks.findIndex((chunk) => chunk.model.id === id);
87
+ if (chunkIndex === -1) {
88
+ return false;
89
+ }
90
+ const isActiveChunk = this._activeChunkIndex === chunkIndex;
91
+ let newActiveChunkIndex = this._activeChunkIndex;
92
+ this._loadedChunks.splice(chunkIndex, 1);
93
+ if (this._loadedChunks.length === 0) {
94
+ this._activeChunkIndex = -1;
95
+ this.provider.onEndReached?.();
96
+ return;
97
+ }
98
+ if (isActiveChunk) {
99
+ if (chunkIndex < this._loadedChunks.length) {
100
+ newActiveChunkIndex = chunkIndex;
101
+ }
102
+ else {
103
+ newActiveChunkIndex = this._loadedChunks.length - 1;
104
+ }
105
+ }
106
+ else if (this._activeChunkIndex > chunkIndex) {
107
+ newActiveChunkIndex--;
108
+ }
109
+ this.setActiveChunkIndex(newActiveChunkIndex);
110
+ return true;
111
+ };
45
112
  initialize = async () => {
46
113
  const handleInitialized = async () => {
47
114
  const startIndex = Math.min(FIXED_START_INDEX, this._loadedChunks.length - 1);
@@ -56,7 +123,7 @@ export class PlayerChunksManager {
56
123
  this.activeChunk.setActiveItemIndex(this.provider.initialData.startItemIndex);
57
124
  }
58
125
  };
59
- this._loadedChunks = this.provider.initialData.prefetchedChunks.map((chunk, chunkIndex) => new PlayerChunk({ chunk, chunkIndex, provider: { loadChunkItems: this.provider.loadChunkItems } }));
126
+ this._loadedChunks = this.provider.initialData.prefetchedChunks.map((chunk) => new PlayerChunk({ chunk, provider: { loadChunkItems: this.provider.loadChunkItems } }));
60
127
  const considerInitialized = this._loadedChunks.length !== 0;
61
128
  if (considerInitialized) {
62
129
  handleInitialized();
@@ -85,7 +152,7 @@ export class PlayerChunksManager {
85
152
  this.activeChunk.warmUp();
86
153
  }
87
154
  else {
88
- this.activeChunk.setActiveItemIndex(nextItem.indexWithinChunk);
155
+ this.activeChunk.setActiveItemIndex(this.activeChunk.chunkItems.indexOf(nextItem));
89
156
  }
90
157
  };
91
158
  warmUp = async () => {
@@ -101,9 +168,8 @@ export class PlayerChunksManager {
101
168
  const result = await this.provider.loadMoreChunks();
102
169
  this._loadedChunks = [
103
170
  ...this._loadedChunks,
104
- ...result.map((chunk, index) => new PlayerChunk({
171
+ ...result.map((chunk) => new PlayerChunk({
105
172
  chunk,
106
- chunkIndex: this._loadedChunks.length + index,
107
173
  provider: { loadChunkItems: this.provider.loadChunkItems }
108
174
  }))
109
175
  ];
@@ -14,6 +14,8 @@ export declare class DefaultChunksPlayerBuffer<TItem extends WithId, TChunk exte
14
14
  get activeChunk(): import("./chunks-player-buffer").PlayerChunk<TItem, TChunk>;
15
15
  setActiveChunkItemIndex: (index: number) => void;
16
16
  tryActivateItemById: (id: string) => boolean;
17
+ removeChunkById: (id: string) => boolean | undefined;
18
+ removeItemById: (id: string) => boolean;
17
19
  loadNext: () => Promise<void>;
18
20
  loadPrevious: () => Promise<void>;
19
21
  reset: () => void;
@@ -5,7 +5,12 @@ export class DefaultChunksPlayerBuffer {
5
5
  loaded = $derived.by(() => this._playerChunksManager.flattenedChunkItems);
6
6
  currentIndex = $derived.by(() => this._playerChunksManager.flattenedActiveChunkItemIndex);
7
7
  current = $derived(this.currentIndex >= 0 ? this.loaded[this.currentIndex] : null);
8
- canLoadNext = $derived.by(() => this.currentIndex < this.loaded.length - 1 || !!this._onEndReachedFn);
8
+ canLoadNext = $derived.by(() => {
9
+ if (this.loaded.length && this.currentIndex < this.loaded.length - 1) {
10
+ return true;
11
+ }
12
+ return !this._playerChunksManager.isLoading && !!this._onEndReachedFn;
13
+ });
9
14
  canLoadPrevious = $derived(this.currentIndex > 0);
10
15
  navigationDisabled = $derived(!this.canLoadNext && !this.canLoadPrevious);
11
16
  animationDuration = 500;
@@ -31,15 +36,21 @@ export class DefaultChunksPlayerBuffer {
31
36
  tryActivateItemById = (id) => {
32
37
  return this._playerChunksManager.tryActivateItemById(id);
33
38
  };
39
+ removeChunkById = (id) => {
40
+ return this._playerChunksManager.removeChunkById(id);
41
+ };
42
+ removeItemById = (id) => {
43
+ return this._playerChunksManager.removeItemById(id);
44
+ };
34
45
  loadNext = async () => {
35
46
  if (!this.canLoadNext) {
36
47
  return;
37
48
  }
38
- if (this.currentIndex >= this.loaded.length - 1) {
39
- this._onEndReachedFn?.();
49
+ if (this.currentIndex < this.loaded.length - 1) {
50
+ this._playerChunksManager.activateItemAtFlattenedIndex(this.currentIndex + 1);
40
51
  return;
41
52
  }
42
- this._playerChunksManager.activateItemAtFlattenedIndex(this.currentIndex + 1);
53
+ this._onEndReachedFn?.();
43
54
  };
44
55
  loadPrevious = async () => {
45
56
  if (!this.canLoadPrevious) {
@@ -19,6 +19,7 @@ export declare class DefaultFeedPlayerBuffer<T extends WithId> implements IFeedP
19
19
  private _onEndReachedFn;
20
20
  constructor(provider: IFeedPlayerDataProvider<T>);
21
21
  tryActivateItemById: (id: string) => boolean;
22
+ removeItemById: (id: string) => boolean;
22
23
  loadNext: () => Promise<void>;
23
24
  loadPrevious: () => Promise<void>;
24
25
  reset: () => void;
@@ -6,7 +6,12 @@ export class DefaultFeedPlayerBuffer {
6
6
  loaded = $derived.by(() => this._loaded);
7
7
  currentIndex = $derived.by(() => this._currentIndex);
8
8
  current = $derived(this.currentIndex >= 0 ? this.loaded[this.currentIndex] : null);
9
- canLoadNext = $derived.by(() => this.currentIndex < this.loaded.length - 1 || !!this._onEndReachedFn);
9
+ canLoadNext = $derived.by(() => {
10
+ if (this.loaded.length && this.currentIndex < this.loaded.length - 1) {
11
+ return true;
12
+ }
13
+ return !this._fetchDeferred && !!this._onEndReachedFn;
14
+ });
10
15
  canLoadPrevious = $derived(this.currentIndex > 0);
11
16
  navigationDisabled = $derived(!this.canLoadNext && !this.canLoadPrevious);
12
17
  animationDuration = 500;
@@ -31,16 +36,33 @@ export class DefaultFeedPlayerBuffer {
31
36
  this._currentIndex = itemIndex;
32
37
  return true;
33
38
  };
39
+ removeItemById = (id) => {
40
+ const itemIndex = this._loaded.findIndex((item) => item.id === id);
41
+ if (itemIndex === -1) {
42
+ return false;
43
+ }
44
+ this._loaded = this._loaded.filter((item) => item.id !== id);
45
+ if (itemIndex < this._currentIndex) {
46
+ this._currentIndex--;
47
+ }
48
+ else if (itemIndex === this._currentIndex) {
49
+ if (this._currentIndex >= this._loaded.length) {
50
+ this._currentIndex = this._loaded.length - 1;
51
+ }
52
+ // Otherwise keep the same index (activates next item)
53
+ }
54
+ return true;
55
+ };
34
56
  loadNext = async () => {
35
57
  if (!this.canLoadNext) {
36
58
  return;
37
59
  }
38
- if (this.currentIndex >= this.loaded.length - 1) {
39
- this._onEndReachedFn?.();
60
+ if (this.currentIndex < this.loaded.length - 1) {
61
+ ++this._currentIndex;
62
+ await this.warmUpBuffer();
40
63
  return;
41
64
  }
42
- ++this._currentIndex;
43
- this.warmUpBuffer();
65
+ this._onEndReachedFn?.();
44
66
  };
45
67
  loadPrevious = async () => {
46
68
  if (!this.canLoadPrevious) {
@@ -37,6 +37,7 @@ export interface IPlayerBufferBase<T extends WithId> {
37
37
  reset: () => void;
38
38
  ensureWarmedUp: () => Promise<void>;
39
39
  tryActivateItemById: (id: string) => boolean;
40
+ removeItemById: (id: string) => void;
40
41
  }
41
42
  type TExtended<T> = T & {
42
43
  mediaIndex?: number;
@@ -1,9 +1,9 @@
1
1
  import type { PlayerSliderBuffer, PlayerSliderCallbacks } from './types';
2
2
  import { type Snippet } from 'svelte';
3
- declare function $$render<T extends {
3
+ declare class __sveltets_Render<T extends {
4
4
  id: string;
5
- }>(): {
6
- props: {
5
+ }> {
6
+ props(): {
7
7
  buffer: PlayerSliderBuffer<T>;
8
8
  on?: PlayerSliderCallbacks;
9
9
  children: Snippet<[{
@@ -11,17 +11,8 @@ declare function $$render<T extends {
11
11
  active?: boolean;
12
12
  }]>;
13
13
  };
14
- exports: {};
15
- bindings: "";
16
- slots: {};
17
- events: {};
18
- };
19
- declare class __sveltets_Render<T extends {
20
- id: string;
21
- }> {
22
- props(): ReturnType<typeof $$render<T>>['props'];
23
- events(): ReturnType<typeof $$render<T>>['events'];
24
- slots(): ReturnType<typeof $$render<T>>['slots'];
14
+ events(): {};
15
+ slots(): {};
25
16
  bindings(): "";
26
17
  exports(): {};
27
18
  }
@@ -284,6 +284,7 @@ const showClassicArrowsAndDots = $derived([SliderMode.ArrowsAndDots, SliderMode.
284
284
  width: 100%;
285
285
  height: 100%;
286
286
  overflow: hidden;
287
+ /* Set 'container-type: inline-size;' to reference container*/
287
288
  }
288
289
  .slider__slides {
289
290
  display: flex;
@@ -376,14 +377,12 @@ const showClassicArrowsAndDots = $derived([SliderMode.ArrowsAndDots, SliderMode.
376
377
  text-align: center;
377
378
  color: var(--sc-mc-color--text-white);
378
379
  visibility: hidden;
380
+ /* Set 'container-type: inline-size;' to reference container*/
379
381
  }
380
382
  .slider__counts-navigation-button:disabled {
381
383
  opacity: 0.5;
382
384
  cursor: default;
383
385
  }
384
- .slider__counts-navigation-button {
385
- /* Set 'container-type: inline-size;' to reference container*/
386
- }
387
386
  @container (width < 576px) {
388
387
  .slider__counts-navigation-button {
389
388
  visibility: visible;
@@ -412,9 +411,6 @@ const showClassicArrowsAndDots = $derived([SliderMode.ArrowsAndDots, SliderMode.
412
411
  position: static;
413
412
  margin-top: 1rem;
414
413
  }
415
- .slider {
416
- /* Set 'container-type: inline-size;' to reference container*/
417
- }
418
414
  @container (width < 576px) {
419
415
  .slider__navigation-button {
420
416
  visibility: visible;
@@ -1,8 +1,8 @@
1
1
  import type { Locale } from '../../../core/locale';
2
2
  import { type SliderDotsConfig, SliderMode } from './types';
3
3
  import { type Snippet } from 'svelte';
4
- declare function $$render<T>(): {
5
- props: {
4
+ declare class __sveltets_Render<T> {
5
+ props(): {
6
6
  items: T[];
7
7
  initialIndex: number;
8
8
  sliderMode?: SliderMode;
@@ -11,18 +11,11 @@ declare function $$render<T>(): {
11
11
  locale: Locale;
12
12
  on?: {
13
13
  indexChanged: (index: number) => void;
14
- };
14
+ } | undefined;
15
15
  children: Snippet<[T]>;
16
16
  };
17
- exports: {};
18
- bindings: "";
19
- slots: {};
20
- events: {};
21
- };
22
- declare class __sveltets_Render<T> {
23
- props(): ReturnType<typeof $$render<T>>['props'];
24
- events(): ReturnType<typeof $$render<T>>['events'];
25
- slots(): ReturnType<typeof $$render<T>>['slots'];
17
+ events(): {};
18
+ slots(): {};
26
19
  bindings(): "";
27
20
  exports(): {};
28
21
  }
@@ -51,10 +51,11 @@ const styles = $derived.by(() => {
51
51
  }
52
52
  }
53
53
  :host,
54
- :global([data-theme='default']) {
54
+ :global([data-theme="default"]) {
55
55
  /* Backgrounds */
56
56
  --sc-mc-color--bg-button: #ffffff;
57
57
  --sc-mc-color--bg-card: #ffffff;
58
+ --sc-mc-color--bg-card-action: #f9fafb;
58
59
  --sc-mc-color--bg-image: #d1d5db;
59
60
  --sc-mc-color--bg-panel: #ffffff;
60
61
  --sc-mc-color--bg-screen: #f9fafb;
@@ -84,10 +85,11 @@ const styles = $derived.by(() => {
84
85
  --sc-mc-color--text-inactive: #e5e7eb;
85
86
  }
86
87
 
87
- :global([data-theme='dark']) {
88
+ :global([data-theme="dark"]) {
88
89
  /* Backgrounds */
89
90
  --sc-mc-color--bg-button: #111827;
90
91
  --sc-mc-color--bg-card: #000000;
92
+ --sc-mc-color--bg-card-action: #111827;
91
93
  --sc-mc-color--bg-image: #374151;
92
94
  --sc-mc-color--bg-panel: #000000;
93
95
  --sc-mc-color--bg-screen: #1e1e1e;
@@ -117,14 +119,17 @@ const styles = $derived.by(() => {
117
119
  --sc-mc-color--text-inactive: #d1d5db;
118
120
  }
119
121
 
120
- .shadow-root {
121
- --_shadow-root--background-color: rgb(from var(--shadow-root--background, var(--sc-mc-color--bg-screen)) r g b);
122
- --_shadow-root--shield-color: rgb(from var(--shadow-root--background, rgb(from var(--sc-mc-color--bg-screen) r g b / 50%)) r g b / alpha);
123
- --_shadow-root--background-image-url: var(--shadow-root--background-image-url);
122
+ :host {
124
123
  font-family: "Inter", sans-serif;
125
124
  font-size: 16px;
126
125
  font-weight: normal;
127
126
  color: var(--sc-mc-color--text-primary);
127
+ }
128
+
129
+ .shadow-root {
130
+ --_shadow-root--background-color: rgb(from var(--shadow-root--background, var(--sc-mc-color--bg-screen)) r g b);
131
+ --_shadow-root--shield-color: rgb(from var(--shadow-root--background, rgb(from var(--sc-mc-color--bg-screen) r g b / 50%)) r g b / alpha);
132
+ --_shadow-root--background-image-url: var(--shadow-root--background-image-url);
128
133
  width: 100%;
129
134
  min-width: 100%;
130
135
  max-width: 100%;
@@ -5,6 +5,7 @@
5
5
  /* Backgrounds */
6
6
  --sc-mc-color--bg-button: #{colors.$color-white};
7
7
  --sc-mc-color--bg-card: #{colors.$color-white};
8
+ --sc-mc-color--bg-card-action: #{colors.$color-neutral-50};
8
9
  --sc-mc-color--bg-image: #{colors.$color-neutral-300};
9
10
  --sc-mc-color--bg-panel: #{colors.$color-white};
10
11
  --sc-mc-color--bg-screen: #{colors.$color-neutral-50};
@@ -42,6 +43,7 @@
42
43
  /* Backgrounds */
43
44
  --sc-mc-color--bg-button: #{colors.$color-neutral-900};
44
45
  --sc-mc-color--bg-card: #{colors.$color-black};
46
+ --sc-mc-color--bg-card-action: #{colors.$color-neutral-900};
45
47
  --sc-mc-color--bg-image: #{colors.$color-neutral-700};
46
48
  --sc-mc-color--bg-panel: #{colors.$color-black};
47
49
  --sc-mc-color--bg-screen: #{colors.$color-dark-800};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@streamscloud/embeddable",
3
- "version": "14.0.0-rc.0",
3
+ "version": "14.0.0",
4
4
  "author": "StreamsCloud",
5
5
  "repository": {
6
6
  "type": "git",
@@ -57,6 +57,10 @@
57
57
  "types": "./dist/posts/post-viewer/index.d.ts",
58
58
  "svelte": "./dist/posts/post-viewer/index.js"
59
59
  },
60
+ "./streams": {
61
+ "types": "./dist/streams/index.d.ts",
62
+ "svelte": "./dist/streams/index.js"
63
+ },
60
64
  "./streams-player": {
61
65
  "types": "./dist/streams/streams-player/index.d.ts",
62
66
  "svelte": "./dist/streams/streams-player/index.js"
@@ -131,7 +135,7 @@
131
135
  "peerDependencies": {
132
136
  "@fluentui/svg-icons": "^1.1.301",
133
137
  "@popperjs/core": "^2.11.8",
134
- "@streamscloud/streams-analytics-collector": "^3.0.0",
138
+ "@streamscloud/streams-analytics-collector": "^2.0.9",
135
139
  "@urql/core": "^5.1.1",
136
140
  "dequal": "^2.0.3",
137
141
  "dompurify": "^3.2.6",
@@ -180,7 +184,7 @@
180
184
  "svelte-preprocess": "^6.0.3",
181
185
  "typescript": "^5.8.3",
182
186
  "typescript-eslint": "^8.32.1",
183
- "vite": "^6.3.5",
187
+ "vite": "^6.4.1",
184
188
  "vite-tsconfig-paths": "^5.1.4",
185
189
  "wheel-gestures": "^2.2.48"
186
190
  }
@@ -1,51 +0,0 @@
1
- import { type IPostModel, PostModel } from '../posts/model';
2
- import type { IPostSocialInteractionsHandler } from '../posts/social-interactions';
3
- import type { ICloseOrchestrator } from '../ui/player/close-orchestrator';
4
- import type { IPlayerBuffer } from '../ui/player/providers';
5
- import type { PlayerSliderCallbacks } from '../ui/player/slider/types';
6
- import { ContentPlayerSettings } from './content-player-settings.svelte';
7
- import { ContentPlayerUIManager } from './ui-manager.svelte';
8
- export declare class ContentPlayerConfig<T extends {
9
- id: string;
10
- }> {
11
- playerBuffer: IPlayerBuffer<T> | null;
12
- readonly settings: ContentPlayerSettings;
13
- readonly callbacks: ContentPlayerCallbacks | null;
14
- readonly playerSliderCallbacks: PlayerSliderCallbacks | undefined;
15
- readonly socialInteractionsHandler: IPostSocialInteractionsHandler | undefined;
16
- readonly closeOrchestrator: ICloseOrchestrator;
17
- readonly uiManager: ContentPlayerUIManager;
18
- private _trackingParams;
19
- private _mappers;
20
- private mappedPostsCache;
21
- constructor(init: {
22
- playerBuffer: IPlayerBuffer<T> | null;
23
- mappers: ContentPlayerMappers<T>;
24
- socialInteractionsHandler?: IPostSocialInteractionsHandler;
25
- settings?: ContentPlayerSettings;
26
- callbacks?: ContentPlayerCallbacks;
27
- playerSliderCallbacks?: PlayerSliderCallbacks;
28
- trackingParams?: ContentPlayerTrackingParams | null;
29
- closeOrchestrator: ICloseOrchestrator;
30
- });
31
- get playerColors(): import("../ui/player/colors").PlayerColors;
32
- get trackingParams(): ContentPlayerConfig<T>['_trackingParams'];
33
- itemAsPostViewerModel: (item: T & {
34
- mediaIndex?: number;
35
- }) => PostModel | null;
36
- updateTrackingParams: (data: ContentPlayerTrackingParams | null) => void;
37
- }
38
- export type ContentPlayerMappers<T> = {
39
- postModelFromCurrentItem: (item: T) => IPostModel | null;
40
- };
41
- export type ContentPlayerCallbacks = {
42
- videoProgress?: (playerItemId: string, postId: string, progress: number) => void;
43
- productClick?: (productId: string, postId: string) => void;
44
- productImpression?: (productId: string, postId: string) => void;
45
- adClick?: (adId: string, postId: string) => void;
46
- adImpression?: (adId: string, postId: string) => void;
47
- };
48
- export type ContentPlayerTrackingParams = {
49
- streamId?: string;
50
- campaignId?: string;
51
- } | false;
@@ -1,48 +0,0 @@
1
- import { PostModel } from '../posts/model';
2
- import { ContentPlayerSettings } from './content-player-settings.svelte';
3
- import { ContentPlayerUIManager } from './ui-manager.svelte';
4
- export class ContentPlayerConfig {
5
- playerBuffer = $state.raw(null);
6
- settings;
7
- callbacks;
8
- playerSliderCallbacks;
9
- socialInteractionsHandler;
10
- closeOrchestrator;
11
- uiManager = new ContentPlayerUIManager();
12
- _trackingParams = $state.raw(null);
13
- _mappers;
14
- mappedPostsCache = new Map();
15
- constructor(init) {
16
- const { playerBuffer, trackingParams, mappers, socialInteractionsHandler, settings, callbacks, playerSliderCallbacks, closeOrchestrator } = init;
17
- this.playerBuffer = playerBuffer;
18
- this._trackingParams = trackingParams ?? null;
19
- this.settings = settings || new ContentPlayerSettings();
20
- this.callbacks = callbacks || null;
21
- this.playerSliderCallbacks = playerSliderCallbacks;
22
- this.socialInteractionsHandler = socialInteractionsHandler;
23
- this.closeOrchestrator = closeOrchestrator;
24
- this._mappers = mappers;
25
- }
26
- get playerColors() {
27
- return this.settings.playerColors;
28
- }
29
- get trackingParams() {
30
- return this._trackingParams;
31
- }
32
- itemAsPostViewerModel = (item) => {
33
- if (this.mappedPostsCache.has(item.id)) {
34
- return this.mappedPostsCache.get(item.id) || null;
35
- }
36
- const post = this._mappers.postModelFromCurrentItem(item);
37
- if (!post) {
38
- this.mappedPostsCache.set(item.id, null);
39
- return null;
40
- }
41
- const postModel = new PostModel(post);
42
- this.mappedPostsCache.set(item.id, postModel);
43
- return postModel;
44
- };
45
- updateTrackingParams = (data) => {
46
- this._trackingParams = data ?? null;
47
- };
48
- }
@@ -1,5 +0,0 @@
1
- /**
2
- * Retrieves the installation ID from localStorage or generates a new one if it doesn't exist
3
- * @returns The installation ID to use for analytics tracking
4
- */
5
- export declare const getOrCreateInstallationId: () => string;
@@ -1,3 +0,0 @@
1
- import { PostType } from '../../core/enums';
2
- import { EntityType } from '@streamscloud/streams-analytics-collector';
3
- export declare function mapPostTypeToEntityType(postType: PostType): EntityType;
@@ -1,18 +0,0 @@
1
- import { PostType } from '../../core/enums';
2
- import { EntityType } from '@streamscloud/streams-analytics-collector';
3
- export function mapPostTypeToEntityType(postType) {
4
- switch (postType) {
5
- case PostType.Article:
6
- return EntityType.Article;
7
- case PostType.Media:
8
- return EntityType.Media;
9
- case PostType.Moment:
10
- return EntityType.Moment;
11
- case PostType.ShortVideo:
12
- return EntityType.ShortVideo;
13
- case PostType.Video:
14
- return EntityType.Video;
15
- default:
16
- throw new Error(`Unknown PostType: ${postType}`);
17
- }
18
- }