@streamscloud/embeddable 13.0.1 → 13.2.0

package/dist/core/utils/utils.d.ts

@@ -1,4 +1,5 @@
 export declare class Utils {
+    static areEqual(value: unknown, other: unknown): boolean;
     static assertUnreachable(_x: never): never;
     static clone<T>(value: T): T;
     /**

package/dist/core/utils/utils.js

@@ -1,4 +1,8 @@
+import { dequal as isEqual } from 'dequal/lite';
 export class Utils {
+    static areEqual(value, other) {
+        return isEqual(value, other);
+    }
     static assertUnreachable(_x) {
         throw new Error("Didn't expect to get here");
     }

package/dist/external-api/data-providers/internal-media-center-data-provider.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { MediaCenterState } from '../../media-center';
 import type { IMediaCenterDataProvider } from '../../media-center/config/types';
 export declare class InternalMediaCenterDataProvider implements IMediaCenterDataProvider {
     model: IMediaCenterDataProvider['model'];
@@ -11,5 +12,6 @@ export declare class InternalMediaCenterDataProvider implements IMediaCenterData
         initiator?: string;
         graphqlOrigin?: string;
         testingStuff?: boolean;
+        onNavigationStateChange?: (state: MediaCenterState) => void;
     });
 }

package/dist/external-api/data-providers/internal-media-center-data-provider.svelte.js

@@ -17,7 +17,7 @@ export class InternalMediaCenterDataProvider {
     fetchModel;
     graphql;
     constructor(input) {
-        const { mediaPageId, graphqlOrigin, initiator, testingStuff } = input;
+        const { mediaPageId, graphqlOrigin, initiator, testingStuff, onNavigationStateChange } = input;
         this.graphql = createLocalGQLClient(graphqlOrigin, initiator ? { 'x-initiator': initiator } : undefined);
         this.fetchModel = async () => {
             const payload = await this.graphql.query(GetMediaPageConfigDocument, { mediaPageId }).toPromise();
@@ -58,7 +58,7 @@ export class InternalMediaCenterDataProvider {
                         types: filter.types,
                         statuses: [Status.Published],
                         categoryId: filter.categoryId,
-                        ids: filter.includeIds,
+                        ids: filter.ids,
                         excludeIds: filter.excludeIds
                     },
                     continuationToken,
@@ -73,6 +73,7 @@ export class InternalMediaCenterDataProvider {
                     filter: {
                         mediaPageId,
                         categoryId: filter.categoryId,
+                        ids: filter.ids,
                         excludeIds: filter.excludeIds,
                         statuses: [StreamStatus.Published],
                         showInFeed: true
@@ -95,7 +96,7 @@ export class InternalMediaCenterDataProvider {
             categoriesFollowingHandler: testingStuff ? new MockCategoryFollowingProvider() : undefined,
             socialInteractionsHandler: testingStuff ? new MockPostSocialInteractionsHandler() : undefined,
             membershipHandler: testingStuff ? new MockMembershipHandler() : undefined,
-            navigationHandler: testingStuff ? new MockNavigationHandler() : undefined
+            navigationHandler: testingStuff && onNavigationStateChange ? new MockNavigationHandler(onNavigationStateChange) : undefined
         };
     }
 }

package/dist/media-center/config/types.d.ts

@@ -23,7 +23,7 @@ export interface IMediaCenterDataProvider {
             filter: {
                 types: PostType[];
                 categoryId?: string;
-                includeIds?: string[];
+                ids?: string[];
                 excludeIds?: string[];
             };
             limit: number;
@@ -37,6 +37,7 @@ export interface IMediaCenterDataProvider {
         getStreamsCursor: (input: {
             filter: {
                 categoryId?: string;
+                ids?: string[];
                 excludeIds?: string[];
             };
             limit: number;

package/dist/media-center/media-center/cmp.media-center-proxy.svelte

@@ -15,19 +15,24 @@ const context = new MediaCenterContext({
         initialized: (instance) => {
             switch (modeProps.mode) {
                 case 'posts':
-                    instance.playPostsFeed({
+                    instance.postsFeedHandler.activateWithExistingProvider({
                         dataProvider: modeProps.props.dataProvider,
                         onPostActivated: modeProps.props.onPostActivated
                     });
                     break;
                 case 'streams':
-                    instance.playStreamsFeed({
+                    instance.streamsFeedHandler.activateWithExistingProvider({
                         dataProvider: modeProps.props.dataProvider,
                         onStreamActivated: modeProps.props.onStreamActivated
                     });
                     break;
                 case 'default':
-                    instance.activateDiscover({ categoryId: null });
+                    if (settings.state) {
+                        instance.restoreState(settings.state);
+                    }
+                    else {
+                        instance.activateDiscover({ categoryId: null });
+                    }
                     break;
                 default:
                     Utils.assertUnreachable(modeProps);

package/dist/media-center/media-center/discover/community-features.svelte

@@ -110,7 +110,7 @@ const onJoinMembershipClick = () => __awaiter(void 0, void 0, void 0, function*
 .community-features {
   display: flex;
   flex-wrap: nowrap;
-  margin-top: 0.625rem;
+  margin-top: 0.25rem;
   gap: 8.125rem;
   align-items: center;
   /* Set 'container-type: inline-size;' to reference container*/
@@ -135,7 +135,7 @@ const onJoinMembershipClick = () => __awaiter(void 0, void 0, void 0, function*
 }
 .members__count {
   font-size: 0.9375rem;
-  line-height: 1;
+  line-height: 1.75rem;
   font-weight: 500;
   /* Set 'container-type: inline-size;' to reference container*/
 }
@@ -146,7 +146,7 @@ const onJoinMembershipClick = () => __awaiter(void 0, void 0, void 0, function*
 }
 .members__label {
   font-size: 0.75rem;
-  line-height: 1;
+  line-height: 1.75rem;
   font-weight: 400;
   color: var(--sc-mc-color--text-secondary);
   /* Set 'container-type: inline-size;' to reference container*/

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

@@ -11,7 +11,7 @@ export class DiscoverDataLoader {
         }
         const streamsResponse = await this.dataProvider.streamPlayer.getStreamsCursor({
             filter: { categoryId: holder.categoryId ?? undefined },
-            limit: 6,
+            limit: 5,
             continuationToken: holder.continuationToken
         });
         holder.streams = [...holder.streams, ...streamsResponse.items];
@@ -26,7 +26,7 @@ export class DiscoverDataLoader {
                 categoryId: holder.categoryId,
                 types: [PostType.ShortVideo]
             },
-            limit: 6,
+            limit: 5,
             continuationToken: holder.continuationToken
         });
         holder.shortVideos = [...holder.shortVideos, ...shortVideosResponse.items];

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

