@streamscloud/embeddable 10.1.2 → 12.0.0

package/dist/media-center/media-center/discover-panel-handler.svelte.js

@@ -1,101 +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;
-    };
-    toggle = async () => {
-        if (this._activated) {
-            this.deactivate();
-            return;
-        }
-        await this.activate();
-    };
-    _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-panel.svelte

@@ -1,133 +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 { DiscoverPanelHandler } from './discover-panel-handler.svelte';
-import { MediaCenterLocalization } from './media-center-localization';
-let { handler, localization, on } = $props();
-</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.streamsSectionTitle}
-        </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} 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/discover-panel.svelte.d.ts

@@ -1,15 +0,0 @@
-import type { PostPlayerModel } from '../../posts/posts-player';
-import type { StreamPlayerModel } from '../../streams/streams-player';
-import { DiscoverPanelHandler } from './discover-panel-handler.svelte';
-import { MediaCenterLocalization } from './media-center-localization';
-type Props = {
-    handler: DiscoverPanelHandler;
-    localization: MediaCenterLocalization;
-    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/media-center-handler.svelte.d.ts

@@ -1,28 +0,0 @@
-import type { IMediaCenterConfig } from '../config/types';
-import type { MediaCenterCategoryData } from './types';
-export declare class MediaCenterHandler {
-    private readonly config;
-    initializing: boolean;
-    readonly categories: {
-        id: string;
-        name: string;
-        children: {
-            id: string;
-            name: string;
-            parentId: string;
-        }[];
-    }[];
-    controlsPanelSelectedCategory: {
-        id: string;
-        childName: string | null;
-    } | null;
-    readonly logo: string | null;
-    readonly targetData: import("../config/types").MediaCenterTargetDataModel | null;
-    private _selectedCategoryId;
-    private _mediaCenterConfig;
-    constructor(config: IMediaCenterConfig | null);
-    get selectedCategoryId(): string | null;
-    set selectedCategoryId(value: string | null);
-    getCategoryData: (categoryId: string) => MediaCenterCategoryData | null;
-    private init;
-}

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

@@ -1,73 +0,0 @@
-export class MediaCenterHandler {
-    config;
-    initializing = $state(true);
-    categories = $derived.by(() => {
-        const allCategories = this._mediaCenterConfig?.contentCategories || [];
-        if (allCategories.length === 0) {
-            return [];
-        }
-        return allCategories
-            .filter((c) => !c.parentId)
-            .map((c) => {
-            const childCategories = allCategories.filter((cc) => cc.parentId === c.id);
-            const children = childCategories.map((cc) => ({ id: cc.id, name: cc.name, parentId: cc.parentId }));
-            return { id: c.id, name: c.name, children };
-        });
-    });
-    controlsPanelSelectedCategory = $derived.by(() => {
-        if (!this.selectedCategoryId) {
-            return null;
-        }
-        const selectedCategoryData = this.getCategoryData(this.selectedCategoryId);
-        if (!selectedCategoryData) {
-            return null;
-        }
-        if (!selectedCategoryData.parentId) {
-            return { id: selectedCategoryData.id, childName: null };
-        }
-        return { id: selectedCategoryData.parentId, childName: selectedCategoryData.name };
-    });
-    logo = $derived.by(() => this._mediaCenterConfig?.logo || null);
-    targetData = $derived.by(() => this._mediaCenterConfig?.targetData || null);
-    _selectedCategoryId = $state.raw(null);
-    _mediaCenterConfig = $state.raw(null);
-    constructor(config) {
-        this.config = config;
-        this.init();
-    }
-    get selectedCategoryId() {
-        return this._selectedCategoryId;
-    }
-    set selectedCategoryId(value) {
-        this._selectedCategoryId = value;
-    }
-    getCategoryData = (categoryId) => {
-        if (!this._mediaCenterConfig) {
-            return null;
-        }
-        const category = this._mediaCenterConfig.contentCategories.find((c) => c.id === categoryId);
-        if (!category) {
-            return null;
-        }
-        const parentCategory = category.parentId ? this._mediaCenterConfig.contentCategories.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 () => {
-        if (!this.config) {
-            this.initializing = false;
-            return;
-        }
-        try {
-            this._mediaCenterConfig = await this.config.getConfig();
-        }
-        finally {
-            this.initializing = false;
-        }
-    };
-}

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

@@ -1,10 +0,0 @@
-import { type Locale } from '../../core/locale';
-export declare class MediaCenterLocalization {
-    shortVideosSectionTitle: string;
-    streamsSectionTitle: string;
-    overviewLabel: string;
-    discoverButton: string;
-    membersLabel: (count: number) => string;
-    locale: Locale;
-    constructor(locale: Locale);
-}

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

@@ -1,39 +0,0 @@
-import {} from '../../core/locale';
-export class MediaCenterLocalization {
-    shortVideosSectionTitle;
-    streamsSectionTitle;
-    overviewLabel;
-    discoverButton;
-    membersLabel;
-    locale;
-    constructor(locale) {
-        this.shortVideosSectionTitle = loc.shortVideosSectionTitle[locale];
-        this.streamsSectionTitle = loc.streamsSectionTitle[locale];
-        this.overviewLabel = loc.overviewLabel[locale];
-        this.discoverButton = loc.discoverButton[locale];
-        this.membersLabel = loc.membersLabel[locale];
-        this.locale = locale;
-    }
-}
-const loc = {
-    shortVideosSectionTitle: {
-        en: 'Popular Short Videos',
-        no: 'Populære korte videoer'
-    },
-    streamsSectionTitle: {
-        en: 'Latest Streams',
-        no: 'Siste Streams'
-    },
-    overviewLabel: {
-        en: 'Overview',
-        no: 'Oversikt'
-    },
-    discoverButton: {
-        en: 'Discover',
-        no: 'Oppdag'
-    },
-    membersLabel: {
-        en: (count) => (count === 1 ? `Member` : `Members`),
-        no: (count) => (count === 1 ? `Medlem` : `Medlemmer`)
-    }
-};

package/dist/media-center/media-center/mobile-controls-panel.svelte

@@ -1,268 +0,0 @@
-<script lang="ts">import { slideHorizontally } from '../../core/transitions';
-import { compactNumber } from '../../core/utils/compact-number';
-import { Icon } from '../../ui/icon';
-import { ImageRound } from '../../ui/image';
-import { LineClamp } from '../../ui/line-clamp';
-import { default as ButtonWrapper } from './category-following-wrapper.svelte';
-import { DiscoverPanelHandler } from './discover-panel-handler.svelte';
-import { MediaCenterLocalization } from './media-center-localization';
-import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
-import IconChevronRight from '@fluentui/svg-icons/icons/chevron_right_20_regular.svg?raw';
-import { slide } from 'svelte/transition';
-let { mediaCenterHandler, discoverHandler, followingHandler, localization, extraActions, on } = $props();
-const target = $derived.by(() => mediaCenterHandler.targetData);
-const generateCategoriesMap = () => {
-    const expanded = {};
-    mediaCenterHandler.categories.forEach((c) => {
-        const isSelfSelected = mediaCenterHandler.selectedCategoryId === c.id;
-        const hasSelectedChild = c.children.some((ch) => ch.id === mediaCenterHandler.selectedCategoryId);
-        expanded[c.id] = isSelfSelected || hasSelectedChild;
-    });
-    return expanded;
-};
-const categoriesExpandedMap = $state(generateCategoriesMap());
-const handleCategoryExpaned = (e, categoryId) => {
-    e.stopPropagation();
-    categoriesExpandedMap[categoryId] = !categoriesExpandedMap[categoryId];
-};
-</script>
-
-<div class="mobile-controls-panel" transition:slideHorizontally|local onclick={(e) => e.stopPropagation()} onkeydown={() => {}} role="none">
-  {#if target}
-    <div class="media-center-target">
-      <div class="media-center-target__image">
-        <ImageRound src={target.image} />
-      </div>
-      <div class="media-center-target__info">
-        <div class="media-center-target__name">
-          <LineClamp maxLines={1}>
-            {target.name}
-          </LineClamp>
-        </div>
-        {#if target.membersCount}
-          <LineClamp maxLines={1}>
-            <div class="media-center-target__members">
-              <span class="media-center-target__members-count">
-                {compactNumber(target.membersCount, { locale: localization.locale })}
-              </span>
-              <span class="media-center-target__members-label">
-                {localization.membersLabel(target.membersCount)}
-              </span>
-            </div>
-          </LineClamp>
-        {/if}
-      </div>
-    </div>
-  {/if}
-  <div class="mobile-controls-panel__tree">
-    {#each extraActions as action (action)}
-      <button
-        type="button"
-        class="selector-item"
-        onclick={() => {
-          action.callback();
-          on.externalActionExecuted();
-        }}>
-        <span class="selector-item__text">
-          {action.name}
-        </span>
-      </button>
-    {/each}
-    <button type="button" class="selector-item" onclick={() => on.toggleDiscover()}>
-      <span class="selector-item__text" class:selector-item__text--active={discoverHandler.activated}>
-        {localization.discoverButton}
-      </span>
-    </button>
-    {#each mediaCenterHandler.categories as category (category.id)}
-      <div class="selector-item">
-        <div
-          class="selector-item__text"
-          class:selector-item__text--active={!discoverHandler.activated && mediaCenterHandler.selectedCategoryId === category.id}
-          onclick={() => on.categorySelected(category.id)}
-          onkeydown={() => {}}
-          role="button"
-          tabindex="0">
-          {category.name}
-        </div>
-        <ButtonWrapper categoryId={category.id} followingHandler={followingHandler} invertedOrientation={true}>
-          <button
-            type="button"
-            class="selector-item__collapser"
-            class:selector-item__collapser--hidden={!category.children.length}
-            onclick={(e) => handleCategoryExpaned(e, category.id)}>
-            {#if categoriesExpandedMap[category.id]}
-              <Icon src={IconChevronDown} />
-            {:else}
-              <Icon src={IconChevronRight} />
-            {/if}
-          </button>
-        </ButtonWrapper>
-      </div>
-      {#if categoriesExpandedMap[category.id]}
-        <div transition:slide|local>
-          {#each category.children as subcategory (subcategory.id)}
-            <div class="selector-item selector-item--child">
-              <div
-                class="selector-item__text"
-                class:selector-item__text--active={!discoverHandler.activated && mediaCenterHandler.selectedCategoryId === subcategory.id}
-                onclick={() => on.categorySelected(subcategory.id)}
-                onkeydown={() => {}}
-                role="button"
-                tabindex="0">
-                {subcategory.name}
-              </div>
-              <ButtonWrapper categoryId={subcategory.id} followingHandler={followingHandler} invertedOrientation={true}>
-                <button type="button" class="selector-item__collapser selector-item__collapser--hidden">
-                  <Icon src={IconChevronRight} />
-                </button>
-              </ButtonWrapper>
-            </div>
-          {/each}
-        </div>
-      {/if}
-    {/each}
-  </div>
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.mobile-controls-panel {
-  background: #1c1c1c;
-  height: 100%;
-  min-height: 100%;
-  max-height: 100%;
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-  display: flex;
-  gap: 2.1875rem;
-  flex-direction: column;
-  min-height: 0;
-  padding: 0.9375rem 1.25rem;
-  padding-right: 0.75rem;
-  overflow: hidden;
-}
-.mobile-controls-panel__tree {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  --_cross-browser-scrollbar--thumb-color: transparent;
-  --_cross-browser-scrollbar--track-color: transparent;
-}
-.mobile-controls-panel__tree:hover {
-  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, #7d7d7d);
-  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
-}
-.mobile-controls-panel__tree::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.mobile-controls-panel__tree::-webkit-scrollbar-track {
-  background: var(--_cross-browser-scrollbar--track-color);
-  border-radius: 100vw;
-}
-.mobile-controls-panel__tree::-webkit-scrollbar-thumb {
-  background: var(--_cross-browser-scrollbar--thumb-color);
-  border-radius: 100vw;
-}
-@supports (scrollbar-color: transparent transparent) {
-  .mobile-controls-panel__tree {
-    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
-    scrollbar-width: thin;
-  }
-}
-
-.selector-item {
-  display: flex;
-  -webkit-user-drag: none;
-  user-select: none;
-  --_selector-item--text-size: 1.125rem;
-}
-.selector-item :global([contenteditable]) {
-  user-select: text;
-}
-.selector-item--child {
-  padding-left: 1.25rem;
-  --_selector-item--text-size: 0.875rem;
-}
-.selector-item__text {
-  flex: 1;
-  max-width: 100%;
-  color: #ffffff;
-  font-size: var(--_selector-item--text-size);
-  line-height: 1.5;
-  font-weight: 400;
-  text-align: left;
-  padding: 0.5rem 0;
-  text-overflow: ellipsis;
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  transition: text-shadow 120ms ease;
-}
-.selector-item__text:hover, .selector-item__text--active {
-  text-shadow: 0 0 0 currentColor, 0.03em 0 currentColor;
-  letter-spacing: 0.0125em;
-}
-.selector-item__collapser {
-  --icon--color: #ffffff;
-  padding: 0.5rem;
-}
-.selector-item__collapser--hidden {
-  visibility: hidden;
-}
-
-.media-center-target {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-.media-center-target__image {
-  width: 4rem;
-  min-width: 4rem;
-  max-width: 4rem;
-  height: 4rem;
-  min-height: 4rem;
-  max-height: 4rem;
-  --image--rounded--inner--border-width: 0;
-  --image--rounded--outer--border-color: #f2f2f3;
-  --image--rounded--outer--border-width: 1px;
-}
-.media-center-target__info {
-  display: flex;
-  flex-direction: column;
-  color: #ffffff;
-}
-.media-center-target__name {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  font-weight: 600;
-}
-.media-center-target__members {
-  display: flex;
-  align-items: flex-end;
-  gap: 0.5rem;
-}
-.media-center-target__members-count {
-  font-size: 0.9375rem;
-  line-height: 1;
-  font-weight: 500;
-}
-.media-center-target__members-label {
-  font-size: 0.75rem;
-  line-height: 1;
-  font-weight: 400;
-  color: #d1d5db;
-}</style>

package/dist/media-center/media-center/mobile-controls-panel.svelte.d.ts

@@ -1,20 +0,0 @@
-import type { IContentCategoryFollowingHandler } from '..';
-import type { ExtraActionDefinition } from '../model/types';
-import { DiscoverPanelHandler } from './discover-panel-handler.svelte';
-import type { MediaCenterHandler } from './media-center-handler.svelte';
-import { MediaCenterLocalization } from './media-center-localization';
-type Props = {
-    mediaCenterHandler: MediaCenterHandler;
-    discoverHandler: DiscoverPanelHandler;
-    followingHandler?: IContentCategoryFollowingHandler;
-    localization: MediaCenterLocalization;
-    extraActions: ExtraActionDefinition[];
-    on: {
-        categorySelected: (categoryId: string) => void;
-        toggleDiscover: () => void;
-        externalActionExecuted: () => void;
-    };
-};
-declare const MobileControlsPanel: import("svelte").Component<Props, {}, "">;
-type MobileControlsPanel = ReturnType<typeof MobileControlsPanel>;
-export default MobileControlsPanel;