@streamscloud/embeddable 10.1.2 → 12.0.0

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,73 @@
+<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.playRootFeed()}>
+    <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({ categoryId: null })}>
+    <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.6;
+}</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,13 @@
+import { type Locale } from '../../../core/locale';
+export declare class MediaCenterHeaderLocalization {
+    buttons: {
+        cart: string;
+        discover: string;
+        feed: string;
+        login: string;
+        moments: string;
+        webpage: string;
+    };
+    discoverLabel: string;
+    constructor(locale: Locale);
+}

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

@@ -0,0 +1,46 @@
+import {} from '../../../core/locale';
+export class MediaCenterHeaderLocalization {
+    buttons;
+    discoverLabel;
+    constructor(locale) {
+        this.discoverLabel = loc.discoverLabel[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 = {
+    discoverLabel: {
+        en: 'Discover',
+        no: 'Oppdag'
+    },
+    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,80 @@
+<script lang="ts">import { Icon } from '../../../ui/icon';
+import { MediaCenterHeaderLocalization } from './media-center-header-localization';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
+import IconLayoutColumnOneThirdLeft from '@fluentui/svg-icons/icons/layout_column_one_third_left_20_regular.svg?raw';
+let { context, locale = 'en', on } = $props();
+const localization = $derived(new MediaCenterHeaderLocalization(locale));
+const headerMounted = (node) => {
+    const heightResizeObserver = new ResizeObserver(() => {
+        const headerHeight = node.clientHeight;
+        on.headerHeightChanged(headerHeight);
+    });
+    heightResizeObserver.observe(node);
+    return {
+        destroy: () => {
+            on.headerHeightChanged(0);
+            heightResizeObserver.disconnect();
+        }
+    };
+};
+</script>
+
+<div class="media-center-header-mobile" class:media-center-header-mobile--static={context.mediaCenterMode === 'discover'} use:headerMounted>
+  {#if context.closeOrchestrator.closeTriggerVisible}
+    <button type="button" class="media-center-header-mobile__button" onclick={context.closeOrchestrator.requestClose}>
+      <Icon src={IconDismiss} />
+    </button>
+  {:else}
+    <span><!--just a stub--></span>
+  {/if}
+  {#if context.mediaCenterMode === 'discover'}
+    <div class="media-center-header-mobile__title">
+      {localization.discoverLabel}
+    </div>
+  {/if}
+  <button type="button" class="media-center-header-mobile__button" onclick={context.toggleMenu}>
+    <Icon src={IconLayoutColumnOneThirdLeft} />
+  </button>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.media-center-header-mobile {
+  position: absolute;
+  inset: 0;
+  bottom: auto;
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.media-center-header-mobile--static {
+  position: static;
+}
+.media-center-header-mobile__title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.4;
+  color: #ffffff;
+}
+.media-center-header-mobile__button {
+  pointer-events: auto;
+  padding-block: 0.5625rem;
+  padding-inline: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  --icon--size: 1.5rem;
+  --icon--color: #ffffff;
+  --icon--filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
+  line-height: 0;
+}</style>

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

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

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

@@ -0,0 +1,313 @@
+<script lang="ts">import { horizontalWheelScroll } from '../../../core/actions';
+import { Icon } from '../../../ui/icon';
+import { PlayerButton } from '../../../ui/player/button';
+import { MediaCenterHeaderLocalization } from './media-center-header-localization';
+import IconCart from '@fluentui/svg-icons/icons/cart_20_regular.svg?raw';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_28_regular.svg?raw';
+import IconPerson from '@fluentui/svg-icons/icons/person_20_regular.svg?raw';
+import IconPhone from '@fluentui/svg-icons/icons/phone_20_regular.svg?raw';
+import IconReOrderDotsHorizontal from '@fluentui/svg-icons/icons/re_order_dots_horizontal_20_regular.svg?raw';
+import IconScreenSearch from '@fluentui/svg-icons/icons/screen_search_20_regular.svg?raw';
+import IconSearch from '@fluentui/svg-icons/icons/search_20_regular.svg?raw';
+const SCROLL_MASK_OFFSET = 32;
+let { context, locale = 'en', on } = $props();
+const localization = $derived(new MediaCenterHeaderLocalization(locale));
+let scrollAreaRef = $state(null);
+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 onScrollMounted = (node) => {
+    scrollAreaRef = node;
+    scrollAreaRef.style.setProperty('--scroll-area--mask-offset', `${SCROLL_MASK_OFFSET}px`);
+    const scrollResizeObserver = new ResizeObserver(() => {
+        updateScrollShadows(node);
+    });
+    scrollResizeObserver === null || scrollResizeObserver === void 0 ? void 0 : scrollResizeObserver.observe(node);
+    return {
+        destroy: () => {
+            scrollResizeObserver === null || scrollResizeObserver === void 0 ? void 0 : scrollResizeObserver.disconnect();
+        }
+    };
+};
+const handleScrollingAreaScroll = (e) => {
+    const target = e.target;
+    updateScrollShadows(target);
+};
+const updateScrollShadows = (scrollArea) => {
+    const { scrollLeft, scrollWidth, clientWidth } = scrollArea;
+    const scrollHasLeft = scrollLeft > 0;
+    const scrollHasRight = scrollLeft < scrollWidth - clientWidth - 1;
+    scrollArea.classList.toggle('has-left-mask', scrollHasLeft && !scrollHasRight);
+    scrollArea.classList.toggle('has-right-mask', scrollHasRight && !scrollHasLeft);
+    scrollArea.classList.toggle('has-both-masks', scrollHasRight && scrollHasLeft);
+};
+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--button-color: ${context.playerColors.button}`);
+    }
+    if ((_b = context.playerColors) === null || _b === void 0 ? void 0 : _b.buttonInactive) {
+        values.push(`--media-center-header--button-color--inactive: ${context.playerColors.buttonInactive}`);
+    }
+    return values.join(';');
+});
+</script>
+
+<div class="media-center-header-container" use:headerMounted>
+  <div class="media-center-header" style={styles}>
+    {#if context.targetData?.logo}
+      <div class="media-center-header__logo-wrap">
+        <img src={context.targetData.logo} class="media-center-header__logo" alt={context.targetData?.name} />
+      </div>
+    {/if}
+    <button type="button" class="control-button control-button--trigger" class:control-button--active={context.menuActive} onclick={context.toggleMenu}>
+      <span class="control-button__icon control-button__icon--active control-button__icon--trigger">
+        <Icon src={IconReOrderDotsHorizontal} />
+      </span>
+    </button>
+    <div class="media-center-header__scroll-area" use:onScrollMounted use:horizontalWheelScroll onscroll={handleScrollingAreaScroll}>
+      <div class="media-center-header__scroll-area-block">
+        <button type="button" class="control-button" class:control-button--active={context.feedHandler.active} onclick={() => context.playRootFeed()}>
+          <span class="control-button__icon" class:control-button__icon--active={context.feedHandler.active}>
+            <Icon src={IconPhone} />
+          </span>
+          <span class="control-button__value">
+            {localization.buttons.feed}
+          </span>
+        </button>
+        <button
+          type="button"
+          class="control-button"
+          class:control-button--active={context.discoverHandler.activated}
+          onclick={() => context.activateDiscover({ categoryId: null })}>
+          <span class="control-button__icon" class:control-button__icon--active={context.discoverHandler.activated}>
+            <Icon src={IconScreenSearch} />
+          </span>
+          <span class="control-button__value">
+            {localization.buttons.discover}
+          </span>
+        </button>
+        <button type="button" class="control-button" class:control-button--active={false} onclick={() => ({})}>
+          <span class="control-button__icon" class:control-button__icon--active={false}>
+            <Icon src={IconCart} />
+          </span>
+          <span class="control-button__value">
+            {localization.buttons.cart}
+          </span>
+        </button>
+        <button type="button" class="control-button" class:control-button--active={false} onclick={() => ({})}>
+          <span class="control-button__value">
+            {localization.buttons.moments}
+          </span>
+        </button>
+        <button type="button" class="control-button" class:control-button--active={false} onclick={() => ({})}>
+          <span class="control-button__value">
+            {localization.buttons.webpage}
+          </span>
+        </button>
+      </div>
+
+      <div class="media-center-header__scroll-area-spacer"></div>
+
+      <div class="media-center-header__scroll-area-block">
+        <button type="button" class="control-button" class:control-button--active={false} onclick={() => ({})}>
+          <span class="control-button__icon" class:control-button__icon--active={false}>
+            <Icon src={IconPerson} />
+          </span>
+          <span class="control-button__value">
+            {localization.buttons.login}
+          </span>
+        </button>
+
+        <button type="button" class="control-button control-button--trigger" class:control-button--active={false} onclick={() => ({})}>
+          <span class="control-button__icon control-button__icon--active control-button__icon--trigger">
+            <Icon src={IconSearch} />
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+  {#if context.closeOrchestrator.closeTriggerVisible}
+    <div class="close-button">
+      <PlayerButton
+        icon={IconDismiss}
+        zoom={0.8}
+        activeColor={context.playerColors?.button ?? null}
+        inactiveColor={context.playerColors?.buttonInactive ?? null}
+        on={{ click: context.closeOrchestrator.requestClose }} />
+    </div>
+  {/if}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.media-center-header-container {
+  padding-top: 2.1875rem;
+  padding-inline: 4.375rem;
+  pointer-events: none;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+
+.media-center-header {
+  --_media-center-header--button-color: var(--media-center-header--button-color, rgb(from #000000 r g b / 95%));
+  --_media-center-header--button-color--inactive: var(
+    --media-center-header--button-color--inactive,
+    rgb(from var(--_media-center-header--button-color, #000000) r g b / 60%)
+  );
+  width: 73.75rem;
+  max-width: 100%;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  pointer-events: auto;
+  z-index: 1;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .media-center-header {
+    display: none;
+  }
+}
+.media-center-header__logo-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.9375rem;
+  max-width: 11.25rem;
+  min-width: 0;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.media-center-header__logo {
+  width: auto;
+  height: auto;
+  max-height: 100%;
+  max-width: 100%;
+  object-fit: contain;
+}
+.media-center-header__scroll-area {
+  pointer-events: auto;
+  position: relative;
+  flex: 1 1 auto;
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  mask-image: none;
+  scrollbar-width: none;
+  padding-block: 0.5rem;
+  --_scroll-area--mask-offset--left: var(--scroll-area--mask-offset);
+  --_scroll-area--mask-offset--right: calc(100% - var(--scroll-area--mask-offset));
+}
+:global(.media-center-header__scroll-area.has-left-mask) {
+  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgb(0, 0, 0) var(--_scroll-area--mask-offset--left), rgb(0, 0, 0) 100%);
+}
+:global(.media-center-header__scroll-area.has-right-mask) {
+  mask-image: linear-gradient(to right, rgb(0, 0, 0) 0, rgb(0, 0, 0) var(--_scroll-area--mask-offset--right), rgba(0, 0, 0, 0) 100%);
+}
+:global(.media-center-header__scroll-area.has-both-masks) {
+  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgb(0, 0, 0) var(--_scroll-area--mask-offset--left), rgb(0, 0, 0) var(--_scroll-area--mask-offset--right), rgba(0, 0, 0, 0) 100%);
+}
+.media-center-header__scroll-area-block {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+}
+.media-center-header__scroll-area-spacer {
+  flex: 1 1 auto;
+  min-width: 1.5rem;
+}
+
+.control-button {
+  --_control-button--padding-block: 0.5rem;
+  --_control-button--padding-inline: 1.5rem;
+  position: relative;
+  pointer-events: auto;
+  padding-block: var(--_control-button--padding-block);
+  padding-inline: var(--_control-button--padding-inline);
+  display: flex;
+  gap: 0.375rem;
+  justify-content: center;
+  align-items: center;
+  max-width: 9.375rem;
+  flex: 0 0 auto;
+  min-width: auto;
+  width: auto;
+  white-space: nowrap;
+  border-radius: 0.875rem;
+  background-color: var(--_media-center-header--button-color--inactive);
+  border-color: var(--_media-center-header--button-color);
+  color: #f2f2f2;
+  transition: background 0.3s ease-in-out;
+  -webkit-user-drag: none;
+  user-select: none;
+}
+.control-button :global([contenteditable]) {
+  user-select: text;
+}
+.control-button--trigger {
+  --_control-button--padding-block: 0.25rem;
+  --_control-button--padding-inline: 1rem;
+}
+.control-button--active {
+  background-color: var(--_media-center-header--button-color);
+  color: #ffffff;
+}
+.control-button:hover:not(.control-button--active) {
+  background-color: var(--_media-center-header--button-color);
+}
+.control-button__icon {
+  --icon--size: 1rem;
+  --icon--color: #f2f2f2;
+  line-height: 0;
+}
+.control-button__icon--trigger {
+  --icon--size: 1.5rem;
+}
+.control-button__icon--active {
+  --icon--color: #ffffff;
+  --icon--stroke-width: 0.2;
+}
+.control-button__value {
+  font-size: 0.875rem;
+  line-height: 1rem;
+  text-overflow: ellipsis;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.close-button {
+  position: absolute;
+  top: 0.9375rem;
+  right: 1.25rem;
+  z-index: 1;
+}</style>

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

@@ -0,0 +1,12 @@
+import type { Locale } from '../../../core/locale';
+import type { MediaCenterContext } from '../media-center-context.svelte';
+type Props = {
+    context: MediaCenterContext;
+    locale?: Locale;
+    on: {
+        headerHeightChanged: (height: number) => void;
+    };
+};
+declare const MediaCenterHeader: import("svelte").Component<Props, {}, "">;
+type MediaCenterHeader = ReturnType<typeof MediaCenterHeader>;
+export default MediaCenterHeader;

package/dist/media-center/media-center/media-center-context.svelte.d.ts

@@ -0,0 +1,68 @@
+import type { IContentCategoryFollowingHandler } from '../categories-following/types';
+import type { IMediaCenterConfig } from '../config/types';
+import type { ICloseOrchestrator } from '../../ui/player/close-orchestrator';
+import { DiscoverViewHandler } from './discover';
+import { FeedHandler } from './feed';
+import { CategoriesHandler, MediaCenterSettingsHandler } from './handlers';
+import { PopularStreamsPanelHandler } from './menu';
+import { StreamsInCategoryPanelHandler } from './streams-in-category';
+import type { MediaCenterMode, MediaCenterSettings } from './types';
+export declare class MediaCenterContext {
+    initializing: boolean;
+    initialized: boolean;
+    readonly mediaCenterMode: MediaCenterMode;
+    menuActive: boolean;
+    categoriesHandler: CategoriesHandler;
+    feedHandler: FeedHandler;
+    discoverHandler: DiscoverViewHandler;
+    popularStreamsHandler: PopularStreamsPanelHandler;
+    streamsInCategoryHandler: StreamsInCategoryPanelHandler;
+    categoryFollowingHandler: IContentCategoryFollowingHandler | null;
+    settingsHandler: MediaCenterSettingsHandler;
+    closeOrchestrator: ICloseOrchestrator;
+    private _mediaCenterConfig;
+    constructor(data: {
+        config: IMediaCenterConfig;
+        closeOrchestrator: ICloseOrchestrator;
+        settings?: MediaCenterSettings;
+        on: MediaCenterContextInitializationCallbacks;
+    });
+    get targetData(): import("../config/types").MediaCenterTargetDataModel | null;
+    get playerColors(): {
+        brand: string | null;
+        button: string | null;
+        buttonInactive: string | null;
+        cardButton: string | null;
+        cardBackground: string | null;
+        menuBackground: string | null;
+        playerBackground: string | null;
+        price: string | null;
+        salePrice: string | null;
+        sidebarBackground: string | null;
+    } | null;
+    get loading(): boolean;
+    get overlayIsActive(): boolean;
+    get backgroundWrapperProps(): {
+        backgroundDisabled: boolean;
+        backgroundImageUrl: string | null;
+        backgroundColor?: string | null;
+    };
+    get feedPlayerProps(): import("./types").PlayerProps | null;
+    toggleMenu: () => void;
+    showMenu: () => void;
+    hideMenu: () => void;
+    activateDiscover: (options: {
+        categoryId: string | null;
+    }) => Promise<void>;
+    playPostsFeed: (options: Parameters<FeedHandler["activatePostsFeed"]>[0]) => Promise<void>;
+    playStreamsFeed: (options: Parameters<FeedHandler["activateStreamsFeed"]>[0]) => Promise<void>;
+    playRootFeed: () => Promise<void>;
+    tryActivateStreamsInCategory: (categoryId: string) => Promise<void>;
+    private deactivateOtherThanFeed;
+    private init;
+}
+type MediaCenterContextInitializationCallbacks = {
+    initialized: (instance: MediaCenterContext) => void;
+    failed: () => void;
+};
+export {};