@streamscloud/embeddable 1.2.0 → 2.0.0

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

@@ -1,8 +1,8 @@
 <script lang="ts">var _a, _b;
-import { MediaVolumeManager } from '../../ui/media-playback';
-import { ProductCard } from '../../products/product-card';
-import { ShortVideoDetails, ShortVideoViewerAttachments } from '../../short-videos/short-video-viewer';
+import { ShortVideoDetails, ShortVideoViewerAttachmentsInline, ShortVideoViewerAttachments } from '../../short-videos/short-video-viewer';
+import { mapToShortVideoViewerModel } from '../layout/models';
 import { Icon } from '../../ui/icon';
+import { MediaVolumeManager } from '../../ui/media-playback';
 import { default as ActionButton } from './action-button.svelte';
 import { StreamPlayerLocalization } from './stream-player-localization.svelte';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg';
@@ -16,15 +16,15 @@ let { buffer, uiManager, localization, on } = $props();
 const toggleMuted = () => {
     MediaVolumeManager.isMuted = !MediaVolumeManager.isMuted;
 };
-const shortVideo = $derived(((_a = buffer.current) === null || _a === void 0 ? void 0 : _a.type) === 'short-video' && ((_b = buffer.current) === null || _b === void 0 ? void 0 : _b.shortVideo));
+const shortVideo = $derived(((_a = buffer.current) === null || _a === void 0 ? void 0 : _a.type) === 'short-video' && ((_b = buffer.current) === null || _b === void 0 ? void 0 : _b.shortVideo) ? mapToShortVideoViewerModel(buffer.current.shortVideo) : null);
 </script>
 
 <div class="stream-player-controls">
   <div class="stream-player-controls__left">
     {#if shortVideo && uiManager.shortVideoDetailsCollapsed && !uiManager.showShortVideoOverlay}
       <div class="stream-player-controls__short-video-overlay">
-        <div class="stream-player-controls__short-video-attachments">
-          <ShortVideoViewerAttachments model={shortVideo} />
+        <div class="stream-player-controls__short-video-attachments-inline">
+          <ShortVideoViewerAttachmentsInline model={shortVideo} />
         </div>
       </div>
     {/if}
@@ -39,10 +39,8 @@ const shortVideo = $derived(((_a = buffer.current) === null || _a === void 0 ? v
   </div>
   <div class="stream-player-controls__right">
     {#if shortVideo && shortVideo.products}
-      <div class="stream-player-controls__short-video-products">
-        {#each shortVideo.products as product (product.id)}
-          <ProductCard model={product} />
-        {/each}
+      <div class="stream-player-controls__short-video-attachments">
+        <ShortVideoViewerAttachments shortVideo={shortVideo} localization={localization.shortVideoDetailsLocalization?.attachmentsLocalization} />
       </div>
     {/if}
     <div class="stream-player-controls__controls">
@@ -65,15 +63,7 @@ const shortVideo = $derived(((_a = buffer.current) === null || _a === void 0 ? v
 </div>
 
 {#if shortVideo && (!uiManager.isMobileView || uiManager.overviewCollapsed)}
-  <ShortVideoDetails
-    shortVideo={shortVideo}
-    collapsed={uiManager.shortVideoDetailsCollapsed}
-    localization={{
-      productsSection: localization.productsSection,
-      offersSection: localization.offersSection,
-      viewsCount: localization.viewsCount,
-      timeAgoLocalization: localization.timeAgoLocalization
-    }} />
+  <ShortVideoDetails shortVideo={shortVideo} collapsed={uiManager.shortVideoDetailsCollapsed} localization={localization.shortVideoDetailsLocalization} />
   <div class="toggle-collapsed-button">
     <ActionButton on={{ click: () => (uiManager.shortVideoDetailsCollapsed = !uiManager.shortVideoDetailsCollapsed) }}>
       <Icon src={IconPanelRightGallery} />
@@ -154,31 +144,49 @@ const shortVideo = $derived(((_a = buffer.current) === null || _a === void 0 ? v
   --short-video-viewer--interactions--counter--color: #f3f4f6;
   --short-video-viewer--interactions--icon--font-color: #f3f4f6;
 }
-.stream-player-controls__short-video-attachments {
+.stream-player-controls__short-video-attachments-inline {
   display: none;
   /* Set 'container-type: inline-size;' to reference container*/
 }
-@container (width < 16.25rem) {
-  .stream-player-controls__short-video-attachments {
+@container (width < calc(21.875rem + 3.75rem)) {
+  .stream-player-controls__short-video-attachments-inline {
     display: contents;
   }
 }
-.stream-player-controls__short-video-products {
+.stream-player-controls__short-video-attachments {
   flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  align-items: flex-end;
-  overflow: hidden;
-  width: 12.5rem;
-  max-width: 12.5rem;
-  --product-card--text--color: #d1d5db;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-color: transparent transparent;
+  scrollbar-width: thin;
+  width: 21.875rem;
+  max-width: 21.875rem;
   /* Set 'container-type: inline-size;' to reference container*/
 }
-@container (width < 16.25rem) {
-  .stream-player-controls__short-video-products {
+.stream-player-controls__short-video-attachments::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+  background: var(--custom-scrollbar-background, transparent);
+  visibility: hidden;
+}
+.stream-player-controls__short-video-attachments::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+.stream-player-controls__short-video-attachments:hover {
+  scrollbar-color: var(--custom-scrollbar-color, #7d7d7d) var(--custom-scrollbar-background, transparent);
+  scrollbar-width: thin;
+}
+.stream-player-controls__short-video-attachments:hover::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+  background: var(--custom-scrollbar-background, transparent);
+  visibility: hidden;
+}
+.stream-player-controls__short-video-attachments:hover::-webkit-scrollbar-thumb {
+  background: var(--custom-scrollbar-color, #7d7d7d);
+}
+@container (width < calc(21.875rem + 3.75rem)) {
+  .stream-player-controls__short-video-attachments {
     display: none;
   }
 }

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

@@ -1,2 +1,29 @@
-export { default as StreamPlayer } from './cmp.stream-player.svelte';
-export type { IStreamPlayerLocalization } from './stream-player-localization.svelte';
+import type { IStreamPlayerLocalization } from './stream-player-localization.svelte';
+export type { IStreamPlayerLocalization };
+/**
+ * Opens the stream player modal with the specified stream details.
+ *
+ * @param init - Configuration options.
+ * @param {string} init.streamId - The ID of the stream to open.
+ * @param {string} init.graphqlUrl - The URL of the GraphQL endpoint.
+ * @param {IStreamPlayerLocalization} [init.localization] - Optional localization settings for the player UI.
+ *
+ * @example
+ * ```ts
+ * import { openStreamPlayer } from '@streamscloud/embeddable/stream-player';
+ *
+ * openStreamPlayer({
+ *   streamId: '...',
+ *   graphqlUrl: 'https://api.example.com/graphql',
+ *   localization: {
+ *     play: 'Play',
+ *     pause: 'Pause'
+ *   }
+ * });
+ * ```
+ */
+export declare const openStreamPlayer: (init: {
+    streamId: string;
+    graphqlUrl: string;
+    localization?: IStreamPlayerLocalization;
+}) => void;

package/dist/streams/stream-player/index.js

@@ -1 +1,44 @@
-export { default as StreamPlayer } from './cmp.stream-player.svelte';
+import { createLocalGQLClient } from '../../core/graphql';
+import { ShadowHost } from '../../ui/shadow-dom';
+import { default as StreamPlayer } from './cmp.stream-player.svelte';
+import { mount } from 'svelte';
+/**
+ * Opens the stream player modal with the specified stream details.
+ *
+ * @param init - Configuration options.
+ * @param {string} init.streamId - The ID of the stream to open.
+ * @param {string} init.graphqlUrl - The URL of the GraphQL endpoint.
+ * @param {IStreamPlayerLocalization} [init.localization] - Optional localization settings for the player UI.
+ *
+ * @example
+ * ```ts
+ * import { openStreamPlayer } from '@streamscloud/embeddable/stream-player';
+ *
+ * openStreamPlayer({
+ *   streamId: '...',
+ *   graphqlUrl: 'https://api.example.com/graphql',
+ *   localization: {
+ *     play: 'Play',
+ *     pause: 'Pause'
+ *   }
+ * });
+ * ```
+ */
+export const openStreamPlayer = (init) => {
+    const { streamId, graphqlUrl, localization } = init;
+    const shadowHost = new ShadowHost();
+    mount(StreamPlayer, {
+        target: shadowHost.shadowRoot,
+        props: {
+            streamId,
+            graphql: createLocalGQLClient(graphqlUrl),
+            localization,
+            on: {
+                closePlayer: () => {
+                    shadowHost.remove();
+                }
+            }
+        }
+    });
+    shadowHost.attachToBody();
+};

package/dist/streams/stream-player/operations.generated.d.ts

@@ -31,112 +31,10 @@ export type GetStreamPagesQuery = {
         items: Array<{
             id: string;
             name: string | null;
+            layout: string;
             cover: {
                 url: string;
             } | null;
-            components: Array<{
-                slotId: string;
-                type: SchemaTypes.StreamComponentType;
-                params: {
-                    shortVideo: {
-                        data: {
-                            id: string;
-                            enableSocialInteractions: boolean;
-                            postHeading: {
-                                sourceImage: string | null;
-                                sourceName: string;
-                                postDisplayDate: any;
-                                postViewsCount: number;
-                            };
-                            allProducts: Array<{
-                                title: string;
-                                id: string;
-                                link: string | null;
-                                media: Array<{
-                                    url: string;
-                                    thumbnailUrl: string | null;
-                                    type: SchemaTypes.MediaType;
-                                }>;
-                                priceAndAvailability: {
-                                    currency: SchemaTypes.Currency;
-                                    price: number;
-                                    productSalePrices: Array<{
-                                        salePrice: number;
-                                        salePriceEffectiveDateFrom: any | null;
-                                        salePriceEffectiveDateTo: any | null;
-                                    }> | null;
-                                };
-                            }>;
-                            ad: {
-                                id: string;
-                                title: string;
-                                description: string | null;
-                                buttonText: string | null;
-                                buttonUrl: string | null;
-                                openLinkInNewWindow: boolean | null;
-                                type: SchemaTypes.AdType;
-                                media: Array<{
-                                    type: SchemaTypes.MediaType;
-                                    url: string;
-                                    thumbnailUrl: string | null;
-                                }>;
-                            } | null;
-                            postData: {
-                                media: Array<{
-                                    url: string;
-                                    thumbnailUrl: string | null;
-                                    type: SchemaTypes.MediaType;
-                                }>;
-                                shortVideoData: {
-                                    text: string | null;
-                                } | null;
-                            };
-                        } | null;
-                    } | null;
-                    images: {
-                        mode: SchemaTypes.StreamMediaComponentMode;
-                        images: Array<{
-                            id: string;
-                            url: string;
-                        }>;
-                    } | null;
-                    product: {
-                        data: {
-                            title: string;
-                            id: string;
-                            link: string | null;
-                            media: Array<{
-                                url: string;
-                                thumbnailUrl: string | null;
-                                type: SchemaTypes.MediaType;
-                            }>;
-                            priceAndAvailability: {
-                                currency: SchemaTypes.Currency;
-                                price: number;
-                                productSalePrices: Array<{
-                                    salePrice: number;
-                                    salePriceEffectiveDateFrom: any | null;
-                                    salePriceEffectiveDateTo: any | null;
-                                }> | null;
-                            };
-                        } | null;
-                    } | null;
-                };
-            }>;
-            slots: Array<{
-                id: string;
-                allowedComponents: Array<SchemaTypes.StreamComponentType>;
-                top: number;
-                left: number;
-                width: number;
-                height: number;
-                styles: {
-                    paddingTop: number;
-                    paddingRight: number;
-                    paddingBottom: number;
-                    paddingLeft: number;
-                } | null;
-            }>;
         }>;
     };
 };