@streamscloud/embeddable 15.0.0-rc.0 → 15.0.0-rc.2

package/dist/ui/player/progress/cmp.chunks-progress.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">let { totalItems, activeItemIndex, chunkInfo } = $props();
+export {};
+</script>
+
+<div class="chunks-progress">
+  <div class="chunks" class:chunks--few={totalItems <= 3} class:chunks--common={totalItems > 3 && totalItems <= 6} class:chunks--many={totalItems > 6}>
+    {#each Array(totalItems) as _, i (i)}
+      <div class="chunk" class:active={i <= activeItemIndex} aria-label={`Item ${i}`}></div>
+    {/each}
+  </div>
+
+  {#if chunkInfo}
+    <div class="info">
+      {@render chunkInfo()}
+    </div>
+  {/if}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.chunks-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.chunks {
+  display: flex;
+}
+.chunks--few {
+  gap: 0.75rem;
+}
+.chunks--common {
+  gap: 0.5625rem;
+}
+.chunks--many {
+  gap: 0.375rem;
+}
+
+.chunk {
+  flex: 1;
+  height: 0.125rem;
+  border-radius: 1px;
+  background-color: rgb(from #6b7280 r g b/40%);
+  transition: background-color 0.2s ease;
+  box-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);
+}
+
+.chunk.active {
+  background-color: rgb(from #fafafa r g b/60%);
+}</style>

package/dist/ui/player/progress/cmp.chunks-progress.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    totalItems: number;
+    activeItemIndex: number;
+    chunkInfo?: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/player/progress/index.d.ts

@@ -0,0 +1 @@
+export { default as ChunksProgress } from './cmp.chunks-progress.svelte';

package/dist/ui/player/progress/index.js

@@ -0,0 +1 @@
+export { default as ChunksProgress } from './cmp.chunks-progress.svelte';

package/dist/ui/player/providers/chunks-player-buffer/player-chunks-manager.svelte.js

@@ -122,8 +122,6 @@ export class PlayerChunksManager {
             ? this.provider.initialData.startItemIndex
             : 0;
         this.setActiveChunkIndex(firstFilledChunkIndex, initialStartItemIndex);
-        // Start background warm-up after initialization
-        this.warmUp();
     };
     setActiveChunkIndex = async (index, chunkItemIndex) => {
         this._activeChunkIndex = index;
@@ -148,6 +146,8 @@ export class PlayerChunksManager {
         }
         else {
             this.activeChunk.setActiveItemIndex(this.activeChunk.chunkItems.indexOf(nextItem));
+            // Don't wait for warm up to be finished, it runs in the background
+            this.warmUp();
         }
     };
     warmUp = async () => {

package/dist/ui/player/slider/cmp.player-slider.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { PlayerSliderBuffer, PlayerSliderCallbacks } from './types';
 import { type Snippet } from 'svelte';
-declare function $$render<T extends {
+declare class __sveltets_Render<T extends {
     id: string;
-}>(): {
-    props: {
+}> {
+    props(): {
         buffer: PlayerSliderBuffer<T>;
         on?: PlayerSliderCallbacks;
         children: Snippet<[{
@@ -11,17 +11,8 @@ declare function $$render<T extends {
             active?: boolean;
         }]>;
     };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<T extends {
-    id: string;
-}> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+    events(): {};
+    slots(): {};
     bindings(): "";
     exports(): {};
 }

package/dist/ui/player/slider-horizontal/cmp.slider.svelte

@@ -284,6 +284,7 @@ const showClassicArrowsAndDots = $derived([SliderMode.ArrowsAndDots, SliderMode.
   width: 100%;
   height: 100%;
   overflow: hidden;
+  /* Set 'container-type: inline-size;' to reference container*/
 }
 .slider__slides {
   display: flex;
@@ -376,14 +377,12 @@ const showClassicArrowsAndDots = $derived([SliderMode.ArrowsAndDots, SliderMode.
   text-align: center;
   color: var(--sc-mc-color--text-white);
   visibility: hidden;
+  /* Set 'container-type: inline-size;' to reference container*/
 }
 .slider__counts-navigation-button:disabled {
   opacity: 0.5;
   cursor: default;
 }
-.slider__counts-navigation-button {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
 @container (width < 576px) {
   .slider__counts-navigation-button {
     visibility: visible;
@@ -412,9 +411,6 @@ const showClassicArrowsAndDots = $derived([SliderMode.ArrowsAndDots, SliderMode.
   position: static;
   margin-top: 1rem;
 }
-.slider {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
 @container (width < 576px) {
   .slider__navigation-button {
     visibility: visible;

package/dist/ui/player/slider-horizontal/cmp.slider.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Locale } from '../../../core/locale';
 import { type SliderDotsConfig, SliderMode } from './types';
 import { type Snippet } from 'svelte';
-declare function $$render<T>(): {
-    props: {
+declare class __sveltets_Render<T> {
+    props(): {
         items: T[];
         initialIndex: number;
         sliderMode?: SliderMode;
@@ -11,18 +11,11 @@ declare function $$render<T>(): {
         locale: Locale;
         on?: {
             indexChanged: (index: number) => void;
-        };
+        } | undefined;
         children: Snippet<[T]>;
     };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<T> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+    events(): {};
+    slots(): {};
     bindings(): "";
     exports(): {};
 }

package/dist/ui/shadow-dom/cmp.shadow-root.svelte

@@ -51,7 +51,7 @@ const styles = $derived.by(() => {
   }
 }
 :host,
-:global([data-theme='default']) {
+:global([data-theme="default"]) {
   /* Backgrounds */
   --sc-mc-color--bg-button: #ffffff;
   --sc-mc-color--bg-card: #ffffff;
@@ -85,7 +85,7 @@ const styles = $derived.by(() => {
   --sc-mc-color--text-inactive: #e5e7eb;
 }
 
-:global([data-theme='dark']) {
+:global([data-theme="dark"]) {
   /* Backgrounds */
   --sc-mc-color--bg-button: #111827;
   --sc-mc-color--bg-card: #000000;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "15.0.0-rc.0",
+  "version": "15.0.0-rc.2",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -135,7 +135,7 @@
   "peerDependencies": {
     "@fluentui/svg-icons": "^1.1.301",
     "@popperjs/core": "^2.11.8",
-    "@streamscloud/streams-analytics-collector": "^3.0.0",
+    "@streamscloud/streams-analytics-collector": "^4.0.0",
     "@urql/core": "^5.1.1",
     "dequal": "^2.0.3",
     "dompurify": "^3.2.6",