@streamscloud/embeddable 7.5.2 → 8.0.1

package/dist/posts/post-viewer/post-viewer-localization.js

@@ -1,9 +1,11 @@
 import {} from '../../core/locale';
 export class PostViewerLocalization {
     viewsCount;
+    readMore;
     locale;
     constructor(locale) {
         this.viewsCount = loc.viewsCount[locale];
+        this.readMore = loc.readMore[locale];
         this.locale = locale;
     }
 }
@@ -11,5 +13,6 @@ const loc = {
     viewsCount: {
         en: (count) => (count === 1 ? '1 view' : `${count} views`),
         no: (count) => (count === 1 ? '1 visning' : `${count} visninger`)
-    }
+    },
+    readMore: { en: 'Read more', no: 'Les mer' }
 };

package/dist/posts/posts-player/index.d.ts

@@ -1,7 +1,6 @@
-import type { ContentPlayerSettings } from '../../content-player';
 import type { IPostSocialInteractionsHandler } from '../social-interactions';
 import type { IPlayerItemsProvider } from '../../ui/player-slider';
-import { type IPostAnalyticsHandler, type PostPlayerModel } from './types';
+import type { IPostAnalyticsHandler, PostPlayerModel, PostPlayerSettings } from './types';
 export { type PostPlayerModel };
 export type { IPlayerItemsProvider, IPostAnalyticsHandler };
 /**
@@ -67,7 +66,7 @@ export declare function openPostsPlayer(init: {
     postsProvider: IPlayerItemsProvider<PostPlayerModel>;
     analyticsHandler?: IPostAnalyticsHandler;
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
-    playerSettings?: ContentPlayerSettings;
+    playerSettings?: PostPlayerSettings;
     on?: {
         playerClosed?: () => void;
     };

package/dist/posts/posts-player/index.js

@@ -1,6 +1,5 @@
 import { ModalShadowHost } from '../../ui/shadow-dom';
 import { default as PostPlayerView } from './posts-player-view.svelte';
-import {} from './types';
 import { mount, unmount } from 'svelte';
 export {};
 /**

package/dist/posts/posts-player/posts-player-view.svelte

@@ -8,8 +8,9 @@
     });
 };
 import { ContentPlayer, ContentPlayerConfig } from '../../content-player';
+import { ContentPlayerSettings } from '../../content-player/content-player-settings';
 import { preloadImage } from '../../core/image-preloader';
-import { getPostCoverImage } from '../post-viewer';
+import { getPostCoverImage } from '../model';
 import { PlayerBuffer } from '../../ui/player-slider';
 import { untrack } from 'svelte';
 let { dataProvider, socialInteractionsHandler, playerSettings, analyticsHandler, on } = $props();
@@ -38,7 +39,7 @@ const contentPlayerConfig = new ContentPlayerConfig({
         postModelFromCurrentItem: (item) => item
     },
     socialInteractionsHandler,
-    settings: playerSettings,
+    settings: new ContentPlayerSettings(playerSettings),
     callbacks: {
         close: on === null || on === void 0 ? void 0 : on.playerClosed
     },

package/dist/posts/posts-player/types.d.ts

@@ -1,20 +1,21 @@
-import type { ContentPlayerSettings } from '../../content-player';
-import type { PostViewerModel } from '../post-viewer';
+import type { IContentPlayerSettingsInitializer } from '../../content-player/content-player-settings';
+import type { IPostModel } from '..';
 import type { IPostSocialInteractionsHandler } from '../social-interactions';
 import type { IPlayerItemsProvider } from '../../ui/player-slider';
 export interface IPostAnalyticsHandler {
     setOrganizationId: (organizationId: string) => void;
     trackPostOpened: (postId: string, ownerId: string) => void;
 }
-export type PostPlayerModel = PostViewerModel & {
+export type PostPlayerModel = IPostModel & {
     analyticsOrganizationId: string | null;
 };
 export type PostPlayerProps = {
     dataProvider: IPlayerItemsProvider<PostPlayerModel>;
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
     analyticsHandler?: IPostAnalyticsHandler;
-    playerSettings?: ContentPlayerSettings;
+    playerSettings?: PostPlayerSettings;
     on?: {
         playerClosed?: () => void;
     };
 };
+export type PostPlayerSettings = Pick<IContentPlayerSettingsInitializer, 'disableBackground' | 'hideCloseButton' | 'locale' | 'showStreamsCloudWatermark'>;

package/dist/short-videos/short-videos-player/index.d.ts

@@ -1,10 +1,9 @@
-import type { ContentPlayerSettings } from '../../content-player';
 import { type IMediaCenterConfig } from '../../media-center/config/types';
 import type { IPostSocialInteractionsHandler } from '../../posts/social-interactions';
 import type { IPlayerItemsProvider } from '../../ui/player-slider';
 import { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
 import { mapToShortVideoPlayerModel } from './mapper';
-import { type IShortVideoAnalyticsHandler, type ShortVideoPlayerModel } from './types';
+import type { IShortVideoAnalyticsHandler, ShortVideoPlayerModel, ShortVideoPlayerSettings } from './types';
 export { ShortVideosPlayer, type ShortVideoPlayerModel };
 export type { IMediaCenterConfig, IPlayerItemsProvider, IShortVideoAnalyticsHandler };
 export { mapToShortVideoPlayerModel };
@@ -111,7 +110,7 @@ export declare function openShortVideosPlayer(init: {
     mediaCenterConfig?: IMediaCenterConfig;
     analyticsHandler?: IShortVideoAnalyticsHandler;
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
-    playerSettings?: ContentPlayerSettings;
+    playerSettings?: ShortVideoPlayerSettings;
     on?: {
         playerClosed?: () => void;
         videoActivated?: (id: string) => void;
@@ -123,7 +122,7 @@ export declare function openShortVideosPlayer(init: {
     graphqlOrigin?: string;
     initialId?: string;
     mediaPageId?: string;
-    playerSettings?: ContentPlayerSettings;
+    playerSettings?: ShortVideoPlayerSettings;
     on?: {
         playerClosed?: () => void;
         videoActivated?: (id: string) => void;

package/dist/short-videos/short-videos-player/index.js

@@ -7,7 +7,6 @@ import { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
 import { InternalShortVideoAnalyticsHandler } from './internal-short-video-analytics-handler';
 import { InternalShortVideoPlayerProvider } from './internal-short-video-player-provider';
 import { mapToShortVideoPlayerModel } from './mapper';
-import {} from './types';
 import { mount, unmount } from 'svelte';
 export { ShortVideosPlayer };
 export { mapToShortVideoPlayerModel };

package/dist/short-videos/short-videos-player/mapper.js

@@ -1,7 +1,7 @@
 import { ProfileType } from '../../core/enums';
-import { mapToPostViewerModel } from '../../posts/post-viewer';
+import { mapToPostModel } from '../../posts/post-viewer';
 export const mapToShortVideoPlayerModel = (payload) => {
-    const viewerModel = mapToPostViewerModel(payload);
+    const viewerModel = mapToPostModel(payload);
     return {
         ...viewerModel,
         analyticsOrganizationId: payload.ownerProfile.type === ProfileType.Organization ? payload.ownerProfile.id : null

package/dist/short-videos/short-videos-player/short-videos-player-view.svelte

@@ -8,8 +8,9 @@
     });
 };
 import { ContentPlayer, ContentPlayerConfig } from '../../content-player';
+import { ContentPlayerSettings } from '../../content-player/content-player-settings';
 import { preloadImage } from '../../core/image-preloader';
-import { getPostCoverImage } from '../../posts/post-viewer';
+import { getPostCoverImage } from '../../posts/model';
 import { PlayerBuffer } from '../../ui/player-slider';
 import { InternalShortVideoPlayerProvider } from './internal-short-video-player-provider';
 import { untrack } from 'svelte';
@@ -44,7 +45,7 @@ const contentPlayerConfig = new ContentPlayerConfig({
     },
     socialInteractionsHandler,
     mediaCenterData,
-    settings: playerSettings,
+    settings: new ContentPlayerSettings(playerSettings),
     callbacks: {
         close: on === null || on === void 0 ? void 0 : on.playerClosed,
         productClick: (id, videoId) => {

package/dist/short-videos/short-videos-player/types.d.ts

@@ -1,5 +1,5 @@
-import type { ContentPlayerSettings } from '../../content-player';
-import type { PostViewerModel } from '../../posts/post-viewer';
+import type { IContentPlayerSettingsInitializer } from '../../content-player/content-player-settings';
+import type { IPostModel } from '../../posts';
 import type { IPostSocialInteractionsHandler } from '../../posts/social-interactions';
 import type { IPlayerItemsProvider } from '../../ui/player-slider';
 export interface IShortVideoAnalyticsHandler {
@@ -10,16 +10,17 @@ export interface IShortVideoAnalyticsHandler {
     trackAdClick: (adId: string) => void;
     trackAdImpression: (adId: string) => void;
 }
-export type ShortVideoPlayerModel = PostViewerModel & {
+export type ShortVideoPlayerModel = IPostModel & {
     analyticsOrganizationId: string | null;
 };
 export type ShortVideoPlayerProps = {
     dataProvider: IPlayerItemsProvider<ShortVideoPlayerModel>;
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
     analyticsHandler?: IShortVideoAnalyticsHandler;
-    playerSettings?: ContentPlayerSettings;
+    playerSettings?: ShortVideoPlayerSettings;
     on?: {
         playerClosed?: () => void;
         videoActivated?: (id: string) => void;
     };
 };
+export type ShortVideoPlayerSettings = Pick<IContentPlayerSettingsInitializer, 'disableBackground' | 'hideCloseButton' | 'locale' | 'showStreamsCloudWatermark'>;

package/dist/streams/layout/element-views/cmp.short-video-stream-element.svelte

@@ -1,8 +1,9 @@
-<script lang="ts">import { PostViewer } from '../../../posts/post-viewer';
+<script lang="ts">import { PostModel } from '../../../posts/model';
+import { PostViewer } from '../../../posts/post-viewer';
 import { ShortVideoStreamElementLocalization } from './short-video-stream-element-localization';
-import { mapToPostViewerModel } from '../models';
+import { mapToPostModel } from '../models';
 let { data, locale, on } = $props();
 const localization = $derived(new ShortVideoStreamElementLocalization(locale));
 </script>
 
-<PostViewer model={mapToPostViewerModel(data)} autoplay={false} enableControls={false} locale={localization.shortVideoViewerLocale} on={on} />
+<PostViewer model={new PostModel(mapToPostModel(data))} autoplay={false} enableControls={false} locale={localization.shortVideoViewerLocale} on={on} />

package/dist/streams/layout/models/index.d.ts

@@ -1,4 +1,4 @@
-export { mapToPostViewerModel } from './mapper';
+export { mapToPostModel } from './mapper';
 export type { StreamLayoutBlobModel } from './stream-layout-blob-model';
 export type { StreamLayoutMediaItemModel } from './stream-layout-media-item-model';
 export type { StreamLayoutPostHeaderModel } from './stream-layout-post-header-model';

package/dist/streams/layout/models/index.js

@@ -1 +1 @@
-export { mapToPostViewerModel } from './mapper';
+export { mapToPostModel } from './mapper';

package/dist/streams/layout/models/mapper.d.ts

@@ -1,3 +1,3 @@
-import type { PostViewerModel } from '../../../posts/post-viewer';
+import { type IPostModel } from '../../../posts/model';
 import type { StreamLayoutShortVideoModel } from '../models/stream-layout-short-video-model';
-export declare const mapToPostViewerModel: (model: StreamLayoutShortVideoModel) => PostViewerModel;
+export declare const mapToPostModel: (model: StreamLayoutShortVideoModel) => IPostModel;

package/dist/streams/layout/models/mapper.js

@@ -1,15 +1,16 @@
 import { MediaType } from '../../../core/enums';
-export const mapToPostViewerModel = (model) => {
+import {} from '../../../posts/model';
+export const mapToPostModel = (model) => {
     return {
         id: model.id,
-        media: model.media.type === MediaType.Image
-            ? { type: 'image', url: model.media.url, isMutable: false }
-            : {
-                type: 'video',
-                url: model.media.url,
-                thumbnailUrl: model.media.thumbnailUrl,
-                isMutable: true
-            },
+        media: [
+            model.media.type === MediaType.Image
+                ? { isImage: true, url: model.media.url }
+                : { isImage: false, url: model.media.url, thumbnailUrl: model.media.thumbnailUrl }
+        ],
+        mediaFit: 'cover',
+        kicker: null,
+        title: null,
         text: model.text,
         heading: model.header && {
             image: model.header.sourceImage,

package/dist/streams/stream-player/index.d.ts

@@ -1,9 +1,8 @@
-import type { ContentPlayerSettings } from '../../content-player';
 import { type IMediaCenterConfig } from '../../media-center/config/types';
 import type { IPostSocialInteractionsHandler } from '../../posts/social-interactions';
 import type { StreamPageViewerModel } from '../stream-page-viewer/types';
 import { mapToStreamPlayerModel } from './mapper';
-import type { IStreamAnalyticsHandler, IStreamPlayerDataProvider, StreamAmplificationParameters, StreamPlayerModel } from './types';
+import type { IStreamAnalyticsHandler, IStreamPlayerDataProvider, StreamAmplificationParameters, StreamPlayerModel, StreamPlayerSettings } from './types';
 export { type StreamPlayerModel, type StreamPageViewerModel, mapToStreamPlayerModel };
 export type { IStreamPlayerDataProvider, IStreamAnalyticsHandler, IMediaCenterConfig };
 /**
@@ -117,7 +116,7 @@ export declare function openStreamPlayer(init: {
     postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
     analyticsHandler?: IStreamAnalyticsHandler;
     amplificationParameters?: StreamAmplificationParameters;
-    playerSettings?: ContentPlayerSettings;
+    playerSettings?: StreamPlayerSettings;
     on?: {
         streamActivated?: (data: {
             title: string;
@@ -132,7 +131,7 @@ export declare function openStreamPlayer(init: {
     graphqlOrigin?: string;
     mediaPageId?: string;
     amplificationParameters?: StreamAmplificationParameters;
-    playerSettings?: ContentPlayerSettings;
+    playerSettings?: StreamPlayerSettings;
     on?: {
         streamActivated?: (data: {
             title: string;

package/dist/streams/stream-player/stream-player-view.svelte

@@ -9,9 +9,10 @@
 };
 var _a;
 import { ContentPlayer, ContentPlayerConfig } from '../../content-player';
+import { ContentPlayerSettings } from '../../content-player/content-player-settings';
 import { preloadImage } from '../../core/image-preloader';
 import { toastrWarning } from '../../core/toastr';
-import { mapToPostViewerModel } from '../layout/models';
+import { mapToPostModel } from '../layout/models';
 import { StreamPageViewer } from '../stream-page-viewer';
 import { default as Overview } from './stream-overview.svelte';
 import { StreamPlayerBuffer } from './stream-player-buffer.svelte';
@@ -89,14 +90,14 @@ const contentPlayerConfig = new ContentPlayerConfig({
     mappers: {
         postModelFromCurrentItem: (item) => {
             if (item.type === 'short-video' && item.shortVideo) {
-                return mapToPostViewerModel(item.shortVideo);
+                return mapToPostModel(item.shortVideo);
             }
             return null;
         }
     },
     socialInteractionsHandler: postSocialInteractionsHandler,
     mediaCenterData,
-    settings: playerSettings,
+    settings: new ContentPlayerSettings(playerSettings),
     callbacks: {
         close: on === null || on === void 0 ? void 0 : on.playerClosed,
         videoProgress: (pageId, videoId, progress) => {

package/dist/streams/stream-player/types.d.ts

@@ -1,4 +1,4 @@
-import type { ContentPlayerSettings } from '../../content-player';
+import type { IContentPlayerSettingsInitializer } from '../../content-player/content-player-settings';
 import type { IPostSocialInteractionsHandler } from '../../posts/social-interactions';
 import type { StreamPageViewerModel } from '../stream-page-viewer';
 export type StreamPlayerModel = {
@@ -21,7 +21,7 @@ export type StreamPlayerProps = {
     postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
     analyticsHandler?: IStreamAnalyticsHandler;
     amplificationParameters?: StreamAmplificationParameters;
-    playerSettings?: ContentPlayerSettings;
+    playerSettings?: StreamPlayerSettings;
     on?: {
         streamActivated?: (data: {
             title: string;
@@ -30,6 +30,7 @@ export type StreamPlayerProps = {
         playerClosed?: () => void;
     };
 };
+export type StreamPlayerSettings = Pick<IContentPlayerSettingsInitializer, 'disableBackground' | 'hideCloseButton' | 'locale' | 'showStreamsCloudWatermark'>;
 export type StreamAmplificationParameters = {
     campaignId: string;
     campaignName: string;

package/dist/ui/line-clamp/cmp.line-clamp.svelte

@@ -93,6 +93,7 @@ const toggleShowMore = () => {
 .line-clamp__show-more-button {
   font-size: 0.9em;
   font-style: italic;
+  pointer-events: auto;
 }
 .line-clamp__show-more-button--inline {
   position: absolute;

package/dist/ui/player-slider/cmp.player-slider.svelte

@@ -52,26 +52,63 @@ const notifyOnItemChanged = () => {
     }
 };
 onMount(() => {
+    let touchStartX = 0;
     let touchStartY = 0;
     let touchMoveY = 0;
     let touchStartTime = 0;
+    let isVerticalSwipe = false;
     window.addEventListener(`keydown`, onKeyPress);
     slidesRef.addEventListener('touchstart', (e) => {
         // The movement gets all janky if there's a transition on the elements.
         slidesRef.classList.toggle('animate', false);
+        touchStartX = e.changedTouches[0].screenX;
         touchStartY = e.changedTouches[0].screenY;
         touchStartTime = Date.now();
+        isVerticalSwipe = false;
     });
     slidesRef.addEventListener('touchmove', (e) => {
-        e.preventDefault();
-        const newPosition = e.changedTouches[0].screenY;
-        const diff = newPosition - touchStartY;
-        if ((diff > 0 && buffer.canLoadPrevious) || (diff < 0 && buffer.canLoadNext)) {
-            touchMoveY = diff;
-            swipeTransition = diff + actualTransition;
+        if (isVerticalSwipe) {
+            // Already determined this is a vertical swipe
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        const touchCurrentX = e.changedTouches[0].screenX;
+        const touchCurrentY = e.changedTouches[0].screenY;
+        const diffX = Math.abs(touchCurrentX - touchStartX);
+        const diffY = Math.abs(touchCurrentY - touchStartY);
+        // Determine direction on first significant movement
+        if (diffX > 10 || diffY > 10) {
+            if (diffY > diffX) {
+                // Vertical swipe - handle it
+                isVerticalSwipe = true;
+                e.preventDefault();
+                e.stopPropagation();
+                const newPosition = touchCurrentY;
+                const diff = newPosition - touchStartY;
+                if ((diff > 0 && buffer.canLoadPrevious) || (diff < 0 && buffer.canLoadNext)) {
+                    touchMoveY = diff;
+                    swipeTransition = diff + actualTransition;
+                }
+            }
+            else {
+                // Horizontal swipe - allow child to handle
+                isVerticalSwipe = false;
+                return;
+            }
         }
     });
-    slidesRef.addEventListener('touchend', () => {
+    slidesRef.addEventListener('touchend', (e) => {
+        const touchEndX = e.changedTouches[0].screenX;
+        const touchEndY = e.changedTouches[0].screenY;
+        const diffX = Math.abs(touchEndX - touchStartX);
+        const diffY = Math.abs(touchEndY - touchStartY);
+        // Check if this is a vertical swipe
+        if (diffX > diffY) {
+            // Horizontal swipe - don't handle and don't block
+            return;
+        }
+        // This is a vertical swipe - block propagation
+        e.stopPropagation();
         slidesRef.classList.toggle('animate', true);
         const reset = () => {
             swipeTransition = 0;

package/dist/ui/player-slider/cmp.player-slider.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { IPlayerBuffer, PlayerSliderCallbacks } from './types';
+import type { IPlayerBuffer, PlayerSliderCallbacks, TExtended } from './types';
 import { type Snippet } from 'svelte';
 declare class __sveltets_Render<T extends {
     id: string;
@@ -7,7 +7,7 @@ declare class __sveltets_Render<T extends {
         buffer: IPlayerBuffer<T>;
         on?: PlayerSliderCallbacks<T> | undefined;
         children: Snippet<[{
-            item: T;
+            item: TExtended<T>;
             active?: boolean;
         }]>;
     };

package/dist/ui/player-slider/player-buffer.svelte.d.ts

@@ -1,10 +1,10 @@
-import type { IPlayerBuffer } from './types';
+import type { IPlayerBuffer, TExtended } from './types';
 export declare class PlayerBuffer<T extends {
     id: string;
 }> implements IPlayerBuffer<T> {
-    readonly loaded: T[];
+    readonly loaded: TExtended<T>[];
     readonly currentIndex: number;
-    readonly current: T | null;
+    readonly current: TExtended<T> | null;
     readonly canLoadNext: boolean;
     readonly canLoadPrevious: boolean;
     readonly navigationDisabled: boolean;
@@ -25,6 +25,7 @@ export interface IPlayerItemsProvider<T> {
     initialData: {
         prefetchedItems: T[];
         startIndex: number;
+        startMediaIndex?: number;
     };
     loadMore(): Promise<T[]>;
 }

package/dist/ui/player-slider/player-buffer.svelte.js

@@ -13,10 +13,16 @@ export class PlayerBuffer {
     isLoading = false;
     constructor(provider, on) {
         this.loadMoreFn = provider.loadMore;
-        this._loaded = provider.initialData.prefetchedItems;
-        this._currentIndex = this._loaded.length
+        this._loaded =
+            provider.initialData.startIndex >= 0 && provider.initialData.startMediaIndex && provider.initialData.startMediaIndex > 0
+                ? provider.initialData.prefetchedItems.map((i, index) => ({
+                    ...i,
+                    mediaIndex: index === provider.initialData.startIndex ? provider.initialData.startMediaIndex : 0
+                }))
+                : provider.initialData.prefetchedItems;
+        this._currentIndex = provider.initialData.prefetchedItems.length
             ? provider.initialData.startIndex >= this._loaded.length
-                ? this._loaded.length - 1
+                ? provider.initialData.prefetchedItems.length - 1
                 : provider.initialData.startIndex
             : -1;
         this.warmUpBuffer(on?.preloaded);

package/dist/ui/player-slider/types.d.ts

@@ -1,9 +1,9 @@
 export interface IPlayerBuffer<T extends {
     id: string;
 }> {
-    readonly current: T | null;
+    readonly current: TExtended<T> | null;
     readonly currentIndex: number;
-    readonly loaded: T[];
+    readonly loaded: TExtended<T>[];
     readonly canLoadNext: boolean;
     readonly canLoadPrevious: boolean;
     readonly navigationDisabled: boolean;
@@ -12,6 +12,9 @@ export interface IPlayerBuffer<T extends {
     loadPrevious: () => void;
     reset: () => void;
 }
+export type TExtended<T> = T & {
+    mediaIndex?: number;
+};
 export type PlayerSliderCallbacks<T> = {
     itemPreActivated?: (e: T) => void;
     itemPreDeactivated?: (e: {