@streamscloud/embeddable 12.1.0 → 13.0.0

package/dist/media-center/media-center/{cmp.media-center.svelte → media-center-view.svelte}

@@ -11,46 +11,14 @@ import { Utils } from '../../core/utils';
 import { default as PostsPlayerView } from '../../posts/posts-player/posts-player-view.svelte';
 import { default as StreamsPlayerView } from '../../streams/streams-player/streams-player-view.svelte';
 import { Loading } from '../../ui/loading';
-import { WithBackground } from '../../ui/with-background';
 import { DiscoverPanel } from './discover';
-import { MediaCenterHeader, MediaCenterFooter, MediaCenterHeaderMobile } from './header-footer';
+import { MediaCenterFooter } from './footer';
+import { MediaCenterHeader, MediaCenterHeaderMobile } from './header';
 import { MediaCenterContext } from './media-center-context.svelte';
 import { Menu } from './menu';
 import { StreamsInCategoryPanel } from './streams-in-category';
 import { fade } from 'svelte/transition';
-let { config, modeProps, settings, closeOrchestrator } = $props();
-const context = new MediaCenterContext({
-    config,
-    closeOrchestrator,
-    settings,
-    on: {
-        initialized: (instance) => {
-            switch (modeProps.mode) {
-                case 'posts':
-                    instance.playPostsFeed({
-                        dataProvider: modeProps.props.dataProvider,
-                        onPostActivated: modeProps.props.onPostActivated
-                    });
-                    break;
-                case 'streams':
-                    instance.playStreamsFeed({
-                        dataProvider: modeProps.props.dataProvider,
-                        onStreamActivated: modeProps.props.onStreamActivated
-                    });
-                    break;
-                case 'discover':
-                    instance.activateDiscover({ categoryId: null });
-                    break;
-                default:
-                    Utils.assertUnreachable(modeProps);
-            }
-        },
-        failed: () => {
-            console.error('Media Center initialization failed');
-            closeOrchestrator.requestClose();
-        }
-    }
-});
+let { context, dynamicActions } = $props();
 let headerHeight = $state(0);
 let isMobileView = $state(false);
 const selectCategory = (categoryId) => __awaiter(void 0, void 0, void 0, function* () {
@@ -76,6 +44,9 @@ const selectCategory = (categoryId) => __awaiter(void 0, void 0, void 0, functio
         case 'discover':
             context.activateDiscover({ categoryId });
             break;
+        case 'moments':
+            context.playPostsFeed({ filter: { categoryId } });
+            break;
         default:
             Utils.assertUnreachable(context.mediaCenterMode);
     }
@@ -108,7 +79,7 @@ const swipeToOpen = (node) => {
     let startY = 0;
     let isTracking = false;
     let hasOpened = false;
-    let threshold = 60;
+    let threshold = 50;
     const MIN_DISTANCE = 10;
     function handleTouchStart(e) {
         if (e.touches.length !== 1) {
@@ -159,67 +130,63 @@ const swipeToOpen = (node) => {
 };
 </script>
 
-{#if context.initializing}
-  <Loading positionFixedCenter={true} timeout={600} />
-{:else if !context.initialized}
-  Not initialized placeholder
-{:else}
-  <WithBackground {...context.backgroundWrapperProps}>
-    <div class="media-center" use:onWidthAnchorMounted>
-      {#if !isMobileView}
-        <MediaCenterHeader context={context} locale={settings?.locale} on={{ headerHeightChanged: onHeaderHeightChanged }} />
-      {:else}
-        <MediaCenterHeaderMobile context={context} on={{ headerHeightChanged: onHeaderHeightChanged }} />
-      {/if}
+<div class="media-center" use:onWidthAnchorMounted>
+  <div class="media-center__header-and-content">
+    {#if !isMobileView}
+      <MediaCenterHeader context={context} dynamicActions={dynamicActions} on={{ headerHeightChanged: onHeaderHeightChanged }} />
+    {:else}
+      <MediaCenterHeaderMobile context={context} on={{ headerHeightChanged: onHeaderHeightChanged }} />
+    {/if}
 
-      <div class="media-center__content-container">
-        {#if context.mediaCenterMode === 'feed' && context.feedPlayerProps}
-          <div class="media-center__content" class:media-center__content--faded={context.overlayIsActive} transition:fade={{ duration: 300 }}>
-            {#if context.feedPlayerProps.type === 'posts'}
-              <PostsPlayerView {...context.feedPlayerProps.props} />
-            {:else if context.feedPlayerProps.type === 'streams'}
-              <StreamsPlayerView {...context.feedPlayerProps.props} />
-            {/if}
-          </div>
-        {:else if context.mediaCenterMode === 'discover'}
-          <div class="media-center__content" transition:fade={{ duration: 300 }}>
-            <DiscoverPanel
-              context={context}
-              locale={settings?.locale}
-              on={{
-                shortVideoSelected: (shortVideo) => activateSelectedShortVideoPlayer(shortVideo),
-                streamSelected: (stream) => activateSelectedStreamPlayer(stream)
-              }} />
-          </div>
-        {/if}
-      </div>
-      {#if context.loading}
-        <Loading positionFixedCenter={true} timeout={600} />
-      {/if}
-
-      {#if context.streamsInCategoryHandler.active}
-        <div class="media-center-overlay" class:media-center-overlay--mobile={isMobileView} style={`top:${headerHeight}px`} transition:fade={{ duration: 300 }}>
-          <StreamsInCategoryPanel
-            handler={context.streamsInCategoryHandler}
-            on={{ streamSelected: (id, categoryId, streams) => activateSelectedStreamOfCategoryPlayer(id, streams, categoryId) }} />
+    <div class="media-center__content-container" use:swipeToOpen>
+      {#if context.mediaCenterMode === 'feed' && context.feedPlayerProps}
+        <div class="media-center__content" class:media-center__content--faded={context.overlayIsActive} transition:fade={{ duration: 300 }}>
+          {#if context.feedPlayerProps.type === 'posts'}
+            <PostsPlayerView {...context.feedPlayerProps.props} />
+          {:else if context.feedPlayerProps.type === 'streams'}
+            <StreamsPlayerView {...context.feedPlayerProps.props} />
+          {/if}
+        </div>
+      {:else if context.mediaCenterMode === 'discover'}
+        <div class="media-center__content" transition:fade={{ duration: 300 }}>
+          <DiscoverPanel
+            context={context}
+            on={{
+              shortVideoSelected: (shortVideo) => activateSelectedShortVideoPlayer(shortVideo),
+              streamSelected: (stream) => activateSelectedStreamPlayer(stream)
+            }} />
+        </div>
+      {:else if context.mediaCenterMode === 'moments' && context.momentsPlayerProps}
+        <div class="media-center__content" class:media-center__content--faded={context.overlayIsActive} transition:fade={{ duration: 300 }}>
+          <PostsPlayerView {...context.momentsPlayerProps} />
         </div>
       {/if}
+    </div>
 
-      {#if context.menuActive}
-        <div class="menu-overlay" class:menu-overlay--mobile={isMobileView} onclick={context.hideMenu} onkeydown={() => {}} role="none">
-          <div class="menu-overlay__panel">
-            <Menu context={context} locale={settings?.locale} on={{ categorySelected: selectCategory, streamSelected: activateSelectedStreamPlayer }} />
-          </div>
+    {#if context.menuActive}
+      <div class="menu-overlay" class:menu-overlay--mobile={isMobileView} onclick={context.hideMenu} onkeydown={() => {}} role="none">
+        <div class="menu-overlay__panel">
+          <Menu context={context} on={{ categorySelected: selectCategory, streamSelected: activateSelectedStreamPlayer }} />
         </div>
-      {:else}
-        <div class="menu-swipe-area" use:swipeToOpen>&nbsp;</div>
-      {/if}
-      {#if isMobileView}
-        <MediaCenterFooter context={context} />
-      {/if}
+      </div>
+    {/if}
+  </div>
+  {#if context.loading}
+    <Loading positionFixedCenter={true} timeout={600} />
+  {/if}
+
+  {#if context.streamsInCategoryHandler.active}
+    <div class="media-center-overlay" class:media-center-overlay--mobile={isMobileView} style={`top:${headerHeight}px`} transition:fade={{ duration: 300 }}>
+      <StreamsInCategoryPanel
+        handler={context.streamsInCategoryHandler}
+        on={{ streamSelected: (id, categoryId, streams) => activateSelectedStreamOfCategoryPlayer(id, streams, categoryId) }} />
     </div>
-  </WithBackground>
-{/if}
+  {/if}
+
+  {#if isMobileView}
+    <MediaCenterFooter context={context} />
+  {/if}
+</div>
 
 <style>@keyframes fadeIn {
   0% {
@@ -243,6 +210,13 @@ const swipeToOpen = (node) => {
   flex-direction: column;
   position: relative;
 }
+.media-center__header-and-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  position: relative;
+}
 .media-center__content-container {
   flex: 1;
   min-height: 0;
@@ -301,26 +275,9 @@ const swipeToOpen = (node) => {
 }
 .menu-overlay--mobile {
   right: 0;
-  bottom: 6.25rem;
 }
 .menu-overlay__panel {
   width: 17.5rem;
   height: 100%;
   max-height: 100%;
-}
-
-.menu-swipe-area {
-  display: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 1.875rem;
-  height: 100%;
-  z-index: 1;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .menu-swipe-area {
-    display: block;
-  }
 }</style>

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

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

package/dist/media-center/media-center/menu/category-following-wrapper.svelte.d.ts

@@ -2,7 +2,7 @@ import type { MediaCenterContext } from '../media-center-context.svelte';
 import { type Snippet } from 'svelte';
 type Props = {
     categoryId: string;
-    followingHandler?: MediaCenterContext['categoryFollowingHandler'];
+    followingHandler?: MediaCenterContext['categoriesFollowingHandler'];
     children: Snippet;
     invertedOrientation?: boolean;
 };

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

@@ -10,9 +10,9 @@ import { MenuLocalization } from './menu-localization';
 import IconChevronDownFilled from '@fluentui/svg-icons/icons/chevron_down_20_filled.svg?raw';
 import IconChevronRightFilled from '@fluentui/svg-icons/icons/chevron_right_20_filled.svg?raw';
 import { slide } from 'svelte/transition';
-let { context, locale = 'en', on } = $props();
-const localization = $derived(new MenuLocalization(locale));
-const target = $derived.by(() => context.targetData);
+let { context, on } = $props();
+const localization = $derived(new MenuLocalization(context.locale));
+const target = $derived.by(() => context.model);
 const generateCategoriesMap = () => {
     const expanded = {};
     context.categoriesHandler.categoriesGrouped.forEach((c) => {
@@ -23,15 +23,15 @@ const generateCategoriesMap = () => {
     return expanded;
 };
 const categoriesExpandedMap = $state(generateCategoriesMap());
+const indicateActiveCategory = $derived(context.mediaCenterMode !== 'moments');
 const handleCategoryExpaned = (e, categoryId) => {
     e.stopPropagation();
     categoriesExpandedMap[categoryId] = !categoriesExpandedMap[categoryId];
 };
 const styles = $derived.by(() => {
-    var _a;
     const values = [];
-    if ((_a = context.playerColors) === null || _a === void 0 ? void 0 : _a.menuBackground) {
-        values.push(`--media-center-menu--background-color: ${context.playerColors.menuBackground}`);
+    if (context.mediaCenterColors.menuBackground) {
+        values.push(`--media-center-menu--background-color: ${context.mediaCenterColors.menuBackground}`);
     }
     return values.join(';');
 });
@@ -45,18 +45,18 @@ const styles = $derived.by(() => {
       </div>
       <div class="media-center-target__info">
         <div class="media-center-target__name">
-          <LineClamp maxLines={1} locale={locale}>
+          <LineClamp maxLines={1} locale={context.locale}>
             {target.name}
           </LineClamp>
         </div>
-        {#if target.membersCount}
-          <LineClamp maxLines={1} locale={locale}>
+        {#if target.communityFeatures && target.communityFeatures.membersCount}
+          <LineClamp maxLines={1} locale={context.locale}>
             <div class="media-center-target__members">
               <span class="media-center-target__members-count">
-                {compactNumber(target.membersCount, { locale: localization.locale })}
+                {compactNumber(target.communityFeatures.membersCount, { locale: localization.locale })}
               </span>
               <span class="media-center-target__members-label">
-                {localization.membersLabel(target.membersCount)}
+                {localization.membersLabel(target.communityFeatures.membersCount)}
               </span>
             </div>
           </LineClamp>
@@ -70,27 +70,26 @@ const styles = $derived.by(() => {
     </div>
     <div class="media-center-menu__tree">
       <div class="media-center-menu__tree-item">
-        <div class="menu-item">
-          <div class="menu-item__value">
-            <div
-              class="menu-item__text"
-              class:menu-item__text--active={!context.categoriesHandler.selectedCategoryId}
-              onclick={() => context.playRootFeed()}
-              onkeydown={() => {}}
-              role="button"
-              tabindex="0">
+        <div class="menu-item" class:menu-item--active={!context.categoriesHandler.selectedCategoryId}>
+          <div class="menu-item__content" onclick={() => context.playRootFeed()} onkeydown={() => {}} role="button" tabindex="0">
+            <div class="menu-item__text" class:menu-item__text--active={!context.categoriesHandler.selectedCategoryId}>
               {context.mediaCenterMode === 'discover' ? localization.discoverLabel : localization.feedLabel}
             </div>
           </div>
         </div>
       </div>
       {#snippet categoryItem(category: { type: 'main'; value: MediaCenterCategoryModel } | { type: 'child'; value: MediaCenterSubCategoryModel })}
-        <div class="menu-item" class:menu-item--child={category.type === 'child'}>
-          <div class="menu-item__value" onclick={() => on.categorySelected(category.value.id)} onkeydown={() => {}} role="button" tabindex="0">
+        <div
+          class="menu-item"
+          class:menu-item--child={category.type === 'child'}
+          class:menu-item--active={context.categoriesHandler.selectedCategoryId === category.value.id && indicateActiveCategory}>
+          <div class="menu-item__content" onclick={() => on.categorySelected(category.value.id)} onkeydown={() => {}} role="button" tabindex="0">
             <div class="menu-item__image">
               <ImageRound src={category.value.image} noBorders={true} />
             </div>
-            <div class="menu-item__text" class:menu-item__text--active={context.categoriesHandler.selectedCategoryId === category.value.id}>
+            <div
+              class="menu-item__text"
+              class:menu-item__text--active={context.categoriesHandler.selectedCategoryId === category.value.id && indicateActiveCategory}>
               {category.value.name}
             </div>
             {#if category.value.tag}
@@ -99,7 +98,7 @@ const styles = $derived.by(() => {
               </div>
             {/if}
           </div>
-          <ButtonWrapper categoryId={category.value.id} followingHandler={context.categoryFollowingHandler} invertedOrientation={true}>
+          <ButtonWrapper categoryId={category.value.id} followingHandler={context.categoriesFollowingHandler} invertedOrientation={true}>
             <button
               type="button"
               class="menu-item__collapser"
@@ -155,7 +154,8 @@ const styles = $derived.by(() => {
   }
 }
 .media-center-menu {
-  --_media-center-menu--background-color: var(--media-center-menu--background-color, rgb(from #000000 r g b / 95%));
+  --_media-center-menu--background-color: var(--media-center-menu--background-color, rgb(from var(--sc-mc-color--bg-panel) r g b / 95%));
+  --_media-center-menu--items--padding-inline: 0.625rem;
   background: var(--_media-center-menu--background-color);
   height: 100%;
   min-height: 100%;
@@ -167,8 +167,7 @@ const styles = $derived.by(() => {
   gap: 1.25rem;
   flex-direction: column;
   min-height: 0;
-  padding: 0.9375rem 1.25rem;
-  padding-right: 0.75rem;
+  padding: 0.9375rem 0.375rem;
   border-radius: 0 1rem 1rem 0;
 }
 .media-center-menu__content {
@@ -208,7 +207,8 @@ const styles = $derived.by(() => {
   font-size: 1.125rem;
   line-height: 1.75rem;
   font-weight: 500;
-  color: #ffffff;
+  color: var(--sc-mc-color--text-primary);
+  padding-inline: var(--_media-center-menu--items--padding-inline);
 }
 .media-center-menu__tree {
   display: flex;
@@ -227,7 +227,7 @@ const styles = $derived.by(() => {
   flex-direction: column;
   gap: 1rem;
   padding-top: 1.25rem;
-  padding-right: 0.5rem;
+  padding-inline: var(--_media-center-menu--items--padding-inline);
 }
 .media-center-menu__popular-streams {
   display: grid;
@@ -240,19 +240,24 @@ const styles = $derived.by(() => {
   -webkit-user-drag: none;
   user-select: none;
   height: 2.25rem;
+  padding-left: var(--_media-center-menu--items--padding-inline);
   --_menu-item--text--font-size: 0.9375rem;
   --_menu-item--image--size: 1.5rem;
 }
 .menu-item :global([contenteditable]) {
   user-select: text;
 }
+.menu-item--active {
+  background-color: hsl(from var(--_media-center-menu--background-color) h s calc(l + 5)/alpha);
+  border-radius: 0.25rem;
+}
 .menu-item--child {
   height: 2.125rem;
   padding-left: 1.25rem;
   --_menu-item--text--font-size: 0.875rem;
   --_menu-item--image--size: 1.375rem;
 }
-.menu-item__value {
+.menu-item__content {
   display: flex;
   align-items: center;
   flex: 1;
@@ -270,7 +275,7 @@ const styles = $derived.by(() => {
 }
 .menu-item__text {
   max-width: 100%;
-  color: #ffffff;
+  color: var(--sc-mc-color--text-primary);
   font-size: var(--_menu-item--text--font-size);
   font-weight: 400;
   text-align: left;
@@ -288,7 +293,6 @@ const styles = $derived.by(() => {
 }
 .menu-item__tag {
   height: min-content;
-  width: min-content;
   border-radius: 0.25rem;
   padding: 0.3125rem 0.375rem;
   font-size: 0.5rem;
@@ -297,7 +301,7 @@ const styles = $derived.by(() => {
   margin-left: 0.25rem;
 }
 .menu-item__collapser {
-  --icon--color: #ffffff;
+  --icon--color: var(--sc-mc-color--text-primary);
   --icon--size: 1rem;
   padding: 0.5rem;
 }
@@ -309,6 +313,7 @@ const styles = $derived.by(() => {
   display: flex;
   align-items: center;
   gap: 0.9375rem;
+  padding-inline: var(--_media-center-menu--items--padding-inline);
 }
 .media-center-target__image {
   width: 3.5rem;
@@ -321,7 +326,7 @@ const styles = $derived.by(() => {
 .media-center-target__info {
   display: flex;
   flex-direction: column;
-  color: #ffffff;
+  color: var(--sc-mc-color--text-primary);
 }
 .media-center-target__name {
   font-size: 1.125rem;
@@ -342,5 +347,5 @@ const styles = $derived.by(() => {
   font-size: 0.75rem;
   line-height: 1;
   font-weight: 400;
-  color: #d1d5db;
+  color: var(--sc-mc-color--text-secondary);
 }</style>

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

@@ -1,9 +1,7 @@
-import type { Locale } from '../../../core/locale';
 import type { StreamPlayerModel } from '../../../streams/streams-player';
 import type { MediaCenterContext } from '../media-center-context.svelte';
 type Props = {
     context: MediaCenterContext;
-    locale?: Locale;
     on: {
         categorySelected: (categoryId: string) => void;
         streamSelected: (stream: StreamPlayerModel) => void;

package/dist/media-center/media-center/menu/popular-streams-panel-handler.svelte.d.ts

@@ -1,10 +1,10 @@
-import type { IMediaCenterConfig } from '../..';
+import type { IMediaCenterDataProvider } from '../..';
 import type { StreamPlayerModel } from '../../../streams/streams-player/types';
 export declare class PopularStreamsPanelHandler {
-    private readonly config;
+    private readonly dataProvider;
     private _state;
     private _streams;
-    constructor(config: IMediaCenterConfig);
+    constructor(dataProvider: IMediaCenterDataProvider);
     get streamSectionItems(): StreamPlayerModel[];
     init: () => Promise<void>;
 }

package/dist/media-center/media-center/menu/popular-streams-panel-handler.svelte.js

@@ -1,9 +1,9 @@
 export class PopularStreamsPanelHandler {
-    config;
+    dataProvider;
     _state = $state('not-initialized');
     _streams = $state.raw([]);
-    constructor(config) {
-        this.config = config;
+    constructor(dataProvider) {
+        this.dataProvider = dataProvider;
     }
     get streamSectionItems() {
         return this._streams;
@@ -12,7 +12,7 @@ export class PopularStreamsPanelHandler {
         if (this._state === 'not-initialized') {
             this._state = 'loading';
             try {
-                const streamsResponse = await this.config.streamPlayer.getStreamsCursor({ filter: {}, limit: 2 });
+                const streamsResponse = await this.dataProvider.streamPlayer.getStreamsCursor({ filter: {}, limit: 2 });
                 this._streams = streamsResponse.items;
             }
             finally {

package/dist/media-center/media-center/moments/cmp.moments-circle.svelte

@@ -1,18 +1,30 @@
 <script lang="ts">import { ImageRound } from '../../../ui/image';
 let { context } = $props();
+const handler = context.momentsFeedHandler;
 const styles = $derived.by(() => {
-    var _a;
     const values = [];
-    if ((_a = context.playerColors) === null || _a === void 0 ? void 0 : _a.brand) {
-        values.push(`--moments-circle--brand-color: ${context.playerColors.brand}`);
+    if (context.mediaCenterColors.brand) {
+        values.push(`--moments-circle--brand-color: ${context.mediaCenterColors.brand}`);
     }
     return values.join(';');
 });
+const handleClick = () => {
+    if (!handler.hasMoments) {
+        return;
+    }
+    context.playMoments();
+};
 </script>
 
-<div class="moments-circle" style={styles}>
-  {#if context.targetData}
-    <ImageRound src={context.targetData.image} />
+<div
+  class="moments-circle"
+  class:moments-circle--clickable={handler.hasMoments}
+  class:moments-circle--has-unwatched={handler.hasUnwatchedMoments}
+  style={styles}
+  onclick={handleClick}
+  role="none">
+  {#if context.model}
+    <ImageRound src={context.model.image} noBorders={!handler.hasUnwatchedMoments} />
   {/if}
 </div>
 
@@ -28,14 +40,19 @@ const styles = $derived.by(() => {
   }
 }
 .moments-circle {
-  --_moments-circle--brand-color: var(--moments-circle--brand-color, #00b8d8);
+  --_moments-circle--brand-color: var(--moments-circle--brand-color, var(--sc-mc-color--border-brand));
   width: 6.25%rem;
   min-width: 6.25%rem;
   max-width: 6.25%rem;
   height: 6.25%rem;
   min-height: 6.25%rem;
   max-height: 6.25%rem;
+}
+.moments-circle--has-unwatched {
   --image--rounded--inner--border-width: 1px;
   --image--rounded--outer--border-color: var(--_moments-circle--brand-color);
   --image--rounded--outer--border-width: 2px;
+}
+.moments-circle--clickable {
+  cursor: pointer;
 }</style>

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

@@ -1 +1,2 @@
 export { default as MomentsCircle } from './cmp.moments-circle.svelte';
+export { MomentsFeedHandler } from './moments-feed-handler.svelte';

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

@@ -1 +1,2 @@
 export { default as MomentsCircle } from './cmp.moments-circle.svelte';
+export { MomentsFeedHandler } from './moments-feed-handler.svelte';

package/dist/media-center/media-center/moments/moments-feed-handler.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { IMediaCenterDataProvider } from '../..';
+import type { PostsPlayerProps } from '../../../posts/posts-player/types';
+import type { ICloseOrchestrator } from '../../../ui/player/close-orchestrator';
+import { MomentsState } from './moments-state.svelte';
+import { MediaCenterSettingsHandler } from '../handlers';
+export declare class MomentsFeedHandler {
+    momentsState: MomentsState;
+    private _active;
+    private _momentsPlayerProps;
+    private _dataProvider;
+    private _mediaCenterSettingsHandler;
+    private _closeOrchestrator;
+    private _onPlayerReachedEnd;
+    constructor(data: {
+        dataProvider: IMediaCenterDataProvider;
+        mediaCenterSettingsHandler: MediaCenterSettingsHandler;
+        closeOrchestrator: ICloseOrchestrator;
+        onPlayerReachedEnd: () => void;
+    });
+    get active(): boolean;
+    get momentsPlayerProps(): PostsPlayerProps | null;
+    get hasUnwatchedMoments(): boolean;
+    get hasMoments(): boolean;
+    deactivate: () => void;
+    activateMoments: () => Promise<void>;
+}

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

@@ -0,0 +1,49 @@
+import { initBufferFromProvider } from '../../../ui/player/providers/service';
+import { MomentsState } from './moments-state.svelte';
+import { MediaCenterSettingsHandler } from '../handlers';
+export class MomentsFeedHandler {
+    momentsState;
+    _active = $state(false);
+    _momentsPlayerProps = $state.raw(null);
+    _dataProvider;
+    _mediaCenterSettingsHandler;
+    _closeOrchestrator;
+    _onPlayerReachedEnd;
+    constructor(data) {
+        const { dataProvider, mediaCenterSettingsHandler, closeOrchestrator, onPlayerReachedEnd } = data;
+        this.momentsState = new MomentsState(dataProvider);
+        this._mediaCenterSettingsHandler = mediaCenterSettingsHandler;
+        this._dataProvider = dataProvider;
+        this._closeOrchestrator = closeOrchestrator;
+        this._onPlayerReachedEnd = onPlayerReachedEnd;
+    }
+    get active() {
+        return this._active;
+    }
+    get momentsPlayerProps() {
+        return this._momentsPlayerProps;
+    }
+    get hasUnwatchedMoments() {
+        return this.momentsState.unwatchedMoments.length > 0;
+    }
+    get hasMoments() {
+        return this.momentsState.allMoments.length > 0;
+    }
+    deactivate = () => {
+        this._active = false;
+    };
+    activateMoments = async () => {
+        this._momentsPlayerProps = {
+            dataProvider: { type: 'buffer', buffer: initBufferFromProvider(this.momentsState.generatePlayerDataProvider(this._onPlayerReachedEnd)) },
+            socialInteractionsHandler: this._dataProvider.handlers?.socialInteractionsHandler,
+            analyticsHandler: this._dataProvider.handlers?.analyticsHandler,
+            playerSettings: this._mediaCenterSettingsHandler.playerSettings,
+            closeOrchestrator: this._closeOrchestrator,
+            on: {
+                postActivated: (id) => this.momentsState.markMomentAsSeen(id),
+                backgroundImageLoaded: this._mediaCenterSettingsHandler.backgroundImageLoadedHandler
+            }
+        };
+        this._active = true;
+    };
+}