@streamscloud/embeddable 10.1.2 → 12.0.0

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

@@ -1,19 +1,4 @@
-import type { Locale } from '../../core/locale';
-import type { IMediaCenterConfig } from '../config/types';
-import type { PostPlayerProps } from '../../posts/posts-player/types';
-import type { StreamsPlayerProps } from '../../streams/streams-player/types';
-type PlayerProps = {
-    mode: 'posts';
-    props: PostPlayerProps;
-} | {
-    mode: 'stream';
-    props: StreamsPlayerProps;
-};
-type Props = {
-    config: IMediaCenterConfig | null;
-    playerProps: PlayerProps;
-    locale?: Locale;
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
+import type { MediaCenterProps } from './types';
+declare const Cmp: import("svelte").Component<MediaCenterProps, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

package/dist/media-center/media-center/discover/data-loading.d.ts

@@ -0,0 +1,8 @@
+import type { IMediaCenterConfig } from '../../config/types';
+import { StreamsInCategory, ShortVideosInCategory } from './types.svelte';
+export declare class DiscoverDataLoader {
+    private readonly config;
+    constructor(config: IMediaCenterConfig);
+    loadStreams: (holder: StreamsInCategory) => Promise<void>;
+    loadShortVideos: (holder: ShortVideosInCategory) => Promise<void>;
+}

package/dist/media-center/media-center/discover/data-loading.js

@@ -0,0 +1,35 @@
+import { PostType } from '../../..';
+import { StreamsInCategory, ShortVideosInCategory } from './types.svelte';
+export class DiscoverDataLoader {
+    config;
+    constructor(config) {
+        this.config = config;
+    }
+    loadStreams = async (holder) => {
+        if (holder.continuationToken === null) {
+            return;
+        }
+        const streamsResponse = await this.config.streamPlayer.getStreamsCursor({
+            filter: { categoryId: holder.categoryId ?? undefined },
+            limit: 6,
+            continuationToken: holder.continuationToken
+        });
+        holder.streams = [...holder.streams, ...streamsResponse.items];
+        holder.continuationToken = streamsResponse.continuationToken;
+    };
+    loadShortVideos = async (holder) => {
+        if (holder.continuationToken === null) {
+            return;
+        }
+        const shortVideosResponse = await this.config.postsPlayer.getPostsCursor({
+            filter: {
+                categoryId: holder.categoryId,
+                types: [PostType.ShortVideo]
+            },
+            limit: 6,
+            continuationToken: holder.continuationToken
+        });
+        holder.shortVideos = [...holder.shortVideos, ...shortVideosResponse.items];
+        holder.continuationToken = shortVideosResponse.continuationToken;
+    };
+}

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

@@ -0,0 +1,6 @@
+import { type Locale } from '../../../core/locale';
+export declare class DiscoverHeaderLocalization {
+    membersLabel: (count: number) => string;
+    locale: Locale;
+    constructor(locale: Locale);
+}

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

@@ -0,0 +1,15 @@
+import {} from '../../../core/locale';
+export class DiscoverHeaderLocalization {
+    membersLabel;
+    locale;
+    constructor(locale) {
+        this.membersLabel = loc.membersLabel[locale];
+        this.locale = locale;
+    }
+}
+const loc = {
+    membersLabel: {
+        en: (count) => (count === 1 ? `Member` : `Members`),
+        no: (count) => (count === 1 ? `Medlem` : `Medlemmer`)
+    }
+};

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

@@ -0,0 +1,214 @@
+<script lang="ts">import { compactNumber } from '../../../core/utils/compact-number';
+import { ImageRounded } from '../../../ui/image';
+import { LineClamp } from '../../../ui/line-clamp';
+import { ProportionalContainer } from '../../../ui/proportional-container';
+import { DiscoverHeaderLocalization } from './discover-header-localization';
+import { MomentsCircle } from '../moments';
+let { context, locale = 'en' } = $props();
+const localization = $derived(new DiscoverHeaderLocalization(locale));
+</script>
+
+{#if context.targetData}
+  {@const target = context.targetData}
+  <div class="header">
+    <div class="header__avatar">
+      <MomentsCircle context={context} />
+    </div>
+    <div class="header__info">
+      <p class="header__name">{target.name}</p>
+      <p class="header__handle">@{target.handle}</p>
+      <div class="header__members">
+        <span class="header__members-count">
+          {compactNumber(target.membersCount, { locale: localization.locale })}
+        </span>
+        <span class="header__members-label">
+          {localization.membersLabel(target.membersCount)}
+        </span>
+      </div>
+
+      {#if target.description}
+        <p class="header__description">
+          <LineClamp enableShowMore={true} locale={locale}>{target.description}</LineClamp>
+        </p>
+      {/if}
+    </div>
+    {#if target.banner}
+      <div class="header__side-banner-container">
+        <ProportionalContainer ratio={470 / 179}>
+          <ImageRounded src={target.banner} noBorders={true} />
+        </ProportionalContainer>
+      </div>
+    {/if}
+  </div>
+
+  <div class="header-mobile">
+    <div class="header-mobile__info">
+      <div class="header-mobile__avatar">
+        <MomentsCircle context={context} />
+      </div>
+      <div class="header-mobile__texts">
+        <p class="header-mobile__name">{target.name}</p>
+        <div class="header-mobile__members">
+          <span class="header-mobile__members-count">
+            {compactNumber(target.membersCount, { locale: localization.locale })}
+          </span>
+          <span class="header-mobile__members-label">
+            {localization.membersLabel(target.membersCount)}
+          </span>
+        </div>
+      </div>
+    </div>
+    {#if target.description}
+      <p class="header-mobile__description">
+        <LineClamp enableShowMore={true} locale={locale}>{target.description}</LineClamp>
+      </p>
+    {/if}
+  </div>
+{/if}
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.header {
+  display: flex;
+  flex-direction: row;
+  gap: 2.25rem;
+  padding-top: 1.25rem;
+  color: #ffffff;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .header {
+    display: none;
+  }
+}
+.header__avatar {
+  width: 7.5rem;
+  min-width: 7.5rem;
+  max-width: 7.5rem;
+}
+.header__info {
+  display: flex;
+  flex-direction: column;
+  padding-top: 0.5rem;
+  flex: 1;
+}
+.header__name {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+}
+.header__handle {
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: #5a8dec;
+}
+:global([data-theme="dark"]) .header__handle {
+  color: #5a8dec;
+}
+.header__members {
+  margin-top: 0.625rem;
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+.header__members-count {
+  font-size: 0.9375rem;
+  line-height: 1;
+  font-weight: 500;
+}
+.header__members-label {
+  font-size: 0.75rem;
+  line-height: 1;
+  font-weight: 400;
+  color: #d1d5db;
+}
+.header__description {
+  margin-top: 0.875rem;
+  font-size: 0.9375rem;
+  max-width: 37.5rem;
+  --line-clamp--line-clamp: 6;
+}
+.header__side-banner-container {
+  width: 29.375rem;
+  max-width: 100%;
+  --image--rounded--outer--border-radius: 0.25rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 67.5rem) {
+  .header__side-banner-container {
+    display: none;
+  }
+}
+
+.header-mobile {
+  display: none;
+  flex-direction: column;
+  gap: 1.0625rem;
+  padding-top: 0.625rem;
+  color: #ffffff;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .header-mobile {
+    display: flex;
+  }
+}
+.header-mobile__info {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  flex: 1;
+  align-items: center;
+}
+.header-mobile__avatar {
+  width: 4rem;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+.header-mobile__texts {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.header-mobile__name {
+  font-size: 1.125rem;
+  font-weight: 700;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .header-mobile__name {
+    font-weight: 600;
+    font-size: 0.9375rem;
+    letter-spacing: -0.0103125rem;
+  }
+}
+.header-mobile__members {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.25rem;
+}
+.header-mobile__members-count {
+  font-size: 0.9375rem;
+  line-height: 1;
+  font-weight: 600;
+}
+.header-mobile__members-label {
+  font-size: 0.75rem;
+  line-height: 1;
+  font-weight: 600;
+  color: #d1d5db;
+}
+.header-mobile__description {
+  font-size: 1rem;
+  font-weight: 500;
+  --line-clamp--line-clamp: 2;
+}</style>

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

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

package/dist/media-center/media-center/discover/discover-view-handler.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { IMediaCenterConfig } from '../../config/types';
+import { ShortVideosInCategory, StreamsInCategory } from './types.svelte';
+export declare class DiscoverViewHandler {
+    private readonly config;
+    private _activated;
+    private _state;
+    private _streamsInCategoryCache;
+    private _shortVideosInCategoryCache;
+    private _streamsInCategory;
+    private _shortVideosInCategory;
+    private _dataLoader;
+    private _shortVideosLoadingDeferred;
+    constructor(config: IMediaCenterConfig);
+    get activated(): boolean;
+    get active(): boolean;
+    get loading(): boolean;
+    get streamsHolder(): StreamsInCategory | null;
+    get shortVideosHolders(): ShortVideosInCategory[];
+    loadMoreShortVideos: () => Promise<void>;
+    activate: (data: {
+        activeCategoryId: string | null;
+        childCategories: {
+            id: string;
+            name: string;
+        }[];
+    }) => Promise<void>;
+    deactivate: () => void;
+}

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

@@ -0,0 +1,101 @@
+import { Deferred } from '../../../core/deferred';
+import { DiscoverDataLoader } from './data-loading';
+import { ShortVideosInCategory, StreamsInCategory } from './types.svelte';
+export class DiscoverViewHandler {
+    config;
+    _activated = $state(false);
+    _state = $state('loading');
+    _streamsInCategoryCache = $state.raw([]);
+    _shortVideosInCategoryCache = $state.raw([]);
+    _streamsInCategory = $state.raw(null);
+    _shortVideosInCategory = $state.raw([]);
+    _dataLoader;
+    _shortVideosLoadingDeferred = null;
+    constructor(config) {
+        this.config = config;
+        this._dataLoader = new DiscoverDataLoader(this.config);
+    }
+    get activated() {
+        return this._activated;
+    }
+    get active() {
+        return this._activated && this._state === 'ready';
+    }
+    get loading() {
+        return this._activated && this._state === 'loading';
+    }
+    get streamsHolder() {
+        return this._streamsInCategory;
+    }
+    get shortVideosHolders() {
+        return this._shortVideosInCategory.filter((x) => x.shortVideos.length > 0 || x.continuationToken === undefined);
+    }
+    loadMoreShortVideos = async () => {
+        if (this._shortVideosLoadingDeferred) {
+            return this._shortVideosLoadingDeferred.promise;
+        }
+        this._shortVideosLoadingDeferred = new Deferred();
+        try {
+            // Find holders that haven't been loaded yet (continuationToken === undefined)
+            const unloadedHolders = this._shortVideosInCategory.filter((x) => x.continuationToken === undefined);
+            let filledHolders = 0;
+            let index = 0;
+            // Keep loading until we fill 2 holders or run out of candidates
+            while (filledHolders < 2 && index < unloadedHolders.length) {
+                const holder = unloadedHolders[index];
+                // Load short videos for this holder
+                await this._dataLoader.loadShortVideos(holder);
+                // Check if the load was successful (has videos)
+                if (holder.shortVideos.length > 0) {
+                    filledHolders++;
+                }
+                index++;
+            }
+        }
+        finally {
+            this._shortVideosLoadingDeferred.resolve();
+            this._shortVideosLoadingDeferred = null;
+        }
+    };
+    activate = async (data) => {
+        const { activeCategoryId, childCategories } = data;
+        this._activated = true;
+        this._state = 'loading';
+        try {
+            const promises = [];
+            // Init streams in category
+            let streamsInCategory = this._streamsInCategoryCache.find((x) => x.categoryId === activeCategoryId);
+            if (!streamsInCategory) {
+                streamsInCategory = new StreamsInCategory({ categoryId: activeCategoryId });
+                this._streamsInCategoryCache.push(streamsInCategory);
+            }
+            this._streamsInCategory = streamsInCategory;
+            if (streamsInCategory.continuationToken === undefined) {
+                promises.push(this._dataLoader.loadStreams(streamsInCategory));
+            }
+            // Init short videos in categories
+            const nonExistingShortVideosInCategory = childCategories.filter((cc) => !this._shortVideosInCategoryCache.some((x) => x.categoryId === cc.id));
+            for (const category of nonExistingShortVideosInCategory) {
+                const newShortVideosInCategory = new ShortVideosInCategory({ categoryId: category.id, categoryName: category.name });
+                this._shortVideosInCategoryCache.push(newShortVideosInCategory);
+            }
+            this._shortVideosInCategory = childCategories.map((c) => this._shortVideosInCategoryCache.find((b) => b.categoryId === c.id));
+            const pushShortVideoPromise = (holder) => {
+                if (holder && holder.continuationToken === undefined) {
+                    promises.push(this._dataLoader.loadShortVideos(holder));
+                    return;
+                }
+            };
+            pushShortVideoPromise(this._shortVideosInCategory[0]);
+            pushShortVideoPromise(this._shortVideosInCategory[1]);
+            await Promise.all(promises);
+        }
+        finally {
+            this._state = 'ready';
+        }
+    };
+    deactivate = () => {
+        this._activated = false;
+        this._shortVideosLoadingDeferred = null;
+    };
+}

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

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

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

@@ -0,0 +1,15 @@
+import {} from '../../../core/locale';
+export class DiscoverViewLocalization {
+    latestStreamsSectionTitle;
+    locale;
+    constructor(locale) {
+        this.latestStreamsSectionTitle = loc.streamsSectionTitle[locale];
+        this.locale = locale;
+    }
+}
+const loc = {
+    streamsSectionTitle: {
+        en: 'Latest Streams',
+        no: 'Siste Streams'
+    }
+};