@streamscloud/embeddable 10.1.2 → 11.0.0

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

@@ -0,0 +1,310 @@
+<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, closeFn, 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.logo}
+      <div class="media-center-header__logo-wrap">
+        <img src={context.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.activateFeed()}>
+          <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}>
+          <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 closeFn}
+    <div class="close-button">
+      <PlayerButton
+        icon={IconDismiss}
+        zoom={0.8}
+        activeColor={context.playerColors?.button ?? null}
+        inactiveColor={context.playerColors?.buttonInactive ?? null}
+        on={{ click: closeFn }} />
+    </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: 3.125rem;
+  max-width: 11.25rem;
+  min-width: 0;
+  overflow: hidden;
+}
+.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: 0.5rem 0.625rem;
+  padding-left: 0;
+  --_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;
+  text-shadow: 0.001em 0 0 currentColor, -0.001em 0 0 currentColor, 0 0.001em 0 currentColor, 0 -0.001em 0 currentColor;
+}
+.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,13 @@
+import type { Locale } from '../../../core/locale';
+import type { MediaCenterContext } from '../media-center-context.svelte';
+type Props = {
+    context: MediaCenterContext;
+    locale: Locale;
+    closeFn: (() => void) | null;
+    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,50 @@
+import type { IContentCategoryFollowingHandler } from '../categories-following/types';
+import type { IMediaCenterConfig } from '../config/types';
+import { DiscoverPanelHandler } from './discover';
+import { CategoriesHandler, FeedHandler } from './handlers';
+import { PopularStreamsPanelHandler } from './menu';
+import { StreamsInCategoryPanelHandler } from './streams-in-category';
+export declare class MediaCenterContext {
+    initializing: boolean;
+    menuActive: boolean;
+    categoriesHandler: CategoriesHandler;
+    feedHandler: FeedHandler;
+    discoverHandler: DiscoverPanelHandler;
+    popularStreamsHandler: PopularStreamsPanelHandler;
+    streamsInCategoryHandler: StreamsInCategoryPanelHandler;
+    categoryFollowingHandler: IContentCategoryFollowingHandler | null;
+    private _mediaCenterConfig;
+    constructor(data: {
+        config: IMediaCenterConfig | null;
+        followingHandler: IContentCategoryFollowingHandler | null | undefined;
+        on: {
+            initialized: () => void;
+        };
+    });
+    get mediaCenterEffective(): boolean;
+    get logo(): string | null;
+    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;
+    toggleMenu: () => void;
+    showMenu: () => void;
+    hideMenu: () => void;
+    activateDiscover: () => Promise<void>;
+    activateFeed: (options?: {
+        categoryId?: string | null;
+    }) => Promise<void>;
+    tryActivateStreamsInCategory: (categoryId: string) => Promise<void>;
+    private init;
+}

package/dist/media-center/media-center/media-center-context.svelte.js

@@ -0,0 +1,98 @@
+import { DiscoverPanelHandler } from './discover';
+import { CategoriesHandler, FeedHandler } from './handlers';
+import { PopularStreamsPanelHandler } from './menu';
+import { StreamsInCategoryPanelHandler } from './streams-in-category';
+export class MediaCenterContext {
+    initializing = $state(true);
+    menuActive = $state(false);
+    categoriesHandler = new CategoriesHandler();
+    feedHandler = new FeedHandler();
+    discoverHandler;
+    popularStreamsHandler;
+    streamsInCategoryHandler;
+    categoryFollowingHandler = $state.raw(null);
+    _mediaCenterConfig = $state.raw(null);
+    constructor(data) {
+        const { config, followingHandler, on } = data;
+        this.discoverHandler = new DiscoverPanelHandler(config);
+        this.popularStreamsHandler = new PopularStreamsPanelHandler(config);
+        this.streamsInCategoryHandler = new StreamsInCategoryPanelHandler(config);
+        this.categoryFollowingHandler = followingHandler || null;
+        this.init(config, on.initialized);
+    }
+    get mediaCenterEffective() {
+        return !this.initializing && this.categoriesHandler.categories.length > 0;
+    }
+    get logo() {
+        return this._mediaCenterConfig?.logo || null;
+    }
+    get targetData() {
+        return this._mediaCenterConfig?.targetData || null;
+    }
+    get playerColors() {
+        return this._mediaCenterConfig?.playerColors || null;
+    }
+    get loading() {
+        return this.discoverHandler.loading || this.streamsInCategoryHandler.loading;
+    }
+    get overlayIsActive() {
+        return this.discoverHandler.activated || this.streamsInCategoryHandler.activated;
+    }
+    toggleMenu = () => {
+        if (this.menuActive) {
+            this.hideMenu();
+        }
+        else {
+            this.showMenu();
+        }
+    };
+    showMenu = () => {
+        this.menuActive = true;
+        this.popularStreamsHandler.init();
+    };
+    hideMenu = () => {
+        this.menuActive = false;
+    };
+    activateDiscover = async () => {
+        this.hideMenu();
+        this.feedHandler.deactivate();
+        this.streamsInCategoryHandler.deactivate();
+        await this.discoverHandler.activate();
+    };
+    activateFeed = async (options) => {
+        this.hideMenu();
+        this.feedHandler.activate();
+        this.discoverHandler.deactivate();
+        this.streamsInCategoryHandler.deactivate();
+        if (options?.categoryId !== undefined) {
+            this.categoriesHandler.selectedCategoryId = options.categoryId;
+        }
+    };
+    tryActivateStreamsInCategory = async (categoryId) => {
+        if (this.categoriesHandler.selectedCategoryId === categoryId) {
+            this.activateFeed({ categoryId: null });
+            return;
+        }
+        const selectedCategoryData = this.categoriesHandler.getCategoryData(categoryId);
+        await this.streamsInCategoryHandler.activate(selectedCategoryData);
+        this.hideMenu();
+        this.feedHandler.deactivate();
+        this.discoverHandler.deactivate();
+        this.categoriesHandler.selectedCategoryId = categoryId;
+    };
+    init = async (config, onInitilized) => {
+        if (!config) {
+            this.initializing = false;
+            onInitilized();
+            return;
+        }
+        try {
+            this._mediaCenterConfig = await config.getConfig();
+            this.categoriesHandler.init(this._mediaCenterConfig?.contentCategories || []);
+        }
+        finally {
+            this.initializing = false;
+            onInitilized();
+        }
+    };
+}

package/dist/media-center/media-center/{category-following-wrapper.svelte → menu/category-following-wrapper.svelte}

@@ -7,7 +7,7 @@
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Icon } from '../../ui/icon';
+import { Icon } from '../../../ui/icon';
 import IconStarFilled from '@fluentui/svg-icons/icons/star_20_filled.svg?raw';
 import IconStar from '@fluentui/svg-icons/icons/star_20_regular.svg?raw';
 import { onMount } from 'svelte';
