@streamscloud/embeddable 11.0.0 → 12.1.0

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'
+    }
+};

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

@@ -0,0 +1,238 @@
+<script lang="ts">import { getPostCoverImage } from '../../../posts/model';
+import { ShortVideoCard } from '../../../short-videos/short-video-card';
+import { StreamCard } from '../../../streams/stream-card';
+import { InfiniteScrolling } from '../../../ui/infinite-scrolling';
+import { default as Header } from './discover-header.svelte';
+import { DiscoverViewLocalization } from './discover-view-localization';
+let { context, locale = 'en', on } = $props();
+const handler = $derived(context.discoverHandler);
+const localization = $derived(new DiscoverViewLocalization(locale));
+</script>
+
+{#if !handler.loading}
+  <div class="media-center-discover">
+    <div class="media-center-discover__content">
+      <Header context={context} locale={locale} />
+      {#if handler.streamsHolder?.streams.length}
+        <div class="media-center-discover__section">
+          <div class="media-center-discover__section-header">
+            {localization.latestStreamsSectionTitle}
+          </div>
+          <div class="media-center-discover__section-content media-center-discover__section-content--5">
+            {#each handler.streamsHolder.streams as item (item.id)}
+              <StreamCard stream={item} on={{ click: () => on.streamSelected(item) }}></StreamCard>
+            {/each}
+          </div>
+        </div>
+      {/if}
+      {#each handler.shortVideosHolders as holder, index (holder)}
+        <InfiniteScrolling loadMore={handler.loadMoreShortVideos}>
+          {#if holder.shortVideos.length}
+            <div class="media-center-discover__section">
+              <div class="media-center-discover__section-header">
+                {holder.categoryName}
+              </div>
+              <div
+                class="media-center-discover__section-content"
+                class:media-center-discover__section-content--5={index % 2 !== 0}
+                class:media-center-discover__section-content--4={index % 2 === 0}>
+                {#each holder.shortVideos as item (item.id)}
+                  <ShortVideoCard
+                    shortVideo={{
+                      id: item.id,
+                      text: item.text,
+                      cover: getPostCoverImage(item),
+                      displayDate: item.displayDate,
+                      viewsCount: item.viewsCount,
+                      products: item.products
+                    }}
+                    locale={locale}
+                    on={{ click: () => on.shortVideoSelected(item) }} />
+                {/each}
+              </div>
+            </div>
+          {/if}
+        </InfiniteScrolling>
+      {/each}
+    </div>
+  </div>
+{/if}
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.media-center-discover {
+  width: 100%;
+  flex: 1;
+  scrollbar-gutter: stable both-edges;
+  padding-inline: 1.875rem;
+  overflow-y: auto;
+  --_cross-browser-scrollbar--thumb-color: transparent;
+  --_cross-browser-scrollbar--track-color: transparent;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+.media-center-discover:hover {
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, #7d7d7d);
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+}
+.media-center-discover::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.media-center-discover::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
+}
+.media-center-discover::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
+}
+@supports (scrollbar-color: transparent transparent) {
+  .media-center-discover {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
+}
+@container (width < 576px) {
+  .media-center-discover {
+    padding-inline: 0.9375rem;
+  }
+}
+.media-center-discover__content {
+  width: 100%;
+  max-width: 73.75rem;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+  padding-bottom: 1.25rem;
+  /* 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-discover__content {
+    gap: 2.5rem;
+    padding-bottom: 1rem;
+  }
+}
+@container (width < 768px) {
+  .media-center-discover__content {
+    gap: 2rem;
+    padding-bottom: 0.8125rem;
+  }
+}
+@container (width < 576px) {
+  .media-center-discover__content {
+    gap: 1.5rem;
+    padding-bottom: 0.625rem;
+  }
+}
+.media-center-discover__section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 768px) {
+  .media-center-discover__section {
+    gap: 0.625rem;
+  }
+}
+.media-center-discover__section-header {
+  display: flex;
+  align-items: center;
+  gap: 0.6875rem;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 600;
+  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-discover__section-content {
+  display: grid;
+}
+.media-center-discover__section-content--4 {
+  gap: 1.25rem;
+  grid-template-columns: repeat(4, 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*/
+}
+.media-center-discover__section-content--4 :global(> :nth-child(n + 5)) {
+  display: none;
+}
+@container (width < 992px) {
+  .media-center-discover__section-content--4 {
+    gap: 1rem;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .media-center-discover__section-content--4 :global(> :nth-child(n + 4)) {
+    display: none;
+  }
+}
+@container (width < 768px) {
+  .media-center-discover__section-content--4 {
+    gap: 0.75rem;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .media-center-discover__section-content--4 :global(> :nth-child(n + 4)) {
+    display: block;
+  }
+  .media-center-discover__section-content--4 :global(> :nth-child(n + 5)) {
+    display: none;
+  }
+}
+@container (width < 576px) {
+  .media-center-discover__section-content--4 {
+    gap: 0.625rem;
+  }
+}
+.media-center-discover__section-content--5 {
+  gap: 1.875rem;
+  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*/
+}
+.media-center-discover__section-content--5 :global(> :nth-child(n + 6)) {
+  display: none;
+}
+@container (width < 992px) {
+  .media-center-discover__section-content--5 {
+    gap: 1.5rem;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .media-center-discover__section-content--5 :global(> :nth-child(n + 5)) {
+    display: none;
+  }
+}
+@container (width < 768px) {
+  .media-center-discover__section-content--5 {
+    gap: 1.125rem;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .media-center-discover__section-content--5 :global(> :nth-child(n + 4)) {
+    display: none;
+  }
+}
+@container (width < 576px) {
+  .media-center-discover__section-content--5 {
+    gap: 0.9375rem;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .media-center-discover__section-content--5 :global(> :nth-child(n + 4)) {
+    display: block;
+  }
+  .media-center-discover__section-content--5 :global(> :nth-child(n + 5)) {
+    display: none;
+  }
+}</style>

package/dist/media-center/media-center/discover/{discover-panel.svelte.d.ts → discover-view.svelte.d.ts}

@@ -4,12 +4,12 @@ import type { StreamPlayerModel } from '../../../streams/streams-player';
 import type { MediaCenterContext } from '../media-center-context.svelte';
 type Props = {
     context: MediaCenterContext;
-    locale: Locale;
+    locale?: Locale;
     on: {
         shortVideoSelected: (shortVideo: PostPlayerModel) => void;
         streamSelected: (stream: StreamPlayerModel) => void;
     };
 };
-declare const DiscoverPanel: import("svelte").Component<Props, {}, "">;
-type DiscoverPanel = ReturnType<typeof DiscoverPanel>;
-export default DiscoverPanel;
+declare const DiscoverView: import("svelte").Component<Props, {}, "">;
+type DiscoverView = ReturnType<typeof DiscoverView>;
+export default DiscoverView;

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

@@ -1,2 +1,2 @@
-export { default as DiscoverPanel } from './discover-panel.svelte';
-export { DiscoverPanelHandler } from './discover-panel-handler.svelte';
+export { default as DiscoverPanel } from './discover-view.svelte';
+export { DiscoverViewHandler } from './discover-view-handler.svelte.js';

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

@@ -1,2 +1,2 @@
-export { default as DiscoverPanel } from './discover-panel.svelte';
-export { DiscoverPanelHandler } from './discover-panel-handler.svelte';
+export { default as DiscoverPanel } from './discover-view.svelte';
+export { DiscoverViewHandler } from './discover-view-handler.svelte.js';

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

@@ -0,0 +1,20 @@
+import type { PostPlayerModel } from '../../../posts/posts-player/types';
+import type { StreamPlayerModel } from '../../../streams/streams-player/types';
+export declare class ShortVideosInCategory {
+    categoryId: string;
+    categoryName: string;
+    shortVideos: PostPlayerModel[];
+    continuationToken: string | null | undefined;
+    constructor(data: {
+        categoryId: string;
+        categoryName: string;
+    });
+}
+export declare class StreamsInCategory {
+    categoryId: string | null;
+    streams: StreamPlayerModel[];
+    continuationToken: string | null | undefined;
+    constructor(data: {
+        categoryId: string | null;
+    });
+}

package/dist/media-center/media-center/discover/types.svelte.js

@@ -0,0 +1,20 @@
+export class ShortVideosInCategory {
+    categoryId;
+    categoryName;
+    shortVideos = $state.raw([]);
+    continuationToken = $state(undefined);
+    constructor(data) {
+        const { categoryId, categoryName } = data;
+        this.categoryId = categoryId;
+        this.categoryName = categoryName;
+    }
+}
+export class StreamsInCategory {
+    categoryId;
+    streams = $state.raw([]);
+    continuationToken = $state(undefined);
+    constructor(data) {
+        const { categoryId } = data;
+        this.categoryId = categoryId;
+    }
+}