@@ -1,8 +1,7 @@
 import type { IMediaCenterDataProvider } from '../../config/types';
+import type { MediaCenterState } from '../../navigation';
 import { ShortVideosInCategory, StreamsInCategory } from './types.svelte';
 export declare class DiscoverViewHandler {
-    private readonly dataProvider;
-    private _activated;
     private _state;
     private _streamsInCategoryCache;
     private _shortVideosInCategoryCache;
@@ -10,7 +9,11 @@ export declare class DiscoverViewHandler {
     private _shortVideosInCategory;
     private _dataLoader;
     private _shortVideosLoadingDeferred;
-    constructor(dataProvider: IMediaCenterDataProvider);
+    private _callbacks;
+    constructor(data: {
+        dataProvider: IMediaCenterDataProvider;
+        on: Callbacks;
+    });
     get activated(): boolean;
     get active(): boolean;
     get loading(): boolean;
@@ -19,6 +22,7 @@ export declare class DiscoverViewHandler {
     loadMoreShortVideos: () => Promise<void>;
     activate: (data: {
         activeCategoryId: string | null;
+        activeCategoryName: string | null;
         childCategories: {
             id: string;
             name: string;
@@ -26,3 +30,7 @@ export declare class DiscoverViewHandler {
     }) => Promise<void>;
     deactivate: () => void;
 }
+type Callbacks = {
+    navigationStateChanged: (state: MediaCenterState) => void;
+};
+export {};

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

@@ -2,27 +2,27 @@ import { Deferred } from '../../../core/deferred';
 import { DiscoverDataLoader } from './data-loading';
 import { ShortVideosInCategory, StreamsInCategory } from './types.svelte';
 export class DiscoverViewHandler {
-    dataProvider;
-    _activated = $state(false);
-    _state = $state('loading');
+    _state = $state('inactive');
     _streamsInCategoryCache = $state.raw([]);
     _shortVideosInCategoryCache = $state.raw([]);
     _streamsInCategory = $state.raw(null);
     _shortVideosInCategory = $state.raw([]);
     _dataLoader;
     _shortVideosLoadingDeferred = null;
-    constructor(dataProvider) {
-        this.dataProvider = dataProvider;
-        this._dataLoader = new DiscoverDataLoader(this.dataProvider);
+    _callbacks;
+    constructor(data) {
+        const { dataProvider, on } = data;
+        this._callbacks = on;
+        this._dataLoader = new DiscoverDataLoader(dataProvider);
     }
     get activated() {
-        return this._activated;
+        return this._state !== 'inactive';
     }
     get active() {
-        return this._activated && this._state === 'ready';
+        return this._state === 'ready';
     }
     get loading() {
-        return this._activated && this._state === 'loading';
+        return this._state === 'loading';
     }
     get streamsHolder() {
         return this._streamsInCategory;
@@ -51,6 +51,10 @@ export class DiscoverViewHandler {
                 }
                 index++;
             }
+            const holdersWithContent = this._shortVideosInCategory.filter((x) => x.shortVideos.length > 0);
+            if (holdersWithContent.length === 1) {
+                await this._dataLoader.loadShortVideos(holdersWithContent[0]);
+            }
         }
         finally {
             this._shortVideosLoadingDeferred.resolve();
@@ -58,8 +62,7 @@ export class DiscoverViewHandler {
         }
     };
     activate = async (data) => {
-        const { activeCategoryId, childCategories } = data;
-        this._activated = true;
+        const { activeCategoryId, activeCategoryName, childCategories } = data;
         this._state = 'loading';
         try {
             const promises = [];
@@ -73,13 +76,22 @@ export class DiscoverViewHandler {
             if (streamsInCategory.continuationToken === undefined) {
                 promises.push(this._dataLoader.loadStreams(streamsInCategory));
             }
-            // Init short videos in categories
+            // Init short videos in child 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));
+            // Init short videos in main category
+            if (activeCategoryId) {
+                let shortVideosInCategory = this._shortVideosInCategoryCache.find((x) => x.categoryId === activeCategoryId);
+                if (!shortVideosInCategory) {
+                    shortVideosInCategory = new ShortVideosInCategory({ categoryId: activeCategoryId, categoryName: activeCategoryName || '' });
+                    this._shortVideosInCategoryCache.push(shortVideosInCategory);
+                }
+                this._shortVideosInCategory.unshift(shortVideosInCategory);
+            }
             const pushShortVideoPromise = (holder) => {
                 if (holder && holder.continuationToken === undefined) {
                     promises.push(this._dataLoader.loadShortVideos(holder));
@@ -92,10 +104,11 @@ export class DiscoverViewHandler {
         }
         finally {
             this._state = 'ready';
+            this._callbacks.navigationStateChanged({ mode: 'discover', categoryId: activeCategoryId });
         }
     };
     deactivate = () => {
-        this._activated = false;
+        this._state = 'inactive';
         this._shortVideosLoadingDeferred = null;
     };
 }

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

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

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

@@ -1,9 +1,11 @@
 import {} from '../../../core/locale';
 export class DiscoverViewLocalization {
     latestStreamsSectionTitle;
+    latestShortVideosSectionTitle;
     locale;
     constructor(locale) {
         this.latestStreamsSectionTitle = loc.streamsSectionTitle[locale];
+        this.latestShortVideosSectionTitle = loc.shortVideosSectionTitle[locale];
         this.locale = locale;
     }
 }
@@ -11,5 +13,9 @@ const loc = {
     streamsSectionTitle: {
         en: 'Latest Streams',
         no: 'Siste Streams'
+    },
+    shortVideosSectionTitle: {
+        en: 'Latest Short Videos',
+        no: 'Siste Korte Videoer'
     }
 };

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

@@ -9,54 +9,57 @@ const handler = $derived(context.discoverHandler);
 const localization = $derived(new DiscoverViewLocalization(context.locale));
 </script>
 
-{#if !handler.loading}
-  <div class="media-center-discover">
-    <div class="media-center-discover__content">
-      <Header context={context} />
-      {#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 class="media-center-discover">
+  <div class="media-center-discover__content media-center-discover__feed">
+    <Header context={context} />
+    {#if handler.streamsHolder?.streams.length}
+      <div class="media-center-discover__section">
+        <div class="media-center-discover__section-header">
+          {localization.latestStreamsSectionTitle}
         </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={context.locale}
-                    on={{ click: () => on.shortVideoSelected(item) }} />
-                {/each}
+        <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}
+    {#if !handler.loading}
+      <InfiniteScrolling loadMore={handler.loadMoreShortVideos}>
+        <div class="media-center-discover__feed">
+          {#each handler.shortVideosHolders as holder, index (holder)}
+            {#if holder.shortVideos.length}
+              <div class="media-center-discover__section">
+                <div class="media-center-discover__section-header">
+                  {holder.categoryId === context.categoriesHandler.selectedCategoryId ? localization.latestShortVideosSectionTitle : 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}
+                  class:media-center-discover__section-content--not-alone={handler.shortVideosHolders.length > 1}>
+                  {#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={context.locale}
+                      on={{ click: () => on.shortVideoSelected(item) }} />
+                  {/each}
+                </div>
               </div>
-            </div>
-          {/if}
-        </InfiniteScrolling>
-      {/each}
-    </div>
+            {/if}
+          {/each}
+        </div>
+      </InfiniteScrolling>
+    {/if}
   </div>
-{/if}
+</div>
 
 <style>@keyframes fadeIn {
   0% {
@@ -110,9 +113,6 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
   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*/
@@ -120,22 +120,42 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
 }
 @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__feed {
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+  /* 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__feed {
+    gap: 2.5rem;
+  }
+}
+@container (width < 768px) {
+  .media-center-discover__feed {
+    gap: 2rem;
+  }
+}
+@container (width < 576px) {
+  .media-center-discover__feed {
+    gap: 1.5rem;
+  }
+}
 .media-center-discover__section {
   display: flex;
   flex-direction: column;
@@ -154,11 +174,15 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
   font-size: 1.125rem;
   line-height: 1.75rem;
   font-weight: 600;
-  color: var(--sc-mc-color--text-white);
-  text-shadow: var(--sc-mc-color--text-white-shadow);
+  color: var(--sc-mc-color--text-primary);
+  text-shadow: var(--sc-mc-color--text-primary-shadow);
 }
 .media-center-discover__section-content {
   display: grid;
+  --_section-content--more-items--display: block;
+}
+.media-center-discover__section-content--not-alone {
+  --_section-content--more-items--display: none;
 }
 .media-center-discover__section-content--4 {
   gap: 1.25rem;
@@ -168,7 +192,7 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
   /* Set 'container-type: inline-size;' to reference container*/
 }
 .media-center-discover__section-content--4 :global(> :nth-child(n + 5)) {
-  display: none;
+  display: var(--_section-content--more-items--display);
 }
 @container (width < 992px) {
   .media-center-discover__section-content--4 {
@@ -176,7 +200,7 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
   .media-center-discover__section-content--4 :global(> :nth-child(n + 4)) {
-    display: none;
+    display: var(--_section-content--more-items--display);
   }
 }
 @container (width < 768px) {
@@ -188,7 +212,7 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
     display: block;
   }
   .media-center-discover__section-content--4 :global(> :nth-child(n + 5)) {
-    display: none;
+    display: var(--_section-content--more-items--display);
   }
 }
 @container (width < 576px) {
@@ -204,7 +228,7 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
   /* Set 'container-type: inline-size;' to reference container*/
 }
 .media-center-discover__section-content--5 :global(> :nth-child(n + 6)) {
-  display: none;
+  display: var(--_section-content--more-items--display);
 }
 @container (width < 992px) {
   .media-center-discover__section-content--5 {
@@ -212,7 +236,7 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
   .media-center-discover__section-content--5 :global(> :nth-child(n + 5)) {
-    display: none;
+    display: var(--_section-content--more-items--display);
   }
 }
 @container (width < 768px) {
@@ -221,7 +245,7 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
   .media-center-discover__section-content--5 :global(> :nth-child(n + 4)) {
-    display: none;
+    display: var(--_section-content--more-items--display);
   }
 }
 @container (width < 576px) {
@@ -233,6 +257,6 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
     display: block;
   }
   .media-center-discover__section-content--5 :global(> :nth-child(n + 5)) {
-    display: none;
+    display: var(--_section-content--more-items--display);
   }
 }</style>

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

@@ -11,7 +11,7 @@ let { context } = $props();
   <button
     type="button"
     class="media-center-footer__button"
-    class:media-center-footer__button--active={context.feedHandler.active}
+    class:media-center-footer__button--active={context.postsFeedHandler.activated || context.streamsFeedHandler.activated}
     onclick={() => context.playRootFeed()}>
     <Icon src={IconPhone} />
   </button>

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

@@ -142,8 +142,12 @@ const styles = $derived.by(() => {
     </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.playRootFeed()}>
-          <span class="control-button__icon" class:control-button__icon--active={context.feedHandler.active}>
+        <button
+          type="button"
+          class="control-button"
+          class:control-button--active={context.postsFeedHandler.activated || context.streamsFeedHandler.activated}
+          onclick={() => context.playRootFeed()}>
+          <span class="control-button__icon" class:control-button__icon--active={context.postsFeedHandler.activated || context.streamsFeedHandler.activated}>
             <Icon src={IconPhone} />
           </span>
           <span class="control-button__value">
@@ -177,9 +181,9 @@ const styles = $derived.by(() => {
             class:control-button--active={context.momentsFeedHandler.active}
             class:control-button--indicator={context.momentsFeedHandler.hasUnwatchedMoments}
             onclick={() => context.playMoments()}>
-          <span class="control-button__value">
-            {localization.buttons.moments}
-          </span>
+            <span class="control-button__value">
+              {localization.buttons.moments}
+            </span>
           </button>
         {/if}
         <button type="button" class="control-button" class:control-button--active={false} onclick={() => ({})}>
@@ -260,8 +264,8 @@ const styles = $derived.by(() => {
 .media-center-header {
   --_media-center-header--button-color: var(--media-center-header--button-color, var(--sc-mc-color--button-player));
   --_media-center-header--button-color--inactive: var(
-      --media-center-header--button-color--inactive,
-      rgb(from var(--_media-center-header--button-color, var(--sc-mc-color--button-player)) r g b / 60%)
+    --media-center-header--button-color--inactive,
+    rgb(from var(--_media-center-header--button-color, var(--sc-mc-color--button-player)) r g b / 60%)
   );
   --_media-center-header--button-indicator: var(--media-center-header--button-indicator, var(--sc-mc-color--icon-success));
   padding-top: 2.1875rem;