@streamscloud/embeddable 11.0.0 → 12.1.0

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';

package/dist/media-center/media-center/providers/post-player-provider-generator.d.ts

@@ -1,8 +0,0 @@
-import type { IMediaCenterConfig } from '../../config/types';
-import type { PostPlayerModel } from '../../../posts/posts-player/types';
-import type { IFeedPlayerDataProvider } from '../../../ui/player/providers';
-export declare const makePostPlayerItemsProvider: (data: {
-    config: IMediaCenterConfig;
-    categoryId?: string;
-    prefetchedItems?: PostPlayerModel[];
-}) => IFeedPlayerDataProvider<PostPlayerModel>;

package/dist/media-center/media-center/providers/post-player-provider-generator.js

@@ -1,32 +0,0 @@
-import { ContinuationToken } from '../../../core/continuation-token';
-import { CursorDataLoader } from '../../../core/data-loaders';
-import { PostType } from '../../../core/enums';
-export const makePostPlayerItemsProvider = (data) => {
-    const { config, categoryId, prefetchedItems = [] } = data;
-    const loader = new CursorDataLoader({
-        loadPage: async (continuationToken) => {
-            const result = await config.postsPlayer.getPostsCursor({
-                filter: {
-                    types: [PostType.Article, PostType.Media, PostType.ShortVideo, PostType.Video],
-                    categoryId,
-                    excludeIds: prefetchedItems.length ? prefetchedItems.map((i) => i.id) : undefined
-                },
-                continuationToken: continuationToken.toNextChunkString(),
-                limit: 20
-            });
-            const items = result.items;
-            return {
-                items: items,
-                continuationToken: ContinuationToken.fromPayload(result.continuationToken)
-            };
-        }
-    });
-    return {
-        kind: 'feed',
-        initialData: {
-            prefetchedItems,
-            startIndex: prefetchedItems.length ? 0 : -1
-        },
-        loadMore: loader.loadMore
-    };
-};

package/dist/media-center/media-center/providers/streams-player-provider-generator.d.ts

@@ -1,8 +0,0 @@
-import type { IMediaCenterConfig } from '../../config/types';
-import type { IStreamsPlayerDataProvider, StreamPlayerModel } from '../../../streams/streams-player/types';
-export declare const makeStreamsPlayerDataProvider: (data: {
-    config: IMediaCenterConfig;
-    initialStreamId?: string;
-    categoryId?: string;
-    prefetchedStreams?: StreamPlayerModel[];
-}) => IStreamsPlayerDataProvider;

package/dist/media-center/media-center/providers/streams-player-provider-generator.js

@@ -1,36 +0,0 @@
-import { ContinuationToken } from '../../../core/continuation-token';
-import { CursorDataLoader } from '../../../core/data-loaders';
-export const makeStreamsPlayerDataProvider = (data) => {
-    const { config, categoryId, prefetchedStreams: initialPrefetchedStreams = [], initialStreamId } = data;
-    const loader = new CursorDataLoader({
-        loadPage: async (continuationToken) => {
-            const result = await config.streamPlayer.getStreamsCursor({
-                filter: {
-                    categoryId,
-                    excludeIds: initialPrefetchedStreams.length ? initialPrefetchedStreams.map((i) => i.id) : undefined
-                },
-                continuationToken: continuationToken.toNextChunkString(),
-                limit: 20
-            });
-            const items = result.items;
-            return {
-                items: items,
-                continuationToken: ContinuationToken.fromPayload(result.continuationToken)
-            };
-        }
-    });
-    let prefetchedStreams = initialPrefetchedStreams;
-    if (initialStreamId) {
-        const targetStream = prefetchedStreams.find((stream) => stream.id === initialStreamId);
-        if (targetStream) {
-            prefetchedStreams = [targetStream, ...prefetchedStreams.filter((stream) => stream.id !== initialStreamId)];
-        }
-    }
-    return {
-        initialData: {
-            prefetchedStreams
-        },
-        loadMoreStreams: loader.loadMore,
-        getStreamPages: config.streamPlayer.getStreamPages
-    };
-};

package/dist/media-center/model/types.d.ts

@@ -1,17 +0,0 @@
-import type { Snippet } from 'svelte';
-export type MediaCenterData = {
-    header?: Snippet;
-    mobileFooter?: Snippet;
-    overlayIsActive: boolean;
-    callbacks: {
-        onPlayerInitialized: (data: MediaCenterPlayerInitializedData) => void;
-    };
-};
-export type MediaCenterPlayerInitializedData = {
-    extraActionsForMobilePanel: ExtraActionDefinition[];
-    closePlayerFn: (() => void) | null;
-};
-export type ExtraActionDefinition = {
-    name: string;
-    callback: () => void;
-};