@streamscloud/embeddable 10.1.2 → 11.0.0

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

@@ -0,0 +1,78 @@
+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-panel.svelte → discover/discover-panel.svelte}

@@ -1,10 +1,11 @@
-<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 { DiscoverPanelHandler } from './discover-panel-handler.svelte';
-import { MediaCenterLocalization } from './media-center-localization';
-let { handler, localization, on } = $props();
+<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">
@@ -12,7 +13,7 @@ let { handler, localization, on } = $props();
     {#if handler.streamSectionItems.length}
       <div class="media-center-overview__section">
         <div class="media-center-overview__section-header media-center-overview__section-header--blue">
-          {localization.streamsSectionTitle}
+          {localization.latestStreamsSectionTitle}
         </div>
         <div class="media-center-overview__section-content">
           {#each handler.streamSectionItems as item (item.id)}
@@ -36,7 +37,15 @@ let { handler, localization, on } = $props();
               </div>
             {:else if item.kind === 'product'}
               <div class="media-center-overview__card-wrapper" data-theme="dark">
-                <ProductCard product={item.data} trackingParams={item.trackingParams} locale={localization.locale} />
+                <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}

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

@@ -0,0 +1,15 @@
+import type { Locale } from '../../../core/locale';
+import type { PostPlayerModel } from '../../../posts/posts-player/types';
+import type { StreamPlayerModel } from '../../../streams/streams-player';
+import type { MediaCenterContext } from '../media-center-context.svelte';
+type Props = {
+    context: MediaCenterContext;
+    locale: Locale;
+    on: {
+        shortVideoSelected: (shortVideo: PostPlayerModel) => void;
+        streamSelected: (stream: StreamPlayerModel) => void;
+    };
+};
+declare const DiscoverPanel: import("svelte").Component<Props, {}, "">;
+type DiscoverPanel = ReturnType<typeof DiscoverPanel>;
+export default DiscoverPanel;

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

@@ -0,0 +1,2 @@
+export { default as DiscoverPanel } from './discover-panel.svelte';
+export { DiscoverPanelHandler } from './discover-panel-handler.svelte';

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

@@ -0,0 +1,2 @@
+export { default as DiscoverPanel } from './discover-panel.svelte';
+export { DiscoverPanelHandler } from './discover-panel-handler.svelte';

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

@@ -0,0 +1,21 @@
+import type { MediaCenterConfigModel } from '../../config/types';
+import type { MediaCenterCategoryData } from '../types';
+export declare class CategoriesHandler {
+    readonly categories: {
+        id: string;
+        name: string;
+        children: {
+            id: string;
+            name: string;
+            image: string | null;
+            parentId: string;
+        }[];
+        image: string | null;
+    }[];
+    private _allCateogories;
+    private _selectedCategoryId;
+    get selectedCategoryId(): string | null;
+    set selectedCategoryId(value: string | null);
+    getCategoryData: (categoryId: string) => MediaCenterCategoryData | null;
+    init: (categories: MediaCenterConfigModel["contentCategories"]) => Promise<void>;
+}

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

@@ -0,0 +1,36 @@
+export class CategoriesHandler {
+    categories = $derived.by(() => {
+        return this._allCateogories
+            .filter((c) => !c.parentId)
+            .map((c) => {
+            const childCategories = this._allCateogories.filter((cc) => cc.parentId === c.id);
+            const children = childCategories.map((cc) => ({ id: cc.id, name: cc.name, image: cc.image, parentId: cc.parentId }));
+            return { id: c.id, name: c.name, children, image: c.image };
+        });
+    });
+    _allCateogories = $state.raw([]);
+    _selectedCategoryId = $state.raw(null);
+    get selectedCategoryId() {
+        return this._selectedCategoryId;
+    }
+    set selectedCategoryId(value) {
+        this._selectedCategoryId = value;
+    }
+    getCategoryData = (categoryId) => {
+        const category = this._allCateogories.find((c) => c.id === categoryId);
+        if (!category) {
+            return null;
+        }
+        const parentCategory = category.parentId ? this._allCateogories.find((c) => c.id === category.parentId) : null;
+        const selectedCategoryData = {
+            id: category.id,
+            name: category.name,
+            parentId: parentCategory?.id,
+            parentName: parentCategory?.name
+        };
+        return selectedCategoryData;
+    };
+    init = async (categories) => {
+        this._allCateogories = categories;
+    };
+}

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,12 @@
+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/handlers/index.d.ts

@@ -0,0 +1,2 @@
+export { CategoriesHandler } from './categories-handler.svelte';
+export { FeedHandler } from './feed-handler.svelte';

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

@@ -0,0 +1,2 @@
+export { CategoriesHandler } from './categories-handler.svelte';
+export { FeedHandler } from './feed-handler.svelte';

package/dist/media-center/media-center/header-footer/index.d.ts

@@ -0,0 +1,3 @@
+export { default as MediaCenterFooter } from './media-center-footer.svelte';
+export { default as MediaCenterHeaderMobile } from './media-center-header-mobile.svelte';
+export { default as MediaCenterHeader } from './media-center-header.svelte';

package/dist/media-center/media-center/header-footer/index.js

@@ -0,0 +1,3 @@
+export { default as MediaCenterFooter } from './media-center-footer.svelte';
+export { default as MediaCenterHeaderMobile } from './media-center-header-mobile.svelte';
+export { default as MediaCenterHeader } from './media-center-header.svelte';

package/dist/media-center/media-center/header-footer/media-center-footer.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">import { Icon } from '../../../ui/icon';
+import IconCart from '@fluentui/svg-icons/icons/cart_20_regular.svg?raw';
+import IconLineHorizontal3 from '@fluentui/svg-icons/icons/line_horizontal_3_20_regular.svg?raw';
+import IconPhone from '@fluentui/svg-icons/icons/phone_20_regular.svg?raw';
+import IconScreenSearch from '@fluentui/svg-icons/icons/screen_search_20_regular.svg?raw';
+let { context } = $props();
+</script>
+
+<div class="media-center-footer">
+  <div class="media-center-footer__spacer"></div>
+  <button
+    type="button"
+    class="media-center-footer__button"
+    class:media-center-footer__button--active={context.feedHandler.active}
+    onclick={() => context.activateFeed()}>
+    <Icon src={IconPhone} />
+  </button>
+  <div class="media-center-footer__spacer"></div>
+  <button
+    type="button"
+    class="media-center-footer__button"
+    class:media-center-footer__button--active={context.discoverHandler.activated}
+    onclick={context.activateDiscover}>
+    <Icon src={IconScreenSearch} />
+  </button>
+  <div class="media-center-footer__spacer"></div>
+  <button type="button" class="media-center-footer__button" class:media-center-footer__button--active={false} onclick={() => ({})}>
+    <Icon src={IconCart} />
+  </button>
+  <div class="media-center-footer__spacer"></div>
+  <button type="button" class="media-center-footer__button" class:media-center-footer__button--active={context.menuActive} onclick={context.toggleMenu}>
+    <Icon src={IconLineHorizontal3} />
+  </button>
+  <div class="media-center-footer__spacer"></div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.media-center-footer {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  pointer-events: auto;
+  z-index: 1;
+  background: #000000;
+  padding-top: 0.5rem;
+  padding-bottom: 2.625rem;
+}
+.media-center-footer__button {
+  position: relative;
+  pointer-events: auto;
+  padding: 0.75rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  --icon--size: 1.5rem;
+  --icon--color: #f2f2f2;
+  line-height: 0;
+}
+.media-center-footer__button--active {
+  --icon--color: #ffffff;
+  --icon--stroke-width: 0.5;
+}
+.media-center-footer__button--active {
+  color: #ffffff;
+  text-shadow: 0.001em 0 0 currentColor, -0.001em 0 0 currentColor, 0 0.001em 0 currentColor, 0 -0.001em 0 currentColor;
+}</style>

package/dist/media-center/media-center/header-footer/media-center-footer.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { MediaCenterContext } from '../media-center-context.svelte';
+type Props = {
+    context: MediaCenterContext;
+};
+declare const MediaCenterFooter: import("svelte").Component<Props, {}, "">;
+type MediaCenterFooter = ReturnType<typeof MediaCenterFooter>;
+export default MediaCenterFooter;

package/dist/media-center/media-center/header-footer/media-center-header-localization.d.ts

@@ -0,0 +1,12 @@
+import { type Locale } from '../../../core/locale';
+export declare class MediaCenterHeaderLocalization {
+    buttons: {
+        cart: string;
+        discover: string;
+        feed: string;
+        login: string;
+        moments: string;
+        webpage: string;
+    };
+    constructor(locale: Locale);
+}

package/dist/media-center/media-center/header-footer/media-center-header-localization.js

@@ -0,0 +1,40 @@
+import {} from '../../../core/locale';
+export class MediaCenterHeaderLocalization {
+    buttons;
+    constructor(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]
+        };
+    }
+}
+const loc = {
+    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'
+    }
+};