@@ -32,7 +32,8 @@ const handleToggleFollow = (e) => __awaiter(void 0, void 0, void 0, function* ()
 });
 </script>
 
-{#if !followingHandler}
+<!--Disabled following logic. for future references-->
+{#if !followingHandler || true}
   {@render children()}
 {:else}
   <div class="desktop-category-following-wrapper" class:desktop-category-following-wrapper--inverted-orientation={invertedOrientation}>

package/dist/media-center/media-center/{category-following-wrapper.svelte.d.ts → menu/category-following-wrapper.svelte.d.ts}

@@ -1,8 +1,8 @@
-import type { IContentCategoryFollowingHandler } from '..';
+import type { MediaCenterContext } from '../media-center-context.svelte';
 import { type Snippet } from 'svelte';
 type Props = {
     categoryId: string;
-    followingHandler?: IContentCategoryFollowingHandler;
+    followingHandler?: MediaCenterContext['categoryFollowingHandler'];
     children: Snippet;
     invertedOrientation?: boolean;
 };

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

@@ -0,0 +1,2 @@
+export { default as Menu } from './menu.svelte';
+export { PopularStreamsPanelHandler } from './popular-streams-panel-handler.svelte';

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

@@ -0,0 +1,2 @@
+export { default as Menu } from './menu.svelte';
+export { PopularStreamsPanelHandler } from './popular-streams-panel-handler.svelte';

package/dist/media-center/media-center/menu/menu-localization.d.ts

@@ -0,0 +1,19 @@
+import { type Locale } from '../../../core/locale';
+export declare class MenuLocalization {
+    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/menu/menu-localization.js

@@ -0,0 +1,78 @@
+import {} from '../../../core/locale';
+export class MenuLocalization {
+    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`)
+    }
+};