@streamscloud/embeddable 1.1.2

package/dist/streams/stream-player/cmp.stream-player.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type IStreamPlayerLocalization } from './stream-player-localization.svelte';
+import type { Client } from '@urql/core';
+type Props = {
+    streamId: string;
+    localization?: IStreamPlayerLocalization;
+    graphql: Client;
+    on?: {
+        closePlayer?: () => void;
+        streamActivated?: (data: {
+            title: string;
+        }) => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,222 @@
+<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 { Icon } from '../../ui/icon';
+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';
+import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_20_regular.svg';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg';
+import IconFullScreenMaximize from '@fluentui/svg-icons/icons/full_screen_maximize_20_regular.svg';
+import IconPanelRightGallery from '@fluentui/svg-icons/icons/panel_right_gallery_20_regular.svg';
+import IconSpeaker2 from '@fluentui/svg-icons/icons/speaker_2_20_regular.svg';
+import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_20_regular.svg';
+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));
+</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>
+      </div>
+    {/if}
+    <div class="stream-player-controls__navigation-buttons">
+      <button type="button" class="navigation-button" disabled={!buffer.canLoadPrevious} onclick={buffer.loadPrevious}>
+        <Icon src={IconChevronUp} />
+      </button>
+      <button type="button" class="navigation-button" disabled={!buffer.canLoadNext} onclick={buffer.loadNext}>
+        <Icon src={IconChevronDown} />
+      </button>
+    </div>
+  </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>
+    {/if}
+    <div class="stream-player-controls__controls">
+      {#if shortVideo}
+        <ActionButton on={{ click: toggleMuted }}>
+          {#if MediaVolumeManager.isMuted}
+            <Icon src={IconSpeakerMute} />
+          {:else}
+            <Icon src={IconSpeaker2} />
+          {/if}
+        </ActionButton>
+      {/if}
+      {#if !uiManager.overviewCollapsed}
+        <ActionButton on={{ click: () => (uiManager.overviewCollapsed = true) }}>
+          <Icon src={IconFullScreenMaximize} />
+        </ActionButton>
+      {/if}
+    </div>
+  </div>
+</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
+    }} />
+  <div class="toggle-collapsed-button">
+    <ActionButton on={{ click: () => (uiManager.shortVideoDetailsCollapsed = !uiManager.shortVideoDetailsCollapsed) }}>
+      <Icon src={IconPanelRightGallery} />
+    </ActionButton>
+  </div>
+{/if}
+<button type="button" class="close-button navigation-button" onclick={on.closePlayer}>
+  <Icon src={IconDismiss} />
+</button>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.close-button {
+  position: absolute;
+  top: var(--stream-player--controls--offset-vertical);
+  right: var(--stream-player--controls--offset-horizontal);
+  z-index: 1;
+}
+
+.toggle-collapsed-button {
+  position: absolute;
+  bottom: var(--stream-player--controls--offset-vertical);
+  right: var(--stream-player--controls--offset-horizontal);
+  z-index: 1;
+}
+
+.stream-player-controls {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: var(--stream-player--sidebar--available-space);
+  display: flex;
+  justify-content: space-between;
+  gap: 2.5rem;
+  padding: var(--stream-player--controls--offset-vertical) var(--stream-player--controls--offset-horizontal);
+  container-type: inline-size;
+}
+.stream-player-controls__left {
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+  justify-content: flex-end;
+}
+.stream-player-controls__right {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  flex-direction: column;
+  padding-top: 3.75rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 9.375rem) {
+  .stream-player-controls__right {
+    display: none;
+  }
+}
+.stream-player-controls__short-video-overlay {
+  gap: 2.5rem;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-end;
+  --short-video-viewer--interactions--icon--size: var(--stream-player--navigation-button--size);
+  --short-video-viewer--interactions--background--color: #1c1c1c;
+  --short-video-viewer--interactions--counter--color: #f3f4f6;
+  --short-video-viewer--interactions--icon--font-color: #f3f4f6;
+}
+.stream-player-controls__short-video-attachments {
+  display: none;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 16.25rem) {
+  .stream-player-controls__short-video-attachments {
+    display: contents;
+  }
+}
+.stream-player-controls__short-video-products {
+  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;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 16.25rem) {
+  .stream-player-controls__short-video-products {
+    display: none;
+  }
+}
+.stream-player-controls__navigation-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 0.625rem;
+  z-index: 1;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 6.25rem) {
+  .stream-player-controls__navigation-buttons {
+    visibility: hidden;
+  }
+}
+.stream-player-controls__controls {
+  display: flex;
+  margin-top: auto;
+  gap: 1rem;
+  align-self: flex-start;
+}
+
+.navigation-button {
+  width: var(--stream-player--navigation-button--size);
+  min-width: var(--stream-player--navigation-button--size);
+  max-width: var(--stream-player--navigation-button--size);
+  height: var(--stream-player--navigation-button--size);
+  min-height: var(--stream-player--navigation-button--size);
+  max-height: var(--stream-player--navigation-button--size);
+  background-color: #000000;
+  border: 1px solid #1c1c1c;
+  border-radius: 50%;
+  text-align: center;
+  --icon--color: #ffffff;
+  --icon--stroke-width: 0.6;
+}
+.navigation-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}</style>

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

