@streamscloud/embeddable 16.1.0 → 16.2.0

package/dist/articles/article/article-view.svelte

@@ -20,6 +20,9 @@ const fieldMetadata = $derived({ displayDate: metadata.displayDate });
   --_article--container-background: var(--article--container-background, light-dark(#fafafa, #1c1c1c));
   --_article--text-color: var(--article--text-color, light-dark(#000000, #ffffff));
   container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   min-height: var(--_article--min-height);
   background: var(--_article--container-background);
   overflow: hidden;
@@ -27,9 +30,9 @@ const fieldMetadata = $derived({ displayDate: metadata.displayDate });
 
 .article {
   --article-field--text-color: var(--_article--text-color);
+  width: 100%;
   max-width: var(--_article--max-width);
-  margin: 0 auto;
-  min-height: var(--_article--min-height);
+  flex: 1;
   background: var(--_article--background);
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   padding-bottom: 6.25rem;

package/dist/articles/article-dialog/cmp.article-dialog.svelte

@@ -64,11 +64,12 @@ void load();
 }
 .article-dialog__content {
   --article--max-width: 56.25rem;
+  --article--min-height: 100%;
   --article--container-background: light-dark(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.8));
   width: 100%;
   height: 100%;
   overflow-y: auto;
-  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, #7d7d7d);
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#999999, #333333));
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
 }
 .article-dialog__content::-webkit-scrollbar {

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

@@ -21,7 +21,8 @@ const context = untrack(() => new MediaCenterContext({
                 case 'posts':
                     instance.postsFeedHandler.activateWithDataProvider({
                         dataProvider: modeProps.props.dataProvider,
-                        onPostActivated: modeProps.props.onPostActivated
+                        onPostActivated: modeProps.props.onPostActivated,
+                        onProductBuy: modeProps.props.onProductBuy
                     });
                     break;
                 case 'streams':

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

@@ -122,7 +122,7 @@ const genereateStreamActions = (id) => {
   --_cross-browser-scrollbar--track-color: transparent;
 }
 .media-center-discover:hover {
-  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, #7d7d7d);
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#999999, #333333));
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
 }
 .media-center-discover::-webkit-scrollbar {

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

@@ -242,7 +242,7 @@ const swipeToOpen = (node) => {
   --_cross-browser-scrollbar--track-color: transparent;
 }
 .media-center-overlay:hover {
-  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, #7d7d7d);
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#999999, #333333));
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
 }
 .media-center-overlay::-webkit-scrollbar {

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

@@ -166,7 +166,7 @@ const handleCategoryExpaned = (e, categoryId) => {
   --_cross-browser-scrollbar--track-color: transparent;
 }
 .media-center-menu__content:hover {
-  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, #7d7d7d);
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#999999, #333333));
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
 }
 .media-center-menu__content::-webkit-scrollbar {

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

@@ -14,6 +14,7 @@ export declare class PostsFeedHandler {
     private _mediaCenterContentHandler;
     private _closeOrchestrator;
     private _callbacks;
+    private _onProductBuy;
     constructor(data: {
         dataProvider: IMediaCenterDataProvider;
         mediaCenterSettingsHandler: MediaCenterSettingsHandler;
@@ -32,6 +33,7 @@ export declare class PostsFeedHandler {
     activateWithDataProvider: (data: {
         dataProvider: IPlayerDataProvider<PostPlayerModel>;
         onPostActivated?: (id: string) => void;
+        onProductBuy?: (productId: string) => void;
     }) => Promise<void>;
     activate: (options: Partial<{
         filter: PostsFeedFilter;

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

@@ -11,6 +11,7 @@ export class PostsFeedHandler {
     _mediaCenterContentHandler;
     _closeOrchestrator;
     _callbacks;
+    _onProductBuy;
     constructor(data) {
         const { dataProvider, mediaCenterSettingsHandler, mediaCenterContentHandler, closeOrchestrator, on } = data;
         this._providersGenerator = new FeedProvidersGenerator(dataProvider);
@@ -70,12 +71,14 @@ export class PostsFeedHandler {
         this._feedPlayerData = null;
     };
     activateWithDataProvider = async (data) => {
-        const { dataProvider, onPostActivated } = data;
+        const { dataProvider, onPostActivated, onProductBuy } = data;
+        this._onProductBuy = onProductBuy;
         const on = {
             postActivated: (id) => {
                 onPostActivated?.(id);
                 this._callbacks.navigationStateChanged({ mode: 'posts-feed', postId: id, categoryId: null });
-            }
+            },
+            productBuy: this._onProductBuy
         };
         try {
             this._state = 'loading';
@@ -100,7 +103,8 @@ export class PostsFeedHandler {
         const on = {
             postActivated: (id) => {
                 this._callbacks.navigationStateChanged({ mode: 'posts-feed', postId: id, categoryId: filter?.categoryId ?? null });
-            }
+            },
+            productBuy: this._onProductBuy
         };
         try {
             this._state = 'loading';
@@ -180,6 +184,7 @@ export class PostsFeedHandler {
             closeOrchestrator: this._closeOrchestrator,
             on: {
                 postActivated: on.postActivated,
+                productBuy: on.productBuy,
                 backgroundImageLoaded: this._mediaCenterSettingsHandler.backgroundImageLoadedHandler
             }
         };

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

@@ -15,6 +15,7 @@ export type MediaCenterModeProps = {
     props: {
         dataProvider: IPlayerDataProvider<PostPlayerModel>;
         onPostActivated?: (id: string) => void;
+        onProductBuy?: (productId: string) => void;
     };
 } | {
     mode: 'streams';

package/dist/media-page/index.d.ts

@@ -84,6 +84,7 @@ export declare function openMediaPageModalWithInitialPostsProvider(init: {
     on?: {
         closed?: () => void;
         postActivated?: (id: string) => void;
+        productBuy?: (productId: string) => void;
     };
 }): void;
 export declare function openMediaPageModalWithInitialStreamsProvider(init: {

package/dist/media-page/index.js

@@ -115,7 +115,8 @@ export function openMediaPageModalWithInitialPostsProvider(init) {
                 mode: 'posts',
                 props: {
                     dataProvider,
-                    onPostActivated: on?.postActivated
+                    onPostActivated: on?.postActivated,
+                    onProductBuy: on?.productBuy
                 }
             },
             closeOrchestrator: makeCloseOrchestrator()

package/dist/posts/attachments/cmp.attachments.svelte

@@ -34,7 +34,8 @@ const trackingParams = $derived.by(() => {
           trackingParams={trackingParams}
           on={{
             click: on?.productClick,
-            impression: on?.productImpression
+            impression: on?.productImpression,
+            buy: on?.productBuy
           }} />
       {/each}
     {/if}

package/dist/posts/attachments/cmp.attachments.svelte.d.ts

@@ -6,6 +6,7 @@ type Props = {
     on?: {
         productClick?: (productId: string) => void;
         productImpression?: (productId: string) => void;
+        productBuy?: (productId: string) => void;
         adClick?: (adId: string) => void;
         adImpression?: (adId: string) => void;
     };

package/dist/posts/post-viewer/media/post-media.svelte

@@ -35,7 +35,7 @@ let { id, media, autoplay = 'on-appearance', on } = $props();
 </div>
 
 <style>.post-media {
-  --_post-media--background-color: light-dark(#ffffff, #000000);
+  --_post-media--background-color: light-dark(#000000, #ffffff);
   width: 100%;
   min-width: 100%;
   max-width: 100%;

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

@@ -29,11 +29,12 @@ const initHost = (node) => {
             closeOrchestrator: new CloseOrchestrator({
                 closeFn: async () => {
                     await unmount(mounted);
+                    on?.playerClosed?.();
                 },
-                canClose: false
+                canClose: !!on?.playerClosed
             }),
             get on() {
-                return on;
+                return { postActivated: on?.postActivated, productBuy: on?.productBuy };
             }
         }
     });

package/dist/posts/posts-player/cmp.posts-player.svelte.d.ts

@@ -18,6 +18,8 @@ type Props = {
     };
     on?: {
         postActivated?: (id: string) => void;
+        playerClosed?: () => void;
+        productBuy?: (productId: string) => void;
     };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

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

@@ -46,12 +46,14 @@ export type { ArticleDataProvider, IMediaCenterDataProvider, IPostAnalyticsHandl
  *       Optional theme for the player UI.
  *
  * Events (optional)
- * @param {{ playerClosed?: () => void; postActivated?: (id: string) => void }} [init.on]
+ * @param {{ playerClosed?: () => void; postActivated?: (id: string) => void; productBuy?: (productId: string) => void }} [init.on]
  *   Optional event handlers.
  * @param {() => void} [init.on.playerClosed]
  *   Called after the player is fully closed (after unmount and removal from the DOM).
  * @param {(id: string) => void} [init.on.postActivated]
  *   Called when a post becomes active (receives the post's id).
+ * @param {(productId: string) => void} [init.on.productBuy]
+ *   Called when the user clicks the "Buy" button on a product card. When provided, a "Buy" button is shown on product cards in the attachments panel.
  *
  * @returns {void}
  *
@@ -104,6 +106,7 @@ export declare function openPostsPlayer(init: {
     on?: {
         playerClosed?: () => void;
         postActivated?: (id: string) => void;
+        productBuy?: (productId: string) => void;
     };
 }): void;
 export type IPostsPlayerDataProvider<TChunk extends WithId = WithId> = {

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

@@ -44,12 +44,14 @@ export { PostsPlayer };
  *       Optional theme for the player UI.
  *
  * Events (optional)
- * @param {{ playerClosed?: () => void; postActivated?: (id: string) => void }} [init.on]
+ * @param {{ playerClosed?: () => void; postActivated?: (id: string) => void; productBuy?: (productId: string) => void }} [init.on]
  *   Optional event handlers.
  * @param {() => void} [init.on.playerClosed]
  *   Called after the player is fully closed (after unmount and removal from the DOM).
  * @param {(id: string) => void} [init.on.postActivated]
  *   Called when a post becomes active (receives the post's id).
+ * @param {(productId: string) => void} [init.on.productBuy]
+ *   Called when the user clicks the "Buy" button on a product card. When provided, a "Buy" button is shown on product cards in the attachments panel.
  *
  * @returns {void}
  *
@@ -111,7 +113,8 @@ export function openPostsPlayer(init) {
             playerSettings,
             closeOrchestrator: makeCloseOrchestrator(),
             on: {
-                postActivated: on?.postActivated
+                postActivated: on?.postActivated,
+                productBuy: on?.productBuy
             }
         }
     });

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

@@ -21,5 +21,9 @@ const handleBackgroundImagedLoaded = (url) => {
     analyticsHandler={analyticsHandler}
     articleDataProvider={articleDataProvider}
     closeOrchestrator={closeOrchestrator}
-    on={{ postActivated: on?.postActivated, backgroundImageLoaded: playerSettings?.disableBackground === true ? undefined : handleBackgroundImagedLoaded }} />
+    on={{
+      postActivated: on?.postActivated,
+      productBuy: on?.productBuy,
+      backgroundImageLoaded: playerSettings?.disableBackground === true ? undefined : handleBackgroundImagedLoaded
+    }} />
 </ShadowRoot>

package/dist/posts/posts-player/posts-player-proxy.svelte.d.ts

@@ -20,6 +20,7 @@ type Props = {
     };
     on?: {
         postActivated?: (id: string) => void;
+        productBuy?: (productId: string) => void;
     };
 };
 declare const PostsPlayerProxy: import("svelte").Component<Props, {}, "">;

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

@@ -11,16 +11,15 @@ import { preloadImage } from '@streamscloud/kit/core/utils';
 import { initBufferFromProvider } from '@streamscloud/kit/ui/player/providers';
 import { untrack } from 'svelte';
 let { dataProvider, socialInteractionsHandler, sharingHandler, playerSettings, analyticsHandler, managementActions, articleDataProvider, closeOrchestrator, on } = $props();
-let playerHostElement = $state();
+let dialogAnchor;
+const resolveDialogAnchor = (el) => {
+    dialogAnchor = getDialogAnchor(el) ?? undefined;
+};
 const handleArticleReadMore = (articleId) => {
-    if (!articleDataProvider || !playerHostElement) {
-        return;
-    }
-    const anchor = getDialogAnchor(playerHostElement);
-    if (!anchor) {
+    if (!articleDataProvider || !dialogAnchor) {
         return;
     }
-    openArticleDialog({ anchor, articleId, fetchArticle: articleDataProvider.fetchArticle });
+    openArticleDialog({ anchor: dialogAnchor, articleId, fetchArticle: articleDataProvider.fetchArticle });
 };
 let buffer = $state.raw(null);
 let mappedPostsCache = {};
@@ -154,11 +153,12 @@ const currentItemActions = $derived.by(() => {
     on={{
       productClick: (id) => onProductClick(id, postModel.id),
       productImpression: (id) => onProductImpression(id, postModel.id),
+      productBuy: on?.productBuy,
       adClick: (id) => onAdClick(id),
       adImpression: (id) => onAdImpression(id)
     }} />
 {/snippet}
-<div class="player-host" bind:this={playerHostElement}>
+<div class="player-host" use:resolveDialogAnchor>
   <Player
     config={contentPlayerConfig}
     itemActions={currentItemActions}

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

@@ -34,6 +34,7 @@ export type PostsPlayerProps = {
     on?: {
         postActivated?: (id: string) => void;
         backgroundImageLoaded?: (imageUrl: string | null) => void;
+        productBuy?: (productId: string) => void;
     };
 };
 export type PostPlayerSettings = {

package/dist/products/product-card/cmp.product-card.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">import { enrichProductLinkWithTracking } from '../../marketing-tracking';
 import { toPriceRepresentation } from '../price-helper';
 import { ProductCardLocalization } from './product-card-localization';
+import IconCart from '@fluentui/svg-icons/icons/cart_20_regular.svg?raw';
+import { Button } from '@streamscloud/kit/ui/button';
+import { IconText } from '@streamscloud/kit/ui/icon-text';
 import { Image } from '@streamscloud/kit/ui/image';
 import { LineClamp } from '@streamscloud/kit/ui/line-clamp';
 import { ProportionalContainer } from '@streamscloud/kit/ui/proportional-container';
@@ -36,6 +39,11 @@ const onProductClicked = (event) => {
         window.open(enrichedLink, '_blank', 'noopener noreferrer');
     }
 };
+const onBuyClicked = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    on?.buy?.(product.id);
+};
 </script>
 
 <div class="product-card" inert={inert} use:trackImpression>
@@ -66,6 +74,14 @@ const onProductClicked = (event) => {
         {toPriceRepresentation({ amount: product.salePrice ?? product.price, currency: product.currency })}
       </div>
     </div>
+
+    {#if on?.buy}
+      <div class="product-card__buy" onclick={onBuyClicked} onkeydown={() => {}} role="none">
+        <Button size="standard" on={{ click: onBuyClicked }} --sc-kit--button--min-width="100%">
+          <IconText icon={IconCart}>{localization.buy}</IconText>
+        </Button>
+      </div>
+    {/if}
   </div>
 
   {#if enrichedLink}
@@ -172,6 +188,22 @@ const onProductClicked = (event) => {
     height: 1.75rem;
   }
 }
+.product-card__buy {
+  position: relative;
+  z-index: 1;
+  margin-top: 0.375rem;
+  --sc-kit--button--background: light-dark(
+    var(--sc-player--light--card-button, #f2f2f2),
+    var(--sc-player--dark--card-button, #2e2e2e)
+  );
+  --sc-kit--button--font--color: var(--sc-mc-color--text-primary);
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 230px) {
+  .product-card__buy {
+    margin-top: 0.25rem;
+  }
+}
 .product-card__link {
   position: absolute;
   inset: 0;

package/dist/products/product-card/cmp.product-card.svelte.d.ts

@@ -8,6 +8,7 @@ type Props = {
     on?: {
         click?: (id: string) => void;
         impression?: (id: string) => void;
+        buy?: (id: string) => void;
     };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

package/dist/products/product-card/product-card-localization.d.ts

@@ -1,3 +1,4 @@
 export declare class ProductCardLocalization {
     get beforeNowPrefix(): string | null;
+    get buy(): string;
 }

package/dist/products/product-card/product-card-localization.js

@@ -3,10 +3,17 @@ export class ProductCardLocalization {
     get beforeNowPrefix() {
         return loc.beforeNowPrefix[AppLocale.current];
     }
+    get buy() {
+        return loc.buy[AppLocale.current];
+    }
 }
 const loc = {
     beforeNowPrefix: {
         en: 'Before',
         no: 'Før'
+    },
+    buy: {
+        en: 'Buy',
+        no: 'Kjøp'
     }
 };

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

@@ -36,7 +36,7 @@ let { buffer, activePageId, on } = $props();
   --_cross-browser-scrollbar--track-color: transparent;
 }
 .stream-overview-pages:hover {
-  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, #7d7d7d);
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#999999, #333333));
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
 }
 .stream-overview-pages::-webkit-scrollbar {

package/dist/ui/media-items/media-items-gallery/cmp.media-items-gallery.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">import { MediaItemView } from '../media-item-view';
+import { getDialogAnchor } from '../../shadow-dom/shadow-root-service';
 import {} from '../types';
 import { GalleryLayout } from './gallery-layout';
 import { openMediaViewer } from '@streamscloud/kit/ui/media-viewer-dialog';
 let { media, singleImageRatio = 0, inert = false, on } = $props();
+let dialogHost;
 let layout = $state(null);
+const resolveDialogHost = (el) => {
+    dialogHost = getDialogAnchor(el) ?? undefined;
+};
 const initLayout = async () => {
     if (!media.length || media.length === 1 || media.length > 4) {
         layout = null;
@@ -41,7 +46,7 @@ const handleGalleryItemClick = (index) => {
             height: i.metadata.height
         })),
         index
-    });
+    }, dialogHost);
 };
 </script>
 
@@ -57,7 +62,7 @@ const handleGalleryItemClick = (index) => {
         remove: on?.remove ? () => on?.remove?.(0) : undefined
       }} />
   {:else}
-    <div class="gallery-container" inert={inert}>
+    <div class="gallery-container" use:resolveDialogHost inert={inert}>
       {#snippet galleryItem(index: number)}
         <div class="gallery-item">
           <MediaItemView

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "16.1.0",
+  "version": "16.2.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -17,8 +17,8 @@
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json",
     "check:strict": "svelte-check --tsconfig ./tsconfig.app.json --fail-on-warnings --output machine && eslint . --format codeframe --max-warnings 0 && prettier --check --plugin prettier-plugin-svelte --cache .",
-    "uad": "graphql-codegen --config codegen.yml && prettier --write src/**/*.generated.ts src/gql/*",
-    "uad-types-only": "graphql-codegen --config codegen.types-only.yml && prettier --write src/gql/*",
+    "uad": "graphql-codegen --config codegen.yml",
+    "uad-types-only": "graphql-codegen --config codegen.types-only.yml",
     "lint": "prettier --check --plugin prettier-plugin-svelte . && eslint .",
     "lint-format": "prettier --write --plugin prettier-plugin-svelte . && eslint --fix .",
     "format": "prettier --write --plugin prettier-plugin-svelte ."
@@ -142,7 +142,7 @@
     }
   },
   "peerDependencies": {
-    "@streamscloud/kit": "^0.2.0",
+    "@streamscloud/kit": "^0.2.1",
     "@streamscloud/streams-analytics-collector": "^4.0.1",
     "svelte": "^5.51.0"
   },
@@ -158,7 +158,7 @@
     "@graphql-codegen/typescript": "^5.0.7",
     "@graphql-codegen/typescript-operations": "^5.0.7",
     "@graphql-typed-document-node/core": "^3.2.0",
-    "@streamscloud/kit": "^0.2.0",
+    "@streamscloud/kit": "^0.2.1",
     "@streamscloud/streams-analytics-collector": "^4.0.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",