@streamscloud/embeddable 10.1.2 → 11.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "10.1.2",
+  "version": "11.0.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",

package/dist/content-player/content-player-localization.d.ts

@@ -1,6 +0,0 @@
-import { type Locale } from '../core/locale';
-export declare class ContentPlayerLocalization {
-    overviewLabel: string;
-    locale: Locale;
-    constructor(locale: Locale);
-}

package/dist/content-player/content-player-localization.js

@@ -1,15 +0,0 @@
-import {} from '../core/locale';
-export class ContentPlayerLocalization {
-    overviewLabel;
-    locale;
-    constructor(locale) {
-        this.overviewLabel = loc.overviewLabel[locale];
-        this.locale = locale;
-    }
-}
-const loc = {
-    overviewLabel: {
-        en: 'Overview',
-        no: 'Oversikt'
-    }
-};

package/dist/media-center/media-center/desktop-categories-selector.svelte

@@ -1,132 +0,0 @@
-<script lang="ts">import { Dropdown } from '../../ui/dropdown';
-import { Icon } from '../../ui/icon';
-import { default as ButtonWrapper } from './category-following-wrapper.svelte';
-import IconTextColumnThree from '@fluentui/svg-icons/icons/text_column_three_20_regular.svg?raw';
-let { handler, followingHandler, on } = $props();
-</script>
-
-<Dropdown>
-  {#snippet trigger()}
-    <button type="button" class="desktop-categories-trigger">
-      <Icon src={IconTextColumnThree} />
-    </button>
-  {/snippet}
-  <div class="desktop-categories-selector">
-    {#each handler.categories as category (category.id)}
-      <div>
-        <ButtonWrapper categoryId={category.id} followingHandler={followingHandler}>
-          <button
-            type="button"
-            class="desktop-categories-selector__category"
-            class:desktop-categories-selector__category--active={handler.selectedCategoryId === category.id}
-            title={category.name}
-            onclick={() => on.categorySelected(category.id)}>{category.name}</button>
-        </ButtonWrapper>
-
-        {#if category.children.length > 0}
-          <div class="desktop-categories-selector__sub-categories">
-            {#each category.children as subcategory (subcategory.id)}
-              <ButtonWrapper categoryId={subcategory.id} followingHandler={followingHandler}>
-                <button
-                  type="button"
-                  class="desktop-categories-selector__sub-category"
-                  class:desktop-categories-selector__sub-category--active={handler.selectedCategoryId === subcategory.id}
-                  title={subcategory.name}
-                  onclick={() => on.categorySelected(subcategory.id)}>{subcategory.name}</button>
-              </ButtonWrapper>
-            {/each}
-          </div>
-        {/if}
-      </div>
-    {/each}
-  </div>
-</Dropdown>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.desktop-categories-trigger {
-  pointer-events: auto;
-  padding: 0.40625rem 0.75rem;
-  line-height: 0;
-  white-space: nowrap;
-  flex: 0 0 auto;
-  border-radius: 0.875rem;
-  background-color: rgba(0, 0, 0, 0.6);
-  color: #f2f2f2;
-  transition: background 0.3s ease-in-out;
-  -webkit-user-drag: none;
-  user-select: none;
-}
-.desktop-categories-trigger :global([contenteditable]) {
-  user-select: text;
-}
-.desktop-categories-trigger:hover:not(.desktop-categories-trigger--active) {
-  background-color: rgba(0, 0, 0, 0.9);
-}
-
-.desktop-categories-selector {
-  background-color: rgba(0, 0, 0, 0.9);
-  border-radius: 0.75rem;
-  padding: 1rem 1.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  width: 33.75rem;
-  max-width: calc(100vw - 2rem);
-}
-.desktop-categories-selector__category {
-  color: #ffffff;
-  font-size: 0.875rem;
-  font-weight: 500;
-  text-align: left;
-  padding: 0.375rem 0;
-  max-width: 7.5rem;
-  text-overflow: ellipsis;
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  width: max-content;
-  -webkit-user-drag: none;
-  user-select: none;
-}
-.desktop-categories-selector__category :global([contenteditable]) {
-  user-select: text;
-}
-.desktop-categories-selector__category:hover, .desktop-categories-selector__category--active {
-  color: #5a8dec;
-}
-.desktop-categories-selector__sub-categories {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1.5rem;
-}
-.desktop-categories-selector__sub-category {
-  color: #d1d5db;
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-align: left;
-  padding: 0.375rem 0;
-  max-width: 7.5rem;
-  text-overflow: ellipsis;
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  width: max-content;
-  -webkit-user-drag: none;
-  user-select: none;
-}
-.desktop-categories-selector__sub-category :global([contenteditable]) {
-  user-select: text;
-}
-.desktop-categories-selector__sub-category:hover, .desktop-categories-selector__sub-category--active {
-  color: #5a8dec;
-}</style>

package/dist/media-center/media-center/desktop-categories-selector.svelte.d.ts

@@ -1,12 +0,0 @@
-import type { IContentCategoryFollowingHandler } from '..';
-import type { MediaCenterHandler } from './media-center-handler.svelte';
-type Props = {
-    handler: MediaCenterHandler;
-    followingHandler?: IContentCategoryFollowingHandler;
-    on: {
-        categorySelected: (categoryId: string) => void;
-    };
-};
-declare const DesktopCategoriesSelector: import("svelte").Component<Props, {}, "">;
-type DesktopCategoriesSelector = ReturnType<typeof DesktopCategoriesSelector>;
-export default DesktopCategoriesSelector;

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;

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

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