@streamscloud/embeddable 11.0.0 → 12.0.0

package/dist/ui/player/providers/default-feed-player-buffer.svelte.js

@@ -1,3 +1,4 @@
+import { Deferred } from '../../../core/deferred';
 import { Utils } from '../../../core/utils';
 const BUFFER_SIZE = 5;
 export class DefaultFeedPlayerBuffer {
@@ -12,13 +13,13 @@ export class DefaultFeedPlayerBuffer {
     _currentIndex = $state(-1);
     _loaded = $state.raw([]);
     _loadMoreFn;
-    _isLoading = $state(false);
-    constructor(provider, on) {
+    _fetchDeferred = $state.raw(null);
+    constructor(provider) {
         this._loadMoreFn = provider.loadMore;
         // Throttle navigation methods
         this.loadNext = Utils.throttle(this.loadNext, this.animationDuration);
         this.loadPrevious = Utils.throttle(this.loadPrevious, this.animationDuration);
-        this.initializeBuffer({ initialData: provider.initialData, onPreloaded: on?.preloaded });
+        this.initializeBuffer({ initialData: provider.initialData });
     }
     loadNext = async () => {
         if (!this.canLoadNext) {
@@ -36,11 +37,14 @@ export class DefaultFeedPlayerBuffer {
     reset = () => {
         this._loaded = [];
         this._currentIndex = -1;
-        this._isLoading = false;
+        this._fetchDeferred = null;
         this.warmUpBuffer();
     };
+    ensureWarmedUp = async () => {
+        await this.warmUpBuffer();
+    };
     initializeBuffer = async (options) => {
-        const { initialData, onPreloaded } = options;
+        const { initialData } = options;
         const handleInitialized = () => {
             const startIndex = initialData.startIndex >= 0 ? initialData.startIndex : 0;
             this._currentIndex = Math.min(startIndex, this._loaded.length - 1);
@@ -49,7 +53,6 @@ export class DefaultFeedPlayerBuffer {
             if (activeItem && hasCustomMediaIndex) {
                 activeItem.mediaIndex = initialData.startMediaIndex;
             }
-            onPreloaded?.(this);
         };
         this._loaded = initialData.prefetchedItems;
         const considerInitialized = this._loaded.length > 0;
@@ -63,16 +66,20 @@ export class DefaultFeedPlayerBuffer {
     };
     warmUpBuffer = async () => {
         // Early return if buffer is sufficient or already loading
-        if (this._loaded.length >= this.currentIndex + BUFFER_SIZE || this._isLoading) {
+        if (this._fetchDeferred) {
+            return this._fetchDeferred.promise;
+        }
+        if (this._loaded.length >= this.currentIndex + BUFFER_SIZE) {
             return;
         }
-        this._isLoading = true;
+        this._fetchDeferred = new Deferred();
         try {
             const result = await this._loadMoreFn();
             this._loaded = [...this._loaded, ...result];
         }
         finally {
-            this._isLoading = false;
+            this._fetchDeferred.resolve();
+            this._fetchDeferred = null;
         }
     };
 }

package/dist/ui/player/providers/service.d.ts

@@ -0,0 +1,2 @@
+import type { IPlayerBuffer, IPlayerDataProvider, WithId } from './types';
+export declare const initBufferFromProvider: <T extends WithId>(provider: IPlayerDataProvider<T>) => IPlayerBuffer<T>;

package/dist/ui/player/providers/service.js

@@ -0,0 +1,13 @@
+import { Utils } from '../../../core/utils';
+import { DefaultChunksPlayerBuffer } from './default-chunks-player-buffer.svelte';
+import { DefaultFeedPlayerBuffer } from './default-feed-player-buffer.svelte';
+export const initBufferFromProvider = (provider) => {
+    switch (provider.kind) {
+        case 'feed':
+            return new DefaultFeedPlayerBuffer(provider);
+        case 'chunks':
+            return new DefaultChunksPlayerBuffer(provider);
+        default:
+            Utils.assertUnreachable(provider);
+    }
+};

package/dist/ui/player/providers/types.d.ts

@@ -33,6 +33,7 @@ export interface IPlayerBufferBase<T extends WithId> {
     loadNext: () => void;
     loadPrevious: () => void;
     reset: () => void;
+    ensureWarmedUp: () => Promise<void>;
 }
 type TExtended<T> = T & {
     mediaIndex?: number;

package/dist/ui/with-background/cmp.with-background.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">let { backgroundDisabled, backgroundImageUrl, backgroundColor, children } = $props();
+const styles = $derived.by(() => {
+    const values = [];
+    if (backgroundImageUrl) {
+        values.push(`--with-background--background-image-url: url(${backgroundImageUrl})`);
+    }
+    if (backgroundColor) {
+        values.push(`--with-background--background: ${backgroundColor}`);
+    }
+    return values.join(';');
+});
+export {};
+</script>
+
+<svelte:head>
+  <meta name="theme-color" content="#242424" />
+  <meta name="color-scheme" content="dark" />
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+
+  <style>
+    html,
+    body {
+      background-color: #242424;
+      color-scheme: dark;
+    }
+  </style>
+</svelte:head>
+
+<div
+  class="with-background"
+  class:with-background--background-enabled={!backgroundDisabled}
+  class:with-background--background-active={!backgroundDisabled && backgroundImageUrl && backgroundImageUrl !== 'not-applicable'}
+  class:with-background--background-loading={!backgroundDisabled && backgroundImageUrl !== 'not-applicable'}
+  style={styles}>
+  {@render children()}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.with-background {
+  --_with-background--background: var(--with-background--background);
+  --_with-background--background-image-url: var(--with-background--background-image-url);
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.with-background:before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  backdrop-filter: blur(30px);
+  background-color: var(--_with-background--background);
+  display: none;
+}
+.with-background--background-enabled {
+  background-color: #7d7d7d;
+}
+.with-background--background-enabled:before {
+  display: block;
+}
+.with-background--background-active {
+  background-image: var(--_with-background--background-image-url);
+  background-size: cover;
+  background-blend-mode: multiply;
+}
+.with-background--background-loading {
+  background-color: transparent;
+}</style>

package/dist/ui/with-background/cmp.with-background.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    backgroundDisabled: boolean;
+    backgroundImageUrl: string | null | 'not-applicable';
+    backgroundColor?: string | null;
+    children: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/with-background/index.d.ts

@@ -0,0 +1 @@
+export { default as WithBackground } from './cmp.with-background.svelte';

package/dist/ui/with-background/index.js

@@ -0,0 +1 @@
+export { default as WithBackground } from './cmp.with-background.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "11.0.0",
+  "version": "12.0.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -37,6 +37,10 @@
       "types": "./dist/media-center/index.d.ts",
       "svelte": "./dist/media-center/index.js"
     },
+    "./media-page": {
+      "types": "./dist/media-page/index.d.ts",
+      "svelte": "./dist/media-page/index.js"
+    },
     "./posts": {
       "types": "./dist/posts/index.d.ts",
       "svelte": "./dist/posts/index.js"

package/dist/content-player/fade-mixins.scss

@@ -1,12 +0,0 @@
-@mixin default-opacity {
-  --content-player--elements-opacity: 1;
-}
-
-@mixin fade-opacity {
-  --content-player--elements-opacity: 0;
-}
-
-@mixin handle-fade {
-  opacity: var(--content-player--elements-opacity);
-  transition: opacity 0.3s ease-in-out;
-}

package/dist/content-player/header.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">import { ContentPlayerConfig } from './content-player-config.svelte';
-import { onMount } from 'svelte';
-let { config } = $props();
-onMount(() => {
-    var _a, _b;
-    (_a = config.mediaCenterCallbacks) === null || _a === void 0 ? void 0 : _a.onPlayerInitialized({
-        closePlayerFn: config.settings.enableCloseButton && ((_b = config.callbacks) === null || _b === void 0 ? void 0 : _b.close) ? config.callbacks.close : null,
-        extraActionsForMobilePanel: []
-    });
-});
-</script>
-
-{#if config.mediaCenterHeader}
-  {@render config.mediaCenterHeader()}
-{/if}

package/dist/content-player/header.svelte.d.ts

@@ -1,28 +0,0 @@
-import { ContentPlayerConfig } from './content-player-config.svelte';
-declare class __sveltets_Render<T extends {
-    id: string;
-}> {
-    props(): {
-        config: ContentPlayerConfig<T>;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T extends {
-        id: string;
-    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends {
-        id: string;
-    }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Header: $$IsomorphicComponent;
-type Header<T extends {
-    id: string;
-}> = InstanceType<typeof Header<T>>;
-export default Header;

package/dist/media-center/media-center/discover/discover-panel-handler.svelte.d.ts

@@ -1,31 +0,0 @@
-import type { TrackingParams } from '../../../marketing-tracking';
-import type { IMediaCenterConfig } from '../../config/types';
-import type { PostPlayerModel } from '../../../posts/posts-player/types';
-import type { ProductCardModel } from '../../../products/product-card';
-import type { StreamPlayerModel } from '../../../streams/streams-player/types';
-export declare class DiscoverPanelHandler {
-    private readonly config;
-    private _activated;
-    private _state;
-    private _streams;
-    private _shortVideos;
-    private _products;
-    constructor(config: IMediaCenterConfig | null);
-    get streamSectionItems(): StreamPlayerModel[];
-    get shortVideoSectionItems(): ShortVideoSectionItemType[];
-    get activated(): boolean;
-    get active(): boolean;
-    get loading(): boolean;
-    activate: () => Promise<void>;
-    deactivate: () => void;
-    private _uniqueById;
-}
-type ShortVideoSectionItemType = {
-    kind: 'video';
-    data: PostPlayerModel;
-} | {
-    kind: 'product';
-    data: ProductCardModel;
-    trackingParams: TrackingParams;
-};
-export {};

package/dist/media-center/media-center/discover/discover-panel-handler.svelte.js

@@ -1,94 +0,0 @@
-import { PostType } from '../../../core/enums';
-export class DiscoverPanelHandler {
-    config;
-    _activated = $state(false);
-    _state = $state('not-initialized');
-    _streams = $state.raw([]);
-    _shortVideos = $state.raw([]);
-    _products = $state.raw([]);
-    constructor(config) {
-        this.config = config;
-    }
-    get streamSectionItems() {
-        return this._streams;
-    }
-    get shortVideoSectionItems() {
-        const pattern = ['video', 'product', 'video', 'product', 'video'];
-        const vids = [...this._shortVideos];
-        const prods = [...this._products];
-        const itemsLimit = 5;
-        const result = [];
-        // fill according to pattern, leaving empty positions if not enough items
-        for (let i = 0; i < itemsLimit; i++) {
-            const want = pattern[i];
-            if (want === 'video' && vids.length > 0) {
-                result.push({ kind: 'video', data: vids.shift() });
-            }
-            else if (want === 'product' && prods.length > 0) {
-                const productModel = prods.shift();
-                const shortVideoId = this._shortVideos.find((v) => v.products.some((p) => p.id === productModel.id))?.id;
-                result.push({ kind: 'product', data: productModel, trackingParams: { shortVideoId } });
-            }
-            else {
-                // temporary "empty" position - will fill later
-                result.push(null);
-            }
-        }
-        // fill empty positions with remaining items
-        for (let i = 0; i < result.length; i++) {
-            if (!result[i]) {
-                if (vids.length > 0) {
-                    result[i] = { kind: 'video', data: vids.shift() };
-                }
-                else if (prods.length > 0) {
-                    const productModel = prods.shift();
-                    const shortVideoId = this._shortVideos.find((v) => v.products.some((p) => p.id === productModel.id))?.id;
-                    result[i] = { kind: 'product', data: productModel, trackingParams: { shortVideoId } };
-                }
-            }
-        }
-        return result.filter(Boolean);
-    }
-    get activated() {
-        return this._activated;
-    }
-    get active() {
-        return this._activated && this._state === 'ready';
-    }
-    get loading() {
-        return this._activated && this._state === 'loading';
-    }
-    activate = async () => {
-        if (!this.config) {
-            return;
-        }
-        this._activated = true;
-        if (this._state === 'not-initialized') {
-            this._state = 'loading';
-            try {
-                const shortVideosResponse = await this.config.postsPlayer.getPostsCursor({ filter: { types: [PostType.ShortVideo] }, limit: 5 });
-                const streamsResponse = await this.config.streamPlayer.getStreamsCursor({ filter: {}, limit: 5 });
-                this._shortVideos = shortVideosResponse.items;
-                this._products = this._uniqueById(shortVideosResponse.items.flatMap((i) => i.products)).slice(0, 2);
-                this._streams = streamsResponse.items;
-            }
-            finally {
-                this._state = 'ready';
-            }
-        }
-    };
-    deactivate = () => {
-        this._activated = false;
-    };
-    _uniqueById = (arr) => {
-        const seen = new Set();
-        const res = [];
-        for (const item of arr) {
-            if (!seen.has(item.id)) {
-                seen.add(item.id);
-                res.push(item);
-            }
-        }
-        return res;
-    };
-}

package/dist/media-center/media-center/discover/discover-panel-localization.d.ts

@@ -1,19 +0,0 @@
-import { type Locale } from '../../../core/locale';
-export declare class DiscoverPanelLocalization {
-    buttons: {
-        cart: string;
-        discover: string;
-        feed: string;
-        login: string;
-        moments: string;
-        webpage: string;
-    };
-    shortVideosSectionTitle: string;
-    interestsSectionTitle: string;
-    latestStreamsSectionTitle: string;
-    popularStreamsSectionTitle: string;
-    overviewLabel: string;
-    membersLabel: (count: number) => string;
-    locale: Locale;
-    constructor(locale: Locale);
-}

package/dist/media-center/media-center/discover/discover-panel-localization.js

@@ -1,78 +0,0 @@
-import {} from '../../../core/locale';
-export class DiscoverPanelLocalization {
-    buttons;
-    shortVideosSectionTitle;
-    interestsSectionTitle;
-    latestStreamsSectionTitle;
-    popularStreamsSectionTitle;
-    overviewLabel;
-    membersLabel;
-    locale;
-    constructor(locale) {
-        this.shortVideosSectionTitle = loc.shortVideosSectionTitle[locale];
-        this.interestsSectionTitle = loc.interestsSectionTitle[locale];
-        this.latestStreamsSectionTitle = loc.streamsSectionTitle[locale];
-        this.popularStreamsSectionTitle = loc.popularStreamsSectionTitle[locale];
-        this.overviewLabel = loc.overviewLabel[locale];
-        this.buttons = {
-            cart: loc.cartButton[locale],
-            discover: loc.discoverButton[locale],
-            feed: loc.feedButton[locale],
-            login: loc.loginButton[locale],
-            moments: loc.momentsButton[locale],
-            webpage: loc.webpageButton[locale]
-        };
-        this.membersLabel = loc.membersLabel[locale];
-        this.locale = locale;
-    }
-}
-const loc = {
-    shortVideosSectionTitle: {
-        en: 'Popular Short Videos',
-        no: 'Populære korte videoer'
-    },
-    popularStreamsSectionTitle: {
-        en: 'Popular Streams',
-        no: 'Populære Streams'
-    },
-    streamsSectionTitle: {
-        en: 'Latest Streams',
-        no: 'Siste Streams'
-    },
-    interestsSectionTitle: {
-        en: 'Interest Channels',
-        no: 'Interessekanaler'
-    },
-    overviewLabel: {
-        en: 'Overview',
-        no: 'Oversikt'
-    },
-    discoverButton: {
-        en: 'Discover',
-        no: 'Oppdag'
-    },
-    feedButton: {
-        en: 'Feed',
-        no: 'Feed'
-    },
-    cartButton: {
-        en: 'Cart',
-        no: 'Handlekurv'
-    },
-    loginButton: {
-        en: 'Login',
-        no: 'Logg inn'
-    },
-    momentsButton: {
-        en: 'Moments',
-        no: 'Øyeblikk'
-    },
-    webpageButton: {
-        en: 'Webpage',
-        no: 'Nettside'
-    },
-    membersLabel: {
-        en: (count) => (count === 1 ? `Member` : `Members`),
-        no: (count) => (count === 1 ? `Medlem` : `Medlemmer`)
-    }
-};

package/dist/media-center/media-center/discover/discover-panel.svelte

@@ -1,142 +0,0 @@
-<script lang="ts">import { getPostCoverImage } from '../../../posts/model';
-import { ProductCard } from '../../../products/product-card';
-import { ShortVideoCard } from '../../../short-videos/short-video-card';
-import { StreamCard } from '../../../streams/stream-card';
-import { DiscoverPanelLocalization } from './discover-panel-localization';
-let { context, locale, on } = $props();
-const handler = $derived(context.discoverHandler);
-const localization = $derived(new DiscoverPanelLocalization(locale));
-</script>
-
-<div class="media-center-overview">
-  <div class="media-center-overview__content">
-    {#if handler.streamSectionItems.length}
-      <div class="media-center-overview__section">
-        <div class="media-center-overview__section-header media-center-overview__section-header--blue">
-          {localization.latestStreamsSectionTitle}
-        </div>
-        <div class="media-center-overview__section-content">
-          {#each handler.streamSectionItems as item (item.id)}
-            <StreamCard stream={item} on={{ click: () => on.streamSelected(item) }}></StreamCard>
-          {/each}
-        </div>
-      </div>
-    {/if}
-    {#if handler.shortVideoSectionItems.length}
-      <div class="media-center-overview__section">
-        <div class="media-center-overview__section-header media-center-overview__section-header--red">
-          {localization.shortVideosSectionTitle}
-        </div>
-        <div class="media-center-overview__section-content">
-          {#each handler.shortVideoSectionItems as item (item.data)}
-            {#if item.kind === 'video'}
-              <div class="media-center-overview__card-wrapper">
-                <ShortVideoCard
-                  shortVideo={{ id: item.data.id, text: item.data.text, cover: getPostCoverImage(item.data) }}
-                  on={{ click: () => on.shortVideoSelected(item.data) }} />
-              </div>
-            {:else if item.kind === 'product'}
-              <div class="media-center-overview__card-wrapper" data-theme="dark">
-                <ProductCard
-                  product={item.data}
-                  colors={{
-                    background: context.playerColors?.cardBackground ?? null,
-                    price: context.playerColors?.price ?? null,
-                    salePrice: context.playerColors?.salePrice ?? null
-                  }}
-                  trackingParams={item.trackingParams}
-                  locale={localization.locale} />
-              </div>
-            {/if}
-          {/each}
-        </div>
-      </div>
-    {/if}
-  </div>
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.media-center-overview {
-  background: transparent;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  padding: 1.25rem 1.875rem;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .media-center-overview {
-    padding: 0.625rem 0.9375rem;
-  }
-}
-.media-center-overview__content {
-  width: 100%;
-  max-width: 73.75rem;
-  display: flex;
-  flex-direction: column;
-  gap: 2.25rem;
-}
-.media-center-overview__section {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-.media-center-overview__section-header {
-  display: flex;
-  align-items: center;
-  gap: 0.6875rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  font-weight: 500;
-  color: #ffffff;
-  text-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);
-}
-.media-center-overview__section-header::before {
-  content: "";
-  display: inline-block;
-  width: 0.3125rem;
-  height: 1.625rem;
-  border-radius: 0.125rem;
-  background: #5a8dec;
-}
-.media-center-overview__section-header--red::before {
-  background: #f17e8b;
-}
-.media-center-overview__section-content {
-  --product-card--aspect-ratio: 9/16;
-  --product-card--border-radius: 0.375rem;
-  display: grid;
-  gap: 2rem 1.25rem;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-  /* Set 'container-type: inline-size;' to reference container*/
-  /* Set 'container-type: inline-size;' to reference container*/
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 992px) {
-  .media-center-overview__section-content {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-}
-@container (width < 768px) {
-  .media-center-overview__section-content {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-@container (width < 576px) {
-  .media-center-overview__section-content {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-.media-center-overview__card-wrapper {
-  aspect-ratio: 9/16;
-}</style>

package/dist/media-center/media-center/handlers/feed-handler.svelte.d.ts

@@ -1,6 +0,0 @@
-export declare class FeedHandler {
-    private _active;
-    get active(): boolean;
-    activate: () => Promise<void>;
-    deactivate: () => void;
-}

package/dist/media-center/media-center/handlers/feed-handler.svelte.js

@@ -1,12 +0,0 @@
-export class FeedHandler {
-    _active = $state(false);
-    get active() {
-        return this._active;
-    }
-    activate = async () => {
-        this._active = true;
-    };
-    deactivate = () => {
-        this._active = false;
-    };
-}

package/dist/media-center/media-center/providers/index.d.ts

@@ -1,2 +0,0 @@
-export { makePostPlayerItemsProvider } from './post-player-provider-generator';
-export { makeStreamsPlayerDataProvider } from './streams-player-provider-generator';

package/dist/media-center/media-center/providers/index.js

@@ -1,2 +0,0 @@
-export { makePostPlayerItemsProvider } from './post-player-provider-generator';
-export { makeStreamsPlayerDataProvider } from './streams-player-provider-generator';