@streamscloud/embeddable 11.0.0 → 12.1.0

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

@@ -7,137 +7,91 @@
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var _a;
 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 { MediaCenterContext } from './media-center-context.svelte.js';
+import { MediaCenterContext } from './media-center-context.svelte';
 import { Menu } from './menu';
-import { makePostPlayerItemsProvider, makeStreamsPlayerDataProvider } from './providers';
 import { StreamsInCategoryPanel } from './streams-in-category';
 import { fade } from 'svelte/transition';
-let { config, playerProps, locale = 'en' } = $props();
-const enhancedPlayerSettings = () => {
-    const playerSettings = playerProps.mode === 'discover' ? {} : Object.assign({}, playerProps.props.playerSettings);
-    playerSettings.playerColors = context.playerColors;
-    return playerSettings;
-};
-const commonPlayerProps = () => {
-    return {
-        playerSettings: enhancedPlayerSettings(),
-        on: playerProps.mode !== 'discover' ? playerProps === null || playerProps === void 0 ? void 0 : playerProps.props.on : undefined
-    };
-};
-const mapToMediaCenterMode = (propsMode) => {
-    switch (propsMode) {
-        case 'posts':
-            return 'posts-feed';
-        case 'streams':
-            return 'streams-feed';
-        case 'discover':
-            return 'discover';
-        default:
-            return Utils.assertUnreachable(propsMode);
-    }
-};
-let mediaCenterMode = $state(mapToMediaCenterMode(playerProps.mode));
+let { config, modeProps, settings, closeOrchestrator } = $props();
 const context = new MediaCenterContext({
     config,
-    followingHandler: (_a = config === null || config === void 0 ? void 0 : config.handlers) === null || _a === void 0 ? void 0 : _a.categoriesFollowingHandler,
+    closeOrchestrator,
+    settings,
     on: {
-        initialized: () => {
-            switch (mediaCenterMode) {
-                case 'posts-feed':
-                    context.activateFeed({ categoryId: null });
+        initialized: (instance) => {
+            switch (modeProps.mode) {
+                case 'posts':
+                    instance.playPostsFeed({
+                        dataProvider: modeProps.props.dataProvider,
+                        onPostActivated: modeProps.props.onPostActivated
+                    });
                     break;
-                case 'streams-feed':
-                    context.activateFeed({ categoryId: null });
+                case 'streams':
+                    instance.playStreamsFeed({
+                        dataProvider: modeProps.props.dataProvider,
+                        onStreamActivated: modeProps.props.onStreamActivated
+                    });
                     break;
                 case 'discover':
-                    context.activateDiscover();
+                    instance.activateDiscover({ categoryId: null });
                     break;
                 default:
-                    Utils.assertUnreachable(mediaCenterMode);
+                    Utils.assertUnreachable(modeProps);
             }
+        },
+        failed: () => {
+            console.error('Media Center initialization failed');
+            closeOrchestrator.requestClose();
         }
     }
 });
 let headerHeight = $state(0);
-let computedPlayerProps = $state.raw(playerProps);
 let isMobileView = $state(false);
-let closeFn = $state.raw(null);
 const selectCategory = (categoryId) => __awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b;
-    if (!config) {
-        return;
-    }
-    switch (mediaCenterMode) {
-        case 'posts-feed':
-            if (context.categoriesHandler.selectedCategoryId === categoryId) {
-                context.activateFeed();
+    switch (context.mediaCenterMode) {
+        case 'feed':
+            if (!context.feedPlayerProps) {
                 return;
             }
-            computedPlayerProps = {
-                mode: 'posts',
-                props: Object.assign({ dataProvider: makePostPlayerItemsProvider({ config, categoryId }), socialInteractionsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.socialInteractionsHandler, analyticsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.analyticsHandler }, commonPlayerProps())
-            };
-            context.activateFeed({ categoryId });
-            break;
-        case 'streams-feed':
-            context.tryActivateStreamsInCategory(categoryId);
+            switch (context.feedPlayerProps.type) {
+                case 'posts':
+                    if (context.categoriesHandler.selectedCategoryId === categoryId) {
+                        return;
+                    }
+                    context.playPostsFeed({ filter: { categoryId } });
+                    break;
+                case 'streams':
+                    context.tryActivateStreamsInCategory(categoryId);
+                    return;
+                default:
+                    Utils.assertUnreachable(context.feedPlayerProps);
+            }
             break;
         case 'discover':
-            console.warn('Apply category filter for discover mode is not implemented yet');
+            context.activateDiscover({ categoryId });
             break;
         default:
-            Utils.assertUnreachable(mediaCenterMode);
+            Utils.assertUnreachable(context.mediaCenterMode);
     }
 });
 const activateSelectedShortVideoPlayer = (shortVideo) => {
-    var _a, _b;
-    if (!config) {
-        return;
-    }
-    mediaCenterMode = 'posts-feed';
-    computedPlayerProps = {
-        mode: 'posts',
-        props: Object.assign({ dataProvider: makePostPlayerItemsProvider({ config, prefetchedItems: [shortVideo] }), socialInteractionsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.socialInteractionsHandler, analyticsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.analyticsHandler }, commonPlayerProps())
-    };
-    context.activateFeed({ categoryId: null });
+    context.playPostsFeed({ filter: { prefetchedItems: [shortVideo] } });
 };
 const activateSelectedStreamPlayer = (stream) => {
-    var _a, _b;
-    if (!config) {
-        return;
-    }
-    mediaCenterMode = 'streams-feed';
-    computedPlayerProps = {
-        mode: 'streams',
-        props: Object.assign({ dataProvider: makeStreamsPlayerDataProvider({ config, prefetchedStreams: [stream] }), analyticsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.analyticsHandler, postSocialInteractionsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.socialInteractionsHandler }, commonPlayerProps())
-    };
-    context.activateFeed({ categoryId: null });
+    context.playStreamsFeed({ filter: { prefetchedStreams: [stream] } });
 };
 const activateSelectedStreamOfCategoryPlayer = (id, prefetchedStreams, categoryId) => {
-    var _a, _b;
-    if (!config) {
-        return;
-    }
-    mediaCenterMode = 'streams-feed';
-    computedPlayerProps = {
-        mode: 'streams',
-        props: Object.assign({ dataProvider: makeStreamsPlayerDataProvider({ config, prefetchedStreams: prefetchedStreams, initialStreamId: id, categoryId }), analyticsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.analyticsHandler, postSocialInteractionsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.socialInteractionsHandler }, commonPlayerProps())
-    };
-    context.activateFeed();
+    context.playStreamsFeed({ filter: { categoryId, prefetchedStreams, initialStreamId: id } });
 };
 const onHeaderHeightChanged = (height) => {
     headerHeight = height;
 };
-const handlePlayerInitialized = (data) => {
-    closeFn = data.closePlayerFn;
-};
 const onWidthAnchorMounted = (node) => {
     const resizeObserver = new ResizeObserver(() => {
         isMobileView = node.clientWidth <= 576;
@@ -149,74 +103,122 @@ const onWidthAnchorMounted = (node) => {
         }
     };
 };
+const swipeToOpen = (node) => {
+    let startX = 0;
+    let startY = 0;
+    let isTracking = false;
+    let hasOpened = false;
+    let threshold = 60;
+    const MIN_DISTANCE = 10;
+    function handleTouchStart(e) {
+        if (e.touches.length !== 1) {
+            return;
+        }
+        const touch = e.touches[0];
+        startX = touch.clientX;
+        startY = touch.clientY;
+        isTracking = true;
+        hasOpened = false;
+    }
+    function handleTouchMove(e) {
+        if (!isTracking || hasOpened) {
+            return;
+        }
+        const touch = e.touches[0];
+        const dx = touch.clientX - startX;
+        const dy = touch.clientY - startY;
+        if (Math.abs(dx) < MIN_DISTANCE && Math.abs(dy) < MIN_DISTANCE) {
+            return;
+        }
+        if (Math.abs(dy) > Math.abs(dx)) {
+            isTracking = false;
+            return;
+        }
+        if (dx < 0) {
+            isTracking = false;
+            return;
+        }
+        if (dx > threshold) {
+            hasOpened = true;
+            context.showMenu();
+        }
+    }
+    function handleTouchEnd() {
+        isTracking = false;
+    }
+    node.addEventListener('touchstart', handleTouchStart, { passive: true });
+    node.addEventListener('touchmove', handleTouchMove, { passive: true });
+    node.addEventListener('touchend', handleTouchEnd);
+    return {
+        destroy() {
+            node.removeEventListener('touchstart', handleTouchStart);
+            node.removeEventListener('touchmove', handleTouchMove);
+            node.removeEventListener('touchend', handleTouchEnd);
+        }
+    };
+};
 </script>
 
 {#if context.initializing}
   <Loading positionFixedCenter={true} timeout={600} />
+{:else if !context.initialized}
+  Not initialized placeholder
 {:else}
-  {#snippet mobileFooter()}
-    <MediaCenterFooter context={context} />
-  {/snippet}
-  {#snippet header()}
-    {#if !isMobileView}
-      <MediaCenterHeader context={context} closeFn={closeFn} locale={locale} on={{ headerHeightChanged: onHeaderHeightChanged }} />
-    {:else}
-      <MediaCenterHeaderMobile context={context} closeFn={closeFn} on={{ headerHeightChanged: onHeaderHeightChanged }} />
-    {/if}
-  {/snippet}
-  {#if computedPlayerProps.mode === 'posts'}
-    <PostsPlayerView
-      {...computedPlayerProps.props}
-      playerSettings={enhancedPlayerSettings()}
-      mediaCenterData={{
-        header: context.mediaCenterEffective ? header : undefined,
-        mobileFooter: isMobileView ? mobileFooter : undefined,
-        overlayIsActive: context.overlayIsActive,
-        callbacks: { onPlayerInitialized: handlePlayerInitialized }
-      }} />
-  {:else if computedPlayerProps.mode === 'streams'}
-    <StreamsPlayerView
-      {...computedPlayerProps.props}
-      playerSettings={enhancedPlayerSettings()}
-      mediaCenterData={{
-        header: context.mediaCenterEffective ? header : undefined,
-        mobileFooter: isMobileView ? mobileFooter : undefined,
-        overlayIsActive: context.overlayIsActive,
-        callbacks: { onPlayerInitialized: handlePlayerInitialized }
-      }} />
-  {/if}
-  {#if context.loading}
-    <Loading positionFixedCenter={true} timeout={600} />
-  {/if}
+  <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}
 
-  {#if context.discoverHandler.active}
-    <div class="media-center-overlay" class:media-center-overlay--mobile={isMobileView} style={`top:${headerHeight}px`} transition:fade={{ duration: 300 }}>
-      <DiscoverPanel
-        context={context}
-        locale={locale}
-        on={{
-          shortVideoSelected: (shortVideo) => activateSelectedShortVideoPlayer(shortVideo),
-          streamSelected: (stream) => activateSelectedStreamPlayer(stream)
-        }} />
-    </div>
-  {/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>
-  {/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>
+      {/if}
 
-  {#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={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} locale={settings?.locale} on={{ categorySelected: selectCategory, streamSelected: activateSelectedStreamPlayer }} />
+          </div>
+        </div>
+      {:else}
+        <div class="menu-swipe-area" use:swipeToOpen>&nbsp;</div>
+      {/if}
+      {#if isMobileView}
+        <MediaCenterFooter context={context} />
+      {/if}
     </div>
-  {/if}
-  <div class="media-center-width-anchor" use:onWidthAnchorMounted></div>
+  </WithBackground>
 {/if}
 
 <style>@keyframes fadeIn {
@@ -230,6 +232,34 @@ const onWidthAnchorMounted = (node) => {
     opacity: 1;
   }
 }
+.media-center {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.media-center__content-container {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+}
+.media-center__content {
+  position: absolute;
+  inset: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.media-center__content--faded {
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+}
+
 .media-center-overlay {
   position: absolute;
   inset: 0;
@@ -277,4 +307,20 @@ const onWidthAnchorMounted = (node) => {
   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/cmp.media-center.svelte.d.ts

@@ -1,21 +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: 'streams';
-    props: StreamsPlayerProps;
-} | {
-    mode: 'discover';
-};
-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`)
+    }
+};