@@ -0,0 +1,14 @@
+import type { StreamPlayerBuffer } from './stream-player-buffer.svelte';
+import { StreamPlayerLocalization } from './stream-player-localization.svelte';
+import type { StreamPlayerUiManager } from './ui-manager.svelte';
+type Props = {
+    buffer: StreamPlayerBuffer;
+    uiManager: StreamPlayerUiManager;
+    localization: StreamPlayerLocalization;
+    on: {
+        closePlayer: () => void;
+    };
+};
+declare const Controls: import("svelte").Component<Props, {}, "">;
+type Controls = ReturnType<typeof Controls>;
+export default Controls;

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

@@ -0,0 +1,2 @@
+export { default as StreamPlayer } from './cmp.stream-player.svelte';
+export type { IStreamPlayerLocalization } from './stream-player-localization.svelte';

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

@@ -0,0 +1 @@
+export { default as StreamPlayer } from './cmp.stream-player.svelte';

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

@@ -0,0 +1,3 @@
+import type { StreamPlayerPayloadFragment } from './operations.generated';
+import type { StreamPlayerModel } from './types';
+export declare const mapStreamPlayerModel: (payload: StreamPlayerPayloadFragment) => StreamPlayerModel;

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

@@ -0,0 +1,15 @@
+export const mapStreamPlayerModel = (payload) => {
+    const headerDataProvider = payload.availableFrom ?? payload.ownerProfile;
+    return {
+        id: payload.id,
+        title: payload.title,
+        subTitle: payload.subTitle || null,
+        createdAt: payload.createdAt,
+        publishedAt: payload.publishedAt,
+        header: {
+            name: headerDataProvider.name,
+            image: headerDataProvider.image
+        },
+        pagesCount: payload.pagesCount
+    };
+};

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

@@ -0,0 +1,161 @@
+import type * as SchemaTypes from '../../../gql/types';
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+export type GetStreamQueryVariables = SchemaTypes.Exact<{
+    id: SchemaTypes.Scalars['String']['input'];
+}>;
+export type GetStreamQuery = {
+    stream: {
+        id: string;
+        title: string;
+        subTitle: string | null;
+        createdAt: any;
+        publishedAt: any | null;
+        pagesCount: number;
+        ownerProfile: {
+            image: string | null;
+            name: string;
+        };
+        availableFrom: {
+            image: string;
+            name: string;
+        } | null;
+    } | null;
+};
+export type GetStreamPagesQueryVariables = SchemaTypes.Exact<{
+    input: SchemaTypes.StreamPagesInput;
+    image_scale: SchemaTypes.ImageScale;
+}>;
+export type GetStreamPagesQuery = {
+    streamPages: {
+        continuationToken: string | null;
+        items: Array<{
+            id: string;
+            name: string | null;
+            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;
+            }>;
+        }>;
+    };
+};
+export type StreamPlayerPayloadFragment = {
+    id: string;
+    title: string;
+    subTitle: string | null;
+    createdAt: any;
+    publishedAt: any | null;
+    pagesCount: number;
+    ownerProfile: {
+        image: string | null;
+        name: string;
+    };
+    availableFrom: {
+        image: string;
+        name: string;
+    } | null;
+};
+export declare const StreamPlayerPayloadFragmentDoc: DocumentNode<StreamPlayerPayloadFragment, unknown>;
+export declare const GetStreamDocument: DocumentNode<GetStreamQuery, GetStreamQueryVariables>;
+export declare const GetStreamPagesDocument: DocumentNode<GetStreamPagesQuery, GetStreamPagesQueryVariables>;