@streamscloud/embeddable 10.1.2 → 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": "10.1.2",
+  "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/content-player-localization.d.ts

@@ -1,6 +0,0 @@
-import { type Locale } from '../core/locale';
-export declare class ContentPlayerLocalization {
-    overviewLabel: string;
-    locale: Locale;
-    constructor(locale: Locale);
-}

package/dist/content-player/content-player-localization.js

@@ -1,15 +0,0 @@
-import {} from '../core/locale';
-export class ContentPlayerLocalization {
-    overviewLabel;
-    locale;
-    constructor(locale) {
-        this.overviewLabel = loc.overviewLabel[locale];
-        this.locale = locale;
-    }
-}
-const loc = {
-    overviewLabel: {
-        en: 'Overview',
-        no: 'Oversikt'
-    }
-};

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,137 +0,0 @@
-<script lang="ts">import { PlayerButton } from '../ui/player/button';
-import { ContentPlayerConfig } from './content-player-config.svelte';
-import { ContentPlayerLocalization } from './content-player-localization';
-import IconDismiss from '@fluentui/svg-icons/icons/dismiss_28_regular.svg?raw';
-import IconLineHorizontal3 from '@fluentui/svg-icons/icons/line_horizontal_3_20_regular.svg?raw';
-let { config, localization, overviewPanelContent } = $props();
-const uiManager = config.uiManager;
-const headerMounted = (node) => {
-    var _a;
-    if (overviewPanelContent) {
-        (_a = config.mediaCenterCallbacks) === null || _a === void 0 ? void 0 : _a.onExtraActionsForMobileControlsPanelDetermined([
-            {
-                name: localization.overviewLabel,
-                callback: () => (config.uiManager.overviewCollapsed = !config.uiManager.overviewCollapsed)
-            }
-        ]);
-    }
-    const heightResizeObserver = new ResizeObserver(() => {
-        var _a, _b;
-        const headerHeight = node.clientHeight;
-        uiManager.mediaCenterHeaderHeight = headerHeight;
-        if ((_a = config.mediaCenterCallbacks) === null || _a === void 0 ? void 0 : _a.onHeaderHeightChanged) {
-            (_b = config.mediaCenterCallbacks) === null || _b === void 0 ? void 0 : _b.onHeaderHeightChanged({ height: headerHeight });
-        }
-    });
-    heightResizeObserver.observe(node);
-    return {
-        destroy: () => {
-            heightResizeObserver.disconnect();
-        }
-    };
-};
-const headerVariables = $derived.by(() => {
-    const maxHeaderWidth = Math.min(uiManager.contentViewWidth * 1.4, uiManager.playerTotalWidth);
-    const maxOverhang = 0.2 * uiManager.contentViewWidth;
-    const contentStart = (uiManager.playerTotalWidth - uiManager.contentViewWidth) / 2;
-    // Pre-calculate if overview will affect layout when fully opened
-    const willOverviewAffectLayout = uiManager.overviewWidth > 0 && uiManager.overviewMaxWidth < uiManager.sidePanelsMaxWidth;
-    // Check if header will actually compress (change position)
-    const willHeaderCompress = willOverviewAffectLayout && uiManager.overviewMaxWidth > contentStart - maxOverhang;
-    const values = [
-        `--_content-player-header--padding-inline: ${uiManager.safeAreaSize}px`,
-        `--_content-player-header--media-center--max-width: ${maxHeaderWidth}px`
-    ];
-    if (!willOverviewAffectLayout) {
-        // Header is symmetric
-        const offset = (uiManager.playerTotalWidth - maxHeaderWidth) / 2;
-        values.push(`--_content-player-header--left: ${offset}px`);
-        values.push(`--_content-player-header--right: ${offset}px`);
-    }
-    else {
-        // Overview affects layout
-        const rightOffset = contentStart - maxOverhang;
-        // Animate if header will compress, otherwise use static value
-        const effectiveOverviewWidth = willHeaderCompress ? uiManager.overviewWidth : uiManager.overviewMaxWidth;
-        const leftOffset = Math.max(contentStart - maxOverhang, effectiveOverviewWidth);
-        values.push(`--_content-player-header--left: ${leftOffset}px`);
-        values.push(`--_content-player-header--right: ${rightOffset}px`);
-    }
-    return values.join(';');
-});
-const buttonVariables = $derived.by(() => {
-    // Button always moves when overview affects layout - animate it
-    const willOverviewAffectLayout = uiManager.overviewWidth > 0 && uiManager.overviewMaxWidth < uiManager.sidePanelsMaxWidth;
-    const effectiveOverviewWidth = willOverviewAffectLayout ? uiManager.overviewWidth : 0;
-    const values = [`--_content-player-header--close-button--left-indent: ${effectiveOverviewWidth}px`];
-    return values.join(';');
-});
-</script>
-
-{#if config.mediaCenterControlsPanel}
-  <div class="content-player-header" style={headerVariables} use:headerMounted>
-    {@render config.mediaCenterControlsPanel()}
-  </div>
-{:else if overviewPanelContent}
-  <div class="overview-button">
-    <PlayerButton icon={IconLineHorizontal3} on={{ click: () => (config.uiManager.overviewCollapsed = !config.uiManager.overviewCollapsed) }} />
-  </div>
-{/if}
-
-{#if config.settings.enableCloseButton && config.callbacks?.close}
-  <div class="close-button" style={buttonVariables}>
-    <PlayerButton icon={IconDismiss} on={{ click: config.callbacks.close }} />
-  </div>
-{/if}
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.content-player-header {
-  position: absolute;
-  inset: 0;
-  left: var(--_content-player-header--left);
-  right: var(--_content-player-header--right);
-  bottom: auto;
-  padding: 0.75rem var(--_content-player-header--padding-inline);
-  pointer-events: none;
-  z-index: 1;
-  display: flex;
-  justify-content: var(--_content-player-header--justify-content, center);
-}
-
-.close-button {
-  position: absolute;
-  top: 0.9375rem;
-  left: calc(var(--_content-player-header--close-button--left-indent) + 0.625rem);
-  z-index: 1;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .close-button {
-    left: unset;
-    right: 0.625rem;
-  }
-}
-
-.overview-button {
-  display: none;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .overview-button {
-    display: block;
-    position: absolute;
-    top: 0.9375rem;
-    left: 0.625rem;
-    z-index: 1;
-  }
-}</style>

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

@@ -1,32 +0,0 @@
-import { ContentPlayerConfig } from './content-player-config.svelte';
-import { ContentPlayerLocalization } from './content-player-localization';
-import type { Snippet } from 'svelte';
-declare class __sveltets_Render<T extends {
-    id: string;
-}> {
-    props(): {
-        config: ContentPlayerConfig<T>;
-        localization: ContentPlayerLocalization;
-        overviewPanelContent?: Snippet;
-    };
-    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/desktop-categories-selector.svelte

@@ -1,132 +0,0 @@
-<script lang="ts">import { Dropdown } from '../../ui/dropdown';
-import { Icon } from '../../ui/icon';
-import { default as ButtonWrapper } from './category-following-wrapper.svelte';
-import IconTextColumnThree from '@fluentui/svg-icons/icons/text_column_three_20_regular.svg?raw';
-let { handler, followingHandler, on } = $props();
-</script>
-
-<Dropdown>
-  {#snippet trigger()}
-    <button type="button" class="desktop-categories-trigger">
-      <Icon src={IconTextColumnThree} />
-    </button>
-  {/snippet}
-  <div class="desktop-categories-selector">
-    {#each handler.categories as category (category.id)}
-      <div>
-        <ButtonWrapper categoryId={category.id} followingHandler={followingHandler}>
-          <button
-            type="button"
-            class="desktop-categories-selector__category"
-            class:desktop-categories-selector__category--active={handler.selectedCategoryId === category.id}
-            title={category.name}
-            onclick={() => on.categorySelected(category.id)}>{category.name}</button>
-        </ButtonWrapper>
-
-        {#if category.children.length > 0}
-          <div class="desktop-categories-selector__sub-categories">
-            {#each category.children as subcategory (subcategory.id)}
-              <ButtonWrapper categoryId={subcategory.id} followingHandler={followingHandler}>
-                <button
-                  type="button"
-                  class="desktop-categories-selector__sub-category"
-                  class:desktop-categories-selector__sub-category--active={handler.selectedCategoryId === subcategory.id}
-                  title={subcategory.name}
-                  onclick={() => on.categorySelected(subcategory.id)}>{subcategory.name}</button>
-              </ButtonWrapper>
-            {/each}
-          </div>
-        {/if}
-      </div>
-    {/each}
-  </div>
-</Dropdown>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.desktop-categories-trigger {
-  pointer-events: auto;
-  padding: 0.40625rem 0.75rem;
-  line-height: 0;
-  white-space: nowrap;
-  flex: 0 0 auto;
-  border-radius: 0.875rem;
-  background-color: rgba(0, 0, 0, 0.6);
-  color: #f2f2f2;
-  transition: background 0.3s ease-in-out;
-  -webkit-user-drag: none;
-  user-select: none;
-}
-.desktop-categories-trigger :global([contenteditable]) {
-  user-select: text;
-}
-.desktop-categories-trigger:hover:not(.desktop-categories-trigger--active) {
-  background-color: rgba(0, 0, 0, 0.9);
-}
-
-.desktop-categories-selector {
-  background-color: rgba(0, 0, 0, 0.9);
-  border-radius: 0.75rem;
-  padding: 1rem 1.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  width: 33.75rem;
-  max-width: calc(100vw - 2rem);
-}
-.desktop-categories-selector__category {
-  color: #ffffff;
-  font-size: 0.875rem;
-  font-weight: 500;
-  text-align: left;
-  padding: 0.375rem 0;
-  max-width: 7.5rem;
-  text-overflow: ellipsis;
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  width: max-content;
-  -webkit-user-drag: none;
-  user-select: none;
-}
-.desktop-categories-selector__category :global([contenteditable]) {
-  user-select: text;
-}
-.desktop-categories-selector__category:hover, .desktop-categories-selector__category--active {
-  color: #5a8dec;
-}
-.desktop-categories-selector__sub-categories {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1.5rem;
-}
-.desktop-categories-selector__sub-category {
-  color: #d1d5db;
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-align: left;
-  padding: 0.375rem 0;
-  max-width: 7.5rem;
-  text-overflow: ellipsis;
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  width: max-content;
-  -webkit-user-drag: none;
-  user-select: none;
-}
-.desktop-categories-selector__sub-category :global([contenteditable]) {
-  user-select: text;
-}
-.desktop-categories-selector__sub-category:hover, .desktop-categories-selector__sub-category--active {
-  color: #5a8dec;
-}</style>

package/dist/media-center/media-center/desktop-categories-selector.svelte.d.ts

@@ -1,12 +0,0 @@
-import type { IContentCategoryFollowingHandler } from '..';
-import type { MediaCenterHandler } from './media-center-handler.svelte';
-type Props = {
-    handler: MediaCenterHandler;
-    followingHandler?: IContentCategoryFollowingHandler;
-    on: {
-        categorySelected: (categoryId: string) => void;
-    };
-};
-declare const DesktopCategoriesSelector: import("svelte").Component<Props, {}, "">;
-type DesktopCategoriesSelector = ReturnType<typeof DesktopCategoriesSelector>;
-export default DesktopCategoriesSelector;

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

@@ -1,32 +0,0 @@
-import type { TrackingParams } from '../../marketing-tracking';
-import type { IMediaCenterConfig } from '..';
-import type { PostPlayerModel } from '../../posts/posts-player';
-import type { ProductCardModel } from '../../products/product-card';
-import type { StreamPlayerModel } from '../../streams/streams-player';
-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;
-    toggle: () => Promise<void>;
-    private _uniqueById;
-}
-type ShortVideoSectionItemType = {
-    kind: 'video';
-    data: PostPlayerModel;
-} | {
-    kind: 'product';
-    data: ProductCardModel;
-    trackingParams: TrackingParams;
-};
-export {};