package/dist/media-center/media-center/header-footer/media-center-header-mobile.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">import { Icon } from '../../../ui/icon';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
+import IconLineHorizontal3 from '@fluentui/svg-icons/icons/line_horizontal_3_20_regular.svg?raw';
+let { context, closeFn, on } = $props();
+const headerMounted = (node) => {
+    const heightResizeObserver = new ResizeObserver(() => {
+        const headerHeight = node.clientHeight;
+        on.headerHeightChanged(headerHeight);
+    });
+    heightResizeObserver.observe(node);
+    return {
+        destroy: () => {
+            on.headerHeightChanged(0);
+            heightResizeObserver.disconnect();
+        }
+    };
+};
+const styles = $derived.by(() => {
+    var _a, _b;
+    const values = [];
+    if ((_a = context.playerColors) === null || _a === void 0 ? void 0 : _a.button) {
+        values.push(`--media-center-header-mobile--button-color: ${context.playerColors.button}`);
+    }
+    if ((_b = context.playerColors) === null || _b === void 0 ? void 0 : _b.buttonInactive) {
+        values.push(`--media-center-header-mobile--button-color--inactive: ${context.playerColors.buttonInactive}`);
+    }
+    return values.join(';');
+});
+</script>
+
+<div class="media-center-header-mobile" use:headerMounted style={styles}>
+  {#if closeFn}
+    <button type="button" class="media-center-header-mobile__button" onclick={closeFn}>
+      <Icon src={IconDismiss} />
+    </button>
+  {:else}
+    <span><!--just a stub--></span>
+  {/if}
+  <button
+    type="button"
+    class="media-center-header-mobile__button"
+    class:media-center-header-mobile__button--active={context.menuActive}
+    onclick={context.toggleMenu}>
+    <Icon src={IconLineHorizontal3} />
+  </button>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.media-center-header-mobile {
+  --_media-center-header-mobile--button-color: var(--media-center-header-mobile--button-color, rgb(from #000000 r g b / 95%));
+  --_media-center-header-mobile--button-color--inactive: var(
+    --media-center-header-mobile--button-color--inactive,
+    rgb(from var(--_media-center-header-mobile--button-color, #000000) r g b / 60%)
+  );
+  position: absolute;
+  inset: 0;
+  bottom: auto;
+  padding-block: 0.9375rem;
+  padding-inline: 0.625rem;
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.media-center-header-mobile__button {
+  pointer-events: auto;
+  padding-block: 0.25rem;
+  padding-inline: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.875rem;
+  background-color: var(--_media-center-header-mobile--button-color--inactive);
+  border: var(--_media-center-header-mobile--button-color);
+  --icon--size: 1.5rem;
+  --icon--color: #ffffff;
+  line-height: 0;
+}
+.media-center-header-mobile__button--active {
+  background-color: var(--_media-center-header-mobile--button-color);
+}</style>

package/dist/media-center/media-center/header-footer/media-center-header-mobile.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { MediaCenterContext } from '../media-center-context.svelte';
+type Props = {
+    context: MediaCenterContext;
+    closeFn: (() => void) | null;
+    on: {
+        headerHeightChanged: (height: number) => void;
+    };
+};
+declare const MediaCenterHeaderMobile: import("svelte").Component<Props, {}, "">;
+type MediaCenterHeaderMobile = ReturnType<typeof MediaCenterHeaderMobile>;
+export default MediaCenterHeaderMobile;