@streamscloud/embeddable 16.1.1 → 16.2.0

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/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

@@ -153,6 +153,7 @@ 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)
     }} />

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "16.1.1",
+  "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 ."