@streamscloud/embeddable 6.2.1 → 6.3.0

package/dist/core/image-preloader.d.ts

@@ -0,0 +1 @@
+export declare const preloadImage: (src: string, throwOnError?: boolean) => Promise<void>;

package/dist/core/image-preloader.js

@@ -0,0 +1,10 @@
+export const preloadImage = (src, throwOnError = false) => {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.decoding = 'async';
+        img.loading = 'eager';
+        img.onload = () => resolve();
+        img.onerror = (e) => (throwOnError ? reject(e) : resolve());
+        img.src = src;
+    });
+};

package/dist/short-videos/short-video-card/cmp.short-video-card.svelte

@@ -79,6 +79,7 @@ let { shortVideo, aspectRatio = 9 / 16, on } = $props();
   gap: 0.3125em;
   --icon--size: 1.25em;
   --icon--color: #ffffff;
+  --icon--filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
 }
 .short-video-card__text {
   font-weight: 500;

package/dist/short-videos/short-videos-player/short-videos-player-view.svelte

@@ -8,8 +8,8 @@
     });
 };
 import { handleEsc } from '../../core/document.event-handlers';
+import { preloadImage } from '../../core/image-preloader';
 import { ShortVideoViewer } from '../short-video-viewer';
-import { InternalShortVideoPlayerProvider } from './internal-short-video-player-provider';
 import { Loading } from '../../ui/loading';
 import { PlayerBuffer, PlayerSlider } from '../../ui/player';
 import { SpotlightLayout } from '../../ui/spotlight-layout';
@@ -17,34 +17,44 @@ import { SwipeIndicator } from '../../ui/swipe-indicator';
 import { default as Controls } from './controls.svelte';
 import { ShortVideosPlayerLocalization } from './short-videos-player-localization';
 import { ShortVideosPlayerUiManager } from './ui-manager.svelte';
-import { onMount, untrack } from 'svelte';
+import { untrack } from 'svelte';
 let { dataProvider, socialInteractionsHandler, localization: localizationInit = 'en', showStreamsCloudWatermark, disableBackground, on, categoriesSwitcher, playerLogo = null, fadeContent = false } = $props();
 const localization = $derived(new ShortVideosPlayerLocalization(localizationInit));
 let everTouched = $state(false);
 let background = $state(null);
-let buffer = $derived.by(() => {
+let bufferIsLoading = $state(false);
+let buffer = $state.raw(null);
+$effect(() => {
     void dataProvider;
-    return untrack(() => (dataProvider instanceof InternalShortVideoPlayerProvider ? null : new PlayerBuffer(dataProvider)));
+    untrack(() => {
+        let bufferInstance = null;
+        bufferIsLoading = true;
+        bufferInstance = new PlayerBuffer(dataProvider, {
+            preloaded: () => __awaiter(void 0, void 0, void 0, function* () {
+                if (bufferInstance === null || bufferInstance === void 0 ? void 0 : bufferInstance.loaded.length) {
+                    const coverUrl = resolveVideoCover(bufferInstance.loaded[0]);
+                    yield preloadImage(coverUrl);
+                    background = coverUrl;
+                }
+                buffer = bufferInstance;
+                bufferIsLoading = false;
+            })
+        });
+    });
 });
 const uiManager = new ShortVideosPlayerUiManager();
-onMount(() => {
-    if (dataProvider instanceof InternalShortVideoPlayerProvider) {
-        initBuffer(dataProvider);
-    }
-});
-const initBuffer = (provider) => __awaiter(void 0, void 0, void 0, function* () {
-    yield provider.prefetch();
-    buffer = new PlayerBuffer(provider);
-});
 const onItemActivated = (id) => {
     var _a;
     const shortVideo = buffer === null || buffer === void 0 ? void 0 : buffer.loaded.find((x) => x.id === id);
     if (!shortVideo) {
         return;
     }
-    background = shortVideo.media.isImage ? shortVideo.media.url : shortVideo.media.thumbnailUrl;
+    background = resolveVideoCover(shortVideo);
     (_a = on === null || on === void 0 ? void 0 : on.videoActivated) === null || _a === void 0 ? void 0 : _a.call(on, id);
 };
+const resolveVideoCover = (shortVideo) => {
+    return shortVideo.media.isImage ? shortVideo.media.url : shortVideo.media.thumbnailUrl;
+};
 const contentMounted = (node) => {
     const markAsTouched = () => {
         everTouched = true;
@@ -78,6 +88,7 @@ const onPlayerClose = () => {
 <div
   class="short-videos-player-container"
   class:short-videos-player-container--background-enabled={!disableBackground}
+  class:short-videos-player-container--background-loading={!disableBackground && !background}
   class:short-videos-player-container--faded={fadeContent}
   style={background && !disableBackground ? `--background-image: url(${background})` : null}>
   {#if categoriesSwitcher}
@@ -95,7 +106,7 @@ const onPlayerClose = () => {
         </a>
       </div>
     {/if}
-    {#if buffer}
+    {#if buffer && !bufferIsLoading}
       <SpotlightLayout ratio={9 / 16} on={{ dimensionsChanged: handleDimensionsChanged }}>
         <div class="short-videos-player__content" use:contentMounted>
           <PlayerSlider
@@ -160,6 +171,9 @@ const onPlayerClose = () => {
   background-size: cover;
   background-blend-mode: multiply;
 }
+.short-videos-player-container--background-loading {
+  background-color: transparent;
+}
 .short-videos-player-container--faded {
   --short-videos-player--elements-opacity: 0;
 }

package/dist/ui/icon/cmp.icon.svelte

@@ -31,6 +31,7 @@ let { src, color = null } = $props();
   --_icon--color: var(--icon--color);
   --_icon--size: var(--icon--size, 1.25em);
   --_icon--stroke-width: var(--icon--stroke-width, 0);
+  --_icon--filter: var(--icon--filter, none);
   display: contents;
 }
 .icon--white {
@@ -79,6 +80,7 @@ let { src, color = null } = $props();
   display: inline-block;
   color: inherit;
   fill: var(--_icon--color, currentColor);
+  filter: var(--_icon--filter);
   height: var(--_icon--size);
   min-height: var(--_icon--size);
   max-height: var(--_icon--size);

package/dist/ui/player/player-buffer.svelte.d.ts

@@ -13,10 +13,12 @@ export declare class PlayerBuffer<T extends {
     private _loaded;
     private loadMoreFn;
     private isLoading;
-    constructor(provider: IPlayerItemsProvider<T>);
+    constructor(provider: IPlayerItemsProvider<T>, on?: {
+        preloaded?: () => void;
+    });
     loadNext: () => Promise<void>;
     loadPrevious: () => Promise<void>;
-    reset: () => void;
+    reset: (onPreloaded?: () => void) => void;
     private warmUpBuffer;
 }
 export interface IPlayerItemsProvider<T> {

package/dist/ui/player/player-buffer.svelte.js

@@ -11,7 +11,7 @@ export class PlayerBuffer {
     _loaded = $state.raw([]);
     loadMoreFn;
     isLoading = false;
-    constructor(provider) {
+    constructor(provider, on) {
         this.loadMoreFn = provider.loadMore;
         this._loaded = provider.initialData.prefetchedItems;
         this._currentIndex = this._loaded.length
@@ -19,7 +19,7 @@ export class PlayerBuffer {
                 ? this._loaded.length - 1
                 : provider.initialData.startIndex
             : -1;
-        this.warmUpBuffer();
+        this.warmUpBuffer(on?.preloaded);
         this.loadNext = Utils.throttle(this.loadNext, this.animationDuration);
         this.loadPrevious = Utils.throttle(this.loadPrevious, this.animationDuration);
     }
@@ -36,15 +36,18 @@ export class PlayerBuffer {
         }
         --this._currentIndex;
     };
-    reset = () => {
+    reset = (onPreloaded) => {
         this._loaded = [];
         this._currentIndex = -1;
         this.isLoading = false;
-        this.warmUpBuffer();
+        this.warmUpBuffer(onPreloaded);
     };
-    warmUpBuffer = async () => {
+    warmUpBuffer = async (onPreloaded) => {
         const bufferSize = 5;
         if (this._loaded.length >= this.currentIndex + bufferSize || this.isLoading) {
+            if (onPreloaded) {
+                onPreloaded();
+            }
             return;
         }
         this.isLoading = true;
@@ -58,6 +61,9 @@ export class PlayerBuffer {
             }
         }
         finally {
+            if (onPreloaded) {
+                onPreloaded();
+            }
             this.isLoading = false;
         }
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "6.2.1",
+  "version": "6.3.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",