@streamscloud/embeddable 15.0.1 → 15.0.2

package/dist/ui/player/player/cmp.player.svelte

@@ -1,10 +1,9 @@
-<script lang="ts">import { handleEsc } from '../../../core/document.event-handlers';
+<script lang="ts" generics="T extends { id: string }">import { handleEsc } from '../../../core/document.event-handlers';
 import { Loading } from '../../loading';
 import { PlayerSlider } from '../slider';
 import { SwipeIndicator } from '../../swipe-indicator';
 import { default as ControlsAndAttachments } from './controls-and-attachments.svelte';
 import { default as OverviewPanel } from './overview-panel.svelte';
-import {} from 'svelte';
 let { config, itemActions, itemView, attachmentsView, overviewPanelContent } = $props();
 let everTouched = $state(false);
 let overviewPosition = $state({
@@ -12,7 +11,7 @@ let overviewPosition = $state({
     bottom: 0,
     right: 0
 });
-const uiManager = config.uiManager;
+const uiManager = $derived(config.uiManager);
 const handlePlayerMounted = (node) => {
     const markAsTouched = () => {
         everTouched = true;

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

@@ -1,6 +1,6 @@
 import type { PlayerButtonDef } from '../button';
 import type { PlayerConfig } from './player-config.svelte';
-import { type Snippet } from 'svelte';
+import type { Snippet } from 'svelte';
 declare class __sveltets_Render<T extends {
     id: string;
 }> {

package/dist/ui/player/player/controls-and-attachments.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { slideHorizontally } from '../../../core/transitions';
+<script lang="ts" generics="T extends { id: string }">import { slideHorizontally } from '../../../core/transitions';
 import { PlayerButton, ResponsivePlayerButtonsGroup } from '../button';
 import { PlayerConfig } from './player-config.svelte.js';
 import IconCalendarWeekNumbers from '@fluentui/svg-icons/icons/calendar_week_numbers_24_regular.svg?raw';
@@ -6,7 +6,7 @@ import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_28_regular.s
 import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_28_regular.svg?raw';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_28_regular.svg?raw';
 let { config, hasOverview, itemActions, attachmentsView } = $props();
-const uiManager = config.uiManager;
+const uiManager = $derived(config.uiManager);
 let closeButtonAreaHeight = $state(0);
 const allActions = $derived.by(() => {
     const actions = [...itemActions];

package/dist/ui/player/player/overview-panel.svelte

@@ -59,7 +59,6 @@ const styles = $derived.by(() => {
   z-index: 0;
   border-radius: 0.5rem 0 0 0.5rem;
   background: var(--_overview-panel--background);
-  /* Set 'container-type: inline-size;' to reference container*/
 }
 .overview-panel__content {
   width: 100%;
@@ -71,6 +70,9 @@ const styles = $derived.by(() => {
   overflow: hidden;
   container-type: inline-size;
 }
+.overview-panel {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 576px) {
   .overview-panel {
     width: 100%;

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

@@ -1,13 +1,13 @@
-<script lang="ts">import { TouchSynchronizer } from '../utils';
+<script lang="ts" generics="T extends { id: string }">import { TouchSynchronizer } from '../utils';
 import { createWheelAdapter } from './wheel-gestures-adapter';
 import { onDestroy, onMount, untrack } from 'svelte';
 let { buffer, on, children } = $props();
 let slidesRef;
 let sliderHeight = $state(0);
 let swipeTransition = $state(0);
-let cssAnimationDuration = $state(buffer.animationDuration * 0.55);
+let cssAnimationDuration = $derived(buffer.animationDuration * 0.55);
 let resizeObserver;
-let sliderIndex = $state.raw(buffer.currentIndex);
+let sliderIndex = $state.raw(untrack(() => buffer.currentIndex));
 const actualTransition = $derived(-sliderHeight * sliderIndex);
 const onKeyPress = (e) => {
     if (e.key === 'ArrowUp' || e.key === 'PageUp') {
@@ -30,13 +30,12 @@ $effect(() => {
     sliderIndex = buffer.currentIndex;
 });
 const notifyOnItemChanged = () => {
-    var _a, _b, _c;
-    if (active && ((_a = buffer.current) === null || _a === void 0 ? void 0 : _a.id) !== active.id) {
-        (_b = on === null || on === void 0 ? void 0 : on.itemDeactivated) === null || _b === void 0 ? void 0 : _b.call(on, active.id);
+    if (active && buffer.current?.id !== active.id) {
+        on?.itemDeactivated?.(active.id);
     }
     active = buffer.current;
     if (active) {
-        (_c = on === null || on === void 0 ? void 0 : on.itemActivated) === null || _c === void 0 ? void 0 : _c.call(on, active.id);
+        on?.itemActivated?.(active.id);
     }
 };
 onMount(() => {

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

@@ -1,4 +1,4 @@
-<script lang="ts">import { runningInBrowser } from '../../../core/browser';
+<script lang="ts" generics="T">import { runningInBrowser } from '../../../core/browser';
 import { Utils } from '../../../core/utils';
 import { HtmlHelper } from '../../../core/utils/html-helper';
 import { Icon } from '../../icon';
@@ -7,7 +7,7 @@ import { SliderLocalization } from './slider-localization';
 import { SliderMode } from './types';
 import IconChevronLeft from '@fluentui/svg-icons/icons/chevron_left_20_regular.svg?raw';
 import IconChevronRight from '@fluentui/svg-icons/icons/chevron_right_20_regular.svg?raw';
-import { onDestroy, onMount } from 'svelte';
+import { onDestroy, onMount, untrack } from 'svelte';
 let { items, sliderMode = SliderMode.ArrowsWithCounts, dotsConfig = {
     activeHtml: '<i class="fa-solid fa-circle" tabindex="0"></i>',
     inactiveHtml: '<i class="fa-regular fa-circle" tabindex="0"></i>'
@@ -16,7 +16,7 @@ const localization = $derived.by(() => new SliderLocalization(locale));
 const itemIndices = $derived(items.map((_, index) => index));
 const animationDuration = 300;
 let previousItems = $state.raw(undefined);
-let selectedIndex = $state(initialIndex);
+let selectedIndex = $state(untrack(() => initialIndex));
 let animationIndex = $state(null);
 let interval;
 let slidesRef;
@@ -26,7 +26,7 @@ let resizeObserver;
 onMount(() => {
     notifyIndexChanged();
     setTimeout(() => {
-        slidesRef === null || slidesRef === void 0 ? void 0 : slidesRef.classList.toggle('animate', false);
+        slidesRef?.classList.toggle('animate', false);
     });
     let touchStartX = 0;
     let touchStartY = 0;
@@ -114,12 +114,12 @@ onMount(() => {
             animationIndex = null;
         }
         setTimeout(() => {
-            slidesRef === null || slidesRef === void 0 ? void 0 : slidesRef.classList.toggle('animate', true);
+            slidesRef?.classList.toggle('animate', true);
         });
     });
     if (autoSlideMs) {
         interval = window.setInterval(() => {
-            if ((items === null || items === void 0 ? void 0 : items.length) <= 1) {
+            if (items?.length <= 1) {
                 return;
             }
             loadNext();
@@ -134,7 +134,7 @@ onMount(() => {
         slidesRef.classList.toggle('animate', false);
         sliderWidth = slidesRef.getBoundingClientRect().width;
         resizeTimeout = window.setTimeout(() => {
-            slidesRef === null || slidesRef === void 0 ? void 0 : slidesRef.classList.toggle('animate', true);
+            slidesRef?.classList.toggle('animate', true);
         });
     });
     resizeObserver.observe(slidesRef);
@@ -162,8 +162,7 @@ const onKeyPress = Utils.throttle((e) => {
     }
 }, animationDuration);
 const notifyIndexChanged = () => {
-    var _a;
-    (_a = on === null || on === void 0 ? void 0 : on.indexChanged) === null || _a === void 0 ? void 0 : _a.call(on, selectedIndex);
+    on?.indexChanged?.(selectedIndex);
 };
 notifyIndexChanged();
 const setIndex = (index) => {
@@ -284,7 +283,6 @@ const showClassicArrowsAndDots = $derived([SliderMode.ArrowsAndDots, SliderMode.
   width: 100%;
   height: 100%;
   overflow: hidden;
-  /* Set 'container-type: inline-size;' to reference container*/
 }
 .slider__slides {
   display: flex;
@@ -377,12 +375,14 @@ 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;
@@ -411,6 +411,9 @@ 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/seek-bar/cmp.seek-bar.svelte

@@ -12,7 +12,7 @@ const handleSeek = (e) => {
     const { left, width } = progressRef.getBoundingClientRect();
     const x = e.clientX - left;
     const percent = Math.max(0, Math.min(1, x / width));
-    on === null || on === void 0 ? void 0 : on.seek(percent);
+    on?.seek(percent);
 };
 const handleParentClick = (e) => {
     e.preventDefault();
@@ -24,7 +24,7 @@ const handleParentClick = (e) => {
     if (e.clientX >= seekBarRect.left && e.clientX <= seekBarRect.right) {
         const x = e.clientX - seekBarRect.left;
         const percent = Math.max(0, Math.min(1, x / seekBarRect.width));
-        on === null || on === void 0 ? void 0 : on.seek(percent);
+        on?.seek(percent);
     }
 };
 const onMouseMove = (e) => {
@@ -33,21 +33,19 @@ const onMouseMove = (e) => {
     }
 };
 const onMouseUp = () => {
-    var _a;
     isDragging = false;
     window.removeEventListener('mousemove', onMouseMove);
     window.removeEventListener('mouseup', onMouseUp);
-    scrubberRef === null || scrubberRef === void 0 ? void 0 : scrubberRef.blur();
-    (_a = on === null || on === void 0 ? void 0 : on.dragEnd) === null || _a === void 0 ? void 0 : _a.call(on);
+    scrubberRef?.blur();
+    on?.dragEnd?.();
 };
 const onMouseDown = (e) => {
-    var _a;
     isDragging = true;
-    (_a = on === null || on === void 0 ? void 0 : on.dragStart) === null || _a === void 0 ? void 0 : _a.call(on);
+    on?.dragStart?.();
     handleSeek(e);
     window.addEventListener('mousemove', onMouseMove);
     window.addEventListener('mouseup', onMouseUp);
-    scrubberRef === null || scrubberRef === void 0 ? void 0 : scrubberRef.blur();
+    scrubberRef?.blur();
 };
 const handleScrubberKeyDown = (event) => {
     const step = 0.05;
@@ -66,7 +64,7 @@ const handleScrubberKeyDown = (event) => {
     }
     if (newValue !== undefined) {
         event.preventDefault();
-        on === null || on === void 0 ? void 0 : on.seek(newValue);
+        on?.seek(newValue);
     }
 };
 $effect(() => {

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

@@ -38,7 +38,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;
@@ -72,7 +72,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/dist/ui/video/cmp.video.svelte

@@ -1,13 +1,4 @@
-<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { randomNanoid } from '../../core/utils/string-generator';
+<script lang="ts">import { randomNanoid } from '../../core/utils/string-generator';
 import { Icon, IconColor } from '../icon';
 import { MediaVolumeManager, PlaybackManager } from '../media-playback';
 import { SeekBar } from '../seek-bar';
@@ -20,7 +11,6 @@ import { onDestroy, onMount, untrack } from 'svelte';
 import { fade } from 'svelte/transition';
 let { src, poster, id = randomNanoid(), controls = true, autoplay = false, loop = false, inert = false, hideSpeaker = false, intersectionContainer, scrubberPosition = ScrubberPosition.Bottom, on } = $props();
 onMount(() => {
-    var _a;
     PlaybackManager.registerMountedPlayer(id, {
         onPlay: () => {
             play();
@@ -47,7 +37,7 @@ onMount(() => {
             setMuted(false);
         }
     });
-    (_a = on === null || on === void 0 ? void 0 : on.loaded) === null || _a === void 0 ? void 0 : _a.call(on, { id, src });
+    on?.loaded?.({ id, src });
     if (videoContainerRef) {
         intersectionObserver.observe(videoContainerRef);
     }
@@ -57,7 +47,7 @@ onDestroy(() => {
         PlaybackManager.unregisterPlayer(id);
         intersectionObserver.disconnect();
     }
-    catch (_a) {
+    catch {
         // ignore
     }
 });
@@ -70,7 +60,7 @@ let everActivated = $state(false);
 $effect(() => {
     void src;
     untrack(() => {
-        if (video === null || video === void 0 ? void 0 : video.src) {
+        if (video?.src) {
             video.src = src;
         }
     });
@@ -121,18 +111,18 @@ const intersectionObserver = new IntersectionObserver((entries) => {
         }
     }
 }, {
-    root: intersectionContainer,
+    root: untrack(() => intersectionContainer),
     rootMargin: '0px',
     threshold: [0.1, 0.4, 0.6]
 });
-const play = () => __awaiter(void 0, void 0, void 0, function* () {
+const play = async () => {
     if (!video) {
         return;
     }
     try {
-        yield video.play();
+        await video.play();
     }
-    catch (_a) {
+    catch {
         // can't play video without interaction with document, just ignoring the error
     }
     finally {
@@ -146,9 +136,9 @@ const play = () => __awaiter(void 0, void 0, void 0, function* () {
         }
         everActivated = true;
     }
-});
+};
 const pause = () => {
-    video === null || video === void 0 ? void 0 : video.pause();
+    video?.pause();
 };
 const stop = () => {
     if (!video) {
@@ -160,7 +150,7 @@ const stop = () => {
     onPause();
 };
 const togglePlay = (e) => {
-    e === null || e === void 0 ? void 0 : e.stopPropagation();
+    e?.stopPropagation();
     if (!video) {
         return;
     }
@@ -172,8 +162,8 @@ const togglePlay = (e) => {
     }
 };
 const toggleMute = (e) => {
-    e === null || e === void 0 ? void 0 : e.stopPropagation();
-    setMuted(!(video === null || video === void 0 ? void 0 : video.muted));
+    e?.stopPropagation();
+    setMuted(!video?.muted);
 };
 const onVolumeChange = (e) => {
     const video = e.target;
@@ -185,15 +175,14 @@ const onTimeUpdate = (e) => {
     percentageCompleted = video.currentTime / video.duration || 0;
     notifyProgress();
 };
-const onLoaded = () => __awaiter(void 0, void 0, void 0, function* () {
+const onLoaded = async () => {
     setVolume(MediaVolumeManager.volumeLevel);
     setMuted(MediaVolumeManager.isMuted);
-});
+};
 const onEnded = () => {
-    var _a;
     percentageCompleted = 1;
     notifyProgress();
-    (_a = on === null || on === void 0 ? void 0 : on.ended) === null || _a === void 0 ? void 0 : _a.call(on, { id, src });
+    on?.ended?.({ id, src });
     if (!loop) {
         everActivated = false;
     }
@@ -223,8 +212,7 @@ const setShowControlsOnHover = (state) => {
     showControlsOnHover = state;
 };
 const notifyProgress = () => {
-    var _a;
-    (_a = on === null || on === void 0 ? void 0 : on.progress) === null || _a === void 0 ? void 0 : _a.call(on, percentageCompleted);
+    on?.progress?.(percentageCompleted);
 };
 const handleSeek = (percent) => {
     if (video) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "15.0.1",
+  "version": "15.0.2",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -133,59 +133,61 @@
     }
   },
   "peerDependencies": {
-    "@fluentui/svg-icons": "^1.1.301",
+    "@fluentui/svg-icons": "^1.1.318",
     "@popperjs/core": "^2.11.8",
     "@streamscloud/streams-analytics-collector": "^4.0.1",
     "@urql/core": "^5.1.1 || ^6.0.0",
     "dequal": "^2.0.3",
-    "dompurify": "^3.2.6",
+    "dompurify": "^3.3.0",
     "mobile-detect": "^1.4.5",
-    "svelte": "^5.33.4",
+    "svelte": "^5.50.0",
     "wheel-gestures": "^2.2.48"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.2.9",
-    "@eslint/js": "^9.27.0",
-    "@fluentui/svg-icons": "^1.1.301",
-    "@graphql-codegen/add": "^5.0.3",
-    "@graphql-codegen/cli": "^5.0.6",
-    "@graphql-codegen/import-types-preset": "^3.0.0",
-    "@graphql-codegen/introspection": "^4.0.3",
-    "@graphql-codegen/near-operation-file-preset": "^3.0.0",
-    "@graphql-codegen/typed-document-node": "^5.1.1",
-    "@graphql-codegen/typescript": "^4.1.6",
-    "@graphql-codegen/typescript-operations": "^4.6.1",
+    "@eslint/compat": "^2.0.2",
+    "@eslint/js": "^9.39.2",
+    "@fluentui/svg-icons": "^1.1.318",
+    "@graphql-codegen/add": "^6.0.0",
+    "@graphql-codegen/cli": "^6.1.1",
+    "@graphql-codegen/introspection": "^5.0.0",
+    "@graphql-codegen/near-operation-file-preset": "^4.0.0",
+    "@graphql-codegen/typed-document-node": "^6.1.5",
+    "@graphql-codegen/typescript": "^5.0.7",
+    "@graphql-codegen/typescript-operations": "^5.0.7",
     "@graphql-typed-document-node/core": "^3.2.0",
     "@popperjs/core": "^2.11.8",
-    "@sveltejs/package": "^2.3.11",
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@tsconfig/svelte": "^5.0.4",
-    "@urql/core": "^5.1.1",
-    "autoprefixer": "^10.4.21",
+    "@streamscloud/streams-analytics-collector": "^4.0.1",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@tsconfig/svelte": "^5.0.7",
+    "@types/dompurify": "^3.0.5",
+    "@urql/core": "^6.0.1",
+    "autoprefixer": "^10.4.24",
     "dequal": "^2.0.3",
-    "eslint": "^9.27.0",
-    "eslint-config-prettier": "^10.1.5",
-    "eslint-formatter-codeframe": "^7.32.1",
-    "eslint-formatter-visualstudio": "^8.40.0",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jsonc": "^2.20.1",
+    "dompurify": "^3.3.1",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-formatter-codeframe": "^7.32.2",
+    "eslint-formatter-visualstudio": "^9.0.1",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsonc": "^2.21.0",
     "eslint-plugin-only-warn": "^1.1.0",
     "eslint-plugin-promise": "^7.2.1",
-    "eslint-plugin-svelte": "^3.9.0",
-    "eslint-plugin-unused-imports": "^4.1.4",
-    "globals": "^16.1.0",
+    "eslint-plugin-svelte": "^3.14.0",
+    "eslint-plugin-unused-imports": "^4.3.0",
+    "globals": "^17.3.0",
     "mobile-detect": "^1.4.5",
-    "prettier": "^3.5.3",
-    "prettier-plugin-svelte": "^3.4.0",
-    "publint": "^0.3.12",
-    "sass": "^1.89.0",
-    "svelte": "^5.33.4",
-    "svelte-check": "^4.2.1",
+    "prettier": "^3.8.1",
+    "prettier-plugin-svelte": "^3.4.1",
+    "publint": "^0.3.17",
+    "sass": "^1.97.3",
+    "svelte": "^5.50.0",
+    "svelte-check": "^4.3.6",
     "svelte-preprocess": "^6.0.3",
-    "typescript": "^5.8.3",
-    "typescript-eslint": "^8.32.1",
-    "vite": "^6.4.1",
-    "vite-tsconfig-paths": "^5.1.4",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.54.0",
+    "vite": "^7.3.1",
+    "vite-tsconfig-paths": "^6.1.0",
     "wheel-gestures": "^2.2.48"
   }
 }