@streamscloud/embeddable 5.1.3 → 6.0.0

package/dist/short-videos/short-video-card/cmp.short-video-card.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">import { Icon } from '../../ui/icon';
+import { ImageRounded } from '../../ui/image';
+import { LineClamp } from '../../ui/line-clamp';
+import { ProportionalContainer } from '../../ui/proportional-container';
+import IconPhone from '@fluentui/svg-icons/icons/phone_20_regular.svg?raw';
+let { shortVideo, aspectRatio = 9 / 16, on } = $props();
+</script>
+
+<div class="short-video-card">
+  <div class="short-video-card__media">
+    <ProportionalContainer ratio={aspectRatio}>
+      <ImageRounded src={shortVideo.cover} alt="" noBorders={true} />
+    </ProportionalContainer>
+
+    <div class="short-video-card__media-icons">
+      <Icon src={IconPhone}></Icon>
+    </div>
+
+    <div class="short-video-card__gradient-overlay"></div>
+  </div>
+
+  {#if shortVideo.text}
+    <div class="short-video-card__text">
+      <div class="short-video-card__text-value">
+        <LineClamp value={shortVideo.text} maxLines={2} enableShowMore={false} />
+      </div>
+    </div>
+  {/if}
+
+  {#if on?.click}
+    <button type="button" onclick={on.click} class="short-video-card__link" aria-label="none">&nbsp;</button>
+  {/if}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.short-video-card {
+  position: relative;
+  overflow: hidden;
+  container-type: inline-size;
+  width: 100%;
+  border-radius: 0.375rem;
+}
+.short-video-card__media {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  --image--rounded--outer--border-radius: 1%;
+}
+.short-video-card__gradient-overlay {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 350px) {
+  .short-video-card__gradient-overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 80px;
+    background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
+    pointer-events: none;
+  }
+}
+.short-video-card__media-icons {
+  position: absolute;
+  top: 0.625em;
+  right: 0.625em;
+  display: flex;
+  align-items: center;
+  gap: 0.3125em;
+  --icon--size: 1.25em;
+  --icon--color: #ffffff;
+}
+.short-video-card__text {
+  font-weight: 500;
+  white-space: pre-line;
+  word-break: break-word;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  line-clamp: 3;
+  -webkit-line-clamp: 3;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+.short-video-card__text-value {
+  font-size: 0.9375em;
+  line-height: 1.2;
+}
+@container (width < 350px) {
+  .short-video-card__text {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%);
+    color: #ffffff;
+    font-size: 0.9375rem;
+    font-weight: 400;
+    padding: 0.78125rem 1rem;
+    padding-top: 2.5rem;
+  }
+}
+.short-video-card__link {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}</style>

package/dist/short-videos/short-video-card/cmp.short-video-card.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ShortVideoCardModel } from './types';
+type Props = {
+    shortVideo: ShortVideoCardModel;
+    aspectRatio?: number;
+    on?: {
+        click?: () => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/short-videos/short-video-card/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ShortVideoCard } from './cmp.short-video-card.svelte';
+export type { ShortVideoCardModel } from './types';

package/dist/short-videos/short-video-card/index.js

@@ -0,0 +1 @@
+export { default as ShortVideoCard } from './cmp.short-video-card.svelte';

package/dist/short-videos/short-video-card/types.d.ts

@@ -0,0 +1,5 @@
+export type ShortVideoCardModel = {
+    id: string;
+    text: string | null;
+    cover: string;
+};

package/dist/short-videos/short-video-card/types.js

@@ -0,0 +1 @@
+export {};

package/dist/short-videos/short-video-viewer/cmp.short-video-controls.svelte

@@ -49,19 +49,19 @@ const onLikeClicked = () => __awaiter(void 0, void 0, void 0, function* () {
     if (!socialInteractionsHandler) {
         return;
     }
-    yield socialInteractionsHandler.onToggleLike(model.id);
+    yield socialInteractionsHandler.toggleLike(model.id);
 });
 const onShareClicked = () => __awaiter(void 0, void 0, void 0, function* () {
     if (!socialInteractionsHandler) {
         return;
     }
-    yield socialInteractionsHandler.onShare(model.id);
+    yield socialInteractionsHandler.share(model.id);
 });
 const refreshIsLiked = () => __awaiter(void 0, void 0, void 0, function* () {
     if (!socialInteractionsHandler) {
         return;
     }
-    isLikedStore = yield socialInteractionsHandler.isLiked(model.id);
+    isLikedStore = yield socialInteractionsHandler.getIsLiked(model.id);
 });
 </script>
 

package/dist/short-videos/short-video-viewer/cmp.short-video-controls.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ShortVideoSocialInteractionsHandler } from './types';
+import type { IPostSocialInteractionsHandler } from './types';
 type Props = {
     model: {
         id: string;
@@ -9,7 +9,7 @@ type Props = {
             isImage: boolean;
         };
     };
-    socialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
+    socialInteractionsHandler?: IPostSocialInteractionsHandler;
     on?: {
         attachmentsClicked?: () => void;
     };

package/dist/short-videos/short-video-viewer/cmp.short-video-viewer.svelte

@@ -6,26 +6,9 @@ import { default as ShortVideoControls } from './cmp.short-video-controls.svelte
 import { default as ShortVideoHeading } from './cmp.short-video-heading.svelte';
 import { ShortVideoViewerLocalization } from './short-video-viewer-localization';
 import { ShortVideoViewerUiManager } from './ui-manager.svelte';
-let { model, socialInteractionsHandler, availableSideSpace = 0, showAttachments = true, showControls = true, autoplay = 'on-appearance', localization: localizationInit = 'en', on } = $props();
+let { model, socialInteractionsHandler, showAttachments = true, showControls = true, autoplay = 'on-appearance', localization: localizationInit = 'en', on } = $props();
 const localization = $derived(new ShortVideoViewerLocalization(localizationInit));
-let actionsPanelRef = $state.raw(null);
 const uiManager = new ShortVideoViewerUiManager();
-$effect(() => {
-    if (actionsPanelRef) {
-        const resizeObserver = new ResizeObserver(() => {
-            if (actionsPanelRef) {
-                uiManager.updateActionsPanelWidth(actionsPanelRef.clientWidth);
-            }
-        });
-        resizeObserver.observe(actionsPanelRef);
-        return () => {
-            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
-        };
-    }
-});
-$effect(() => {
-    uiManager.updateAvailableSideSpace(availableSideSpace);
-});
 $effect(() => {
     uiManager.updateCanShowAttachments(showAttachments);
     uiManager.updateCanShowControls(showControls);
@@ -51,10 +34,7 @@ $effect(() => {
     {/if}
   </div>
 
-  <div
-    class="short-video-viewer__actions-panel"
-    class:short-video-viewer__actions-panel--inside-frame={uiManager.showActionsInsideFrame}
-    bind:this={actionsPanelRef}>
+  <div class="short-video-viewer__actions-panel" class:short-video-viewer__actions-panel--inside-frame={true}>
     {#if uiManager.showAttachments}
       <AttachmentsInline model={model} />
     {/if}
@@ -88,8 +68,6 @@ $effect(() => {
   }
 }
 .short-video-viewer {
-  --_short-video-viewer--actions-panel--top: var(--short-video-viewer--actions-panel--top, 0.9375rem);
-  --_short-video-viewer--actions-panel--bottom: var(--short-video-viewer--actions-panel--bottom, 0.9375rem);
   --video--media-fit: cover;
   width: 100%;
   min-width: 100%;
@@ -116,8 +94,8 @@ $effect(() => {
 .short-video-viewer__actions-panel {
   position: absolute;
   left: calc(100% + 0.625rem);
-  top: var(--_short-video-viewer--actions-panel--top);
-  bottom: var(--_short-video-viewer--actions-panel--bottom);
+  top: 0.9375rem;
+  bottom: 0.9375rem;
   gap: 2.5rem;
   display: flex;
   flex-direction: column;
@@ -128,12 +106,16 @@ $effect(() => {
   .short-video-viewer__actions-panel {
     left: auto;
     right: 0.625rem;
+    top: 5rem;
+    bottom: 5rem;
     align-items: flex-end;
   }
 }
 .short-video-viewer__actions-panel--inside-frame {
   left: auto;
   right: 0.625rem;
+  top: 5rem;
+  bottom: 5rem;
   align-items: flex-end;
 }
 .short-video-viewer__description {

package/dist/short-videos/short-video-viewer/cmp.short-video-viewer.svelte.d.ts

@@ -1,10 +1,9 @@
 import type { Locale } from '../../core/locale';
 import { type IShortVideoViewerLocalization } from './short-video-viewer-localization';
-import type { ShortVideoSocialInteractionsHandler, ShortVideoViewerModel } from './types';
+import type { IPostSocialInteractionsHandler, ShortVideoViewerModel } from './types';
 type Props = {
     model: ShortVideoViewerModel;
-    socialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
-    availableSideSpace?: number;
+    socialInteractionsHandler?: IPostSocialInteractionsHandler;
     showAttachments?: boolean;
     showControls?: boolean;
     autoplay?: true | false | 'on-appearance';

package/dist/short-videos/short-video-viewer/index.d.ts

@@ -2,7 +2,7 @@ export { default as ShortVideoViewer } from './cmp.short-video-viewer.svelte';
 export { default as ShortVideoControls } from './cmp.short-video-controls.svelte';
 export { default as ShortVideoViewerAttachments } from './cmp.attachments.svelte';
 export { default as ShortVideoViewerAttachmentsInline } from './cmp.attachments-inline.svelte';
-export type { ShortVideoViewerModel, ShortVideoSocialInteractionsHandler, ShortVideoAdCardModel, ShortVideoProductCardModel } from './types';
+export type { ShortVideoViewerModel, IPostSocialInteractionsHandler, ShortVideoAdCardModel, ShortVideoProductCardModel } from './types';
 export type { IShortVideoViewerLocalization } from './short-video-viewer-localization';
 export type { IShortVideoAttachmentsLocalization } from './short-video-attachments-localization';
 export { mapToShortVideoViewerModel } from './mapper';

package/dist/short-videos/short-video-viewer/mapper.js

@@ -3,6 +3,9 @@ import { getMediaItemImageUrl } from '../../core/media';
 import { shouldUseSalePrice } from '../../products/price-helper';
 export const mapToShortVideoViewerModel = (payload) => {
     const mediaBlob = payload.postData.media[0];
+    if (!mediaBlob) {
+        console.warn('Short video media is missing. Unexpected behavior.');
+    }
     return {
         id: payload.id,
         media: mediaBlob.type === MediaType.Image
@@ -18,7 +21,7 @@ export const mapToShortVideoViewerModel = (payload) => {
         ad: payload.ad ? mapToShortVideoAdCardModel(payload.ad) : null,
         products: payload.allProducts.map((x) => mapToShortVideoProductCard(x))
         // uncomment if you want to test many products behavior
-        // .flatMap(x =>
+        // .flatMap((x) =>
         //   Array.from({ length: 20 }, (_, i) => ({
         //     ...x,
         //     id: x.id + String(i + 1)
@@ -30,7 +33,7 @@ const mapToShortVideoAdCardModel = (payload) => {
     return {
         id: payload.id,
         type: payload.type,
-        image: getMediaItemImageUrl(payload.media[0]),
+        image: payload.media.length ? getMediaItemImageUrl(payload.media[0]) : null,
         title: payload.title,
         description: payload.description,
         price: payload.price,
@@ -53,7 +56,7 @@ const mapToShortVideoProductCard = (payload, referenceDate) => {
         shortDescription: payload.shortDescription,
         link: payload.link,
         brandName: payload.brand?.name || null,
-        image: payload.media?.length ? getMediaItemImageUrl(payload.media[0]) : null,
+        image: payload.media.length ? getMediaItemImageUrl(payload.media[0]) : null,
         currency: payload.priceAndAvailability.currency,
         price: payload.priceAndAvailability.price,
         salePrice: effectiveSalePrice?.salePrice ?? null

package/dist/short-videos/short-video-viewer/types.d.ts

@@ -9,7 +9,7 @@ export type ShortVideoViewerModel = {
         url: string;
         thumbnailUrl: string;
     };
-    text?: string | null;
+    text: string | null;
     heading: ShortVideoViewerHeadingModel | null;
     enableSocialInteractions: boolean;
     products: ShortVideoProductCardModel[];
@@ -21,13 +21,14 @@ export type ShortVideoViewerHeadingModel = {
     displayDate: string;
     viewsCount: number;
 };
-export type ShortVideoSocialInteractionsHandler = {
-    isLiked: (shortVideoId: string) => Promise<{
+export interface IPostSocialInteractionsHandler {
+    getIsLiked: (shortVideoId: string) => PromiseLike<{
         readonly isLiked: boolean;
     }>;
-    onToggleLike: (shortVideoId: string) => void;
-    onShare: (shortVideoId: string) => void;
-};
+    toggleLike: (shortVideoId: string) => PromiseLike<void>;
+    share: (shortVideoId: string) => PromiseLike<void>;
+}
+type PromiseLike<T> = T | Promise<T>;
 export type ShortVideoProductCardModel = {
     id: string;
     title: string;
@@ -56,3 +57,4 @@ export type ShortVideoAdCardModel = {
         border: string;
     } | null;
 };
+export {};

package/dist/short-videos/short-video-viewer/ui-manager.svelte.d.ts

@@ -1,16 +1,11 @@
 export declare class ShortVideoViewerUiManager {
     readonly globalCssVariables: string;
-    readonly showActionsInsideFrame: boolean;
     readonly showAttachments: boolean;
     readonly showControls: boolean;
     private readonly buttonSize;
-    private actionsPanelWidth;
-    private availableSideSpace;
     private canShowControls;
     private canShowAttachments;
     private enableAttachments;
-    updateActionsPanelWidth: (value: number) => void;
-    updateAvailableSideSpace: (value: number) => void;
     updateCanShowAttachments: (value: boolean) => void;
     updateCanShowControls: (value: boolean) => void;
     toggleEnableAttachments: () => void;

package/dist/short-videos/short-video-viewer/ui-manager.svelte.js

@@ -3,9 +3,6 @@ export class ShortVideoViewerUiManager {
         const values = [`--_short-video-viewer--button--size: ${this.buttonSize}px`];
         return values.join(';');
     });
-    showActionsInsideFrame = $derived.by(() => {
-        return this.actionsPanelWidth + 40 > this.availableSideSpace;
-    });
     showAttachments = $derived.by(() => {
         return this.canShowAttachments && this.enableAttachments;
     });
@@ -13,20 +10,12 @@ export class ShortVideoViewerUiManager {
         return this.canShowControls;
     });
     buttonSize = 40;
-    actionsPanelWidth = $state(0);
-    availableSideSpace = $state(0);
     // is provided from the calling side
     canShowControls = $state(false);
     // is provided from the calling side
     canShowAttachments = $state(false);
     // managed internally by component
     enableAttachments = $state(true);
-    updateActionsPanelWidth = (value) => {
-        this.actionsPanelWidth = value;
-    };
-    updateAvailableSideSpace = (value) => {
-        this.availableSideSpace = value;
-    };
     updateCanShowAttachments = (value) => {
         this.canShowAttachments = value;
     };

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

@@ -1,20 +1,24 @@
-<script lang="ts">import {} from '../../core/locale';
+<script lang="ts">import { MediaCenter, MediaCenterMode } from '../../media-center/media-center';
 import { createShadowRoot } from '../../ui/shadow-dom';
-import {} from './short-videos-player-localization';
-import { default as ShortVideosPlayerView } from './short-videos-player-view.svelte';
 import { mount, unmount } from 'svelte';
-let { input, socialInteractionsHandler, localization, showStreamsCloudWatermark, disableBackground, on } = $props();
+let { dataProvider, socialInteractionsHandler, localization, showStreamsCloudWatermark, disableBackground, on, mediaCenterDataProvider } = $props();
 const initHost = (node) => {
     const shadowRoot = createShadowRoot(node);
-    const mounted = mount(ShortVideosPlayerView, {
+    const mounted = mount(MediaCenter, {
         target: shadowRoot,
         props: {
-            input,
-            socialInteractionsHandler,
-            localization,
-            showStreamsCloudWatermark,
-            disableBackground,
-            on
+            dataProvider: mediaCenterDataProvider || null,
+            playerProps: {
+                type: MediaCenterMode.ShortVideos,
+                props: {
+                    dataProvider,
+                    socialInteractionsHandler,
+                    disableBackground,
+                    localization,
+                    showStreamsCloudWatermark,
+                    on
+                }
+            }
         }
     });
     return {
@@ -25,6 +29,6 @@ const initHost = (node) => {
 };
 </script>
 
-{#key input}
+{#key dataProvider}
   <div class="short-videos-player-host" use:initHost></div>
 {/key}

package/dist/short-videos/short-videos-player/cmp.short-videos-player.svelte.d.ts

@@ -1,18 +1,8 @@
-import { type Locale } from '../../core/locale';
-import type { ShortVideoSocialInteractionsHandler } from '../short-video-viewer';
-import { type IShortVideosPlayerLocalization } from './short-videos-player-localization';
-import type { PlayerInput } from './types';
-type Props = {
-    input: PlayerInput;
-    socialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
-    localization?: IShortVideosPlayerLocalization | Locale;
-    showStreamsCloudWatermark?: boolean;
-    disableBackground?: boolean;
-    on?: {
-        closePlayer?: () => void;
-        videoActivated?: (id: string) => void;
-    };
+import type { IMediaCenterDataProvider } from '../../media-center/data-provider';
+import type { ShortVideoPlayerProps } from './types';
+type $$ComponentProps = ShortVideoPlayerProps & {
+    mediaCenterDataProvider?: IMediaCenterDataProvider;
 };
-declare const Cmp: import("svelte").Component<Props, {}, "">;
+declare const Cmp: import("svelte").Component<$$ComponentProps, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

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

@@ -5,7 +5,7 @@ import { ShortVideosPlayerLocalization } from './short-videos-player-localizatio
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
 import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_20_regular.svg?raw';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
-let { buffer, uiManager, localization, socialInteractionsHandler, on } = $props();
+let { buffer, uiManager, localization, socialInteractionsHandler, playerLogo, on } = $props();
 const shortVideo = $derived(buffer.current);
 const changeShowAttachments = () => {
     uiManager.showAttachments = !uiManager.showAttachments;
@@ -39,6 +39,11 @@ const changeShowAttachments = () => {
       </div>
     </div>
     <div class="short-videos-player-controls__right">
+      {#if playerLogo}
+        <div class="short-videos-player-controls__player-logo">
+          <img src={playerLogo} class="short-videos-player-controls__logo-img" alt="Player Logo" />
+        </div>
+      {/if}
       {#if shortVideo && uiManager.showAttachments}
         <div class="short-videos-player-controls__short-video-attachments" transition:slideHorizontally|local>
           <ShortVideoViewerAttachments
@@ -75,10 +80,10 @@ const changeShowAttachments = () => {
   top: 0;
   right: 0;
   height: 100%;
-  width: var(--short-videos-player--sidebar--available-space);
+  width: var(--short-videos-player--controls--available-space);
   display: flex;
   justify-content: space-between;
-  padding: var(--short-videos-player--controls--offset-vertical) var(--short-videos-player--controls--offset-horizontal);
+  padding: var(--short-videos-player--controls--padding);
   container-type: inline-size;
 }
 .short-videos-player-controls__left {
@@ -87,6 +92,9 @@ const changeShowAttachments = () => {
   gap: 2.3125rem;
   justify-content: flex-end;
   align-items: center;
+  padding-top: var(--short-videos-player--media-center-header--height);
+  opacity: var(--short-videos-player--elements-opacity);
+  transition: opacity 0.3s ease-in-out;
 }
 .short-videos-player-controls__right {
   flex: 1;
@@ -131,6 +139,27 @@ const changeShowAttachments = () => {
   justify-content: flex-end;
   --short-video-controls--icon--size: var(--short-videos-player--icon--size);
 }
+.short-videos-player-controls__player-logo {
+  width: 11rem;
+  max-width: 11rem;
+  height: var(--short-videos-player--media-center-header--height);
+  min-height: var(--short-videos-player--media-center-header--height);
+  max-height: var(--short-videos-player--media-center-header--height);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < calc(11rem + 3.75rem)) {
+  .short-videos-player-controls__player-logo {
+    display: none;
+  }
+}
+.short-videos-player-controls__logo-img {
+  width: 6.25rem;
+  min-width: 6.25rem;
+  max-width: 6.25rem;
+}
 .short-videos-player-controls__short-video-attachments-inline {
   display: none;
   /* Set 'container-type: inline-size;' to reference container*/
@@ -144,6 +173,8 @@ const changeShowAttachments = () => {
   flex: 1;
   width: 11rem;
   max-width: 11rem;
+  opacity: var(--short-videos-player--elements-opacity);
+  transition: opacity 0.3s ease-in-out;
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < calc(11rem + 3.75rem)) {

package/dist/short-videos/short-videos-player/controls.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type ShortVideoSocialInteractionsHandler, type ShortVideoViewerModel } from '../short-video-viewer';
+import { type IPostSocialInteractionsHandler, type ShortVideoViewerModel } from '../short-video-viewer';
 import type { IPlayerBuffer } from '../../ui/player';
 import { ShortVideosPlayerLocalization } from './short-videos-player-localization';
 import type { ShortVideosPlayerUiManager } from './ui-manager.svelte';
@@ -6,7 +6,8 @@ type Props = {
     buffer: IPlayerBuffer<ShortVideoViewerModel>;
     uiManager: ShortVideosPlayerUiManager;
     localization: ShortVideosPlayerLocalization;
-    socialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
+    socialInteractionsHandler?: IPostSocialInteractionsHandler;
+    playerLogo: string | null;
     on: {
         closePlayer?: () => void;
         productClick?: (productId: string) => void;

package/dist/short-videos/short-videos-player/fade-mixins.scss

@@ -0,0 +1,12 @@
+@mixin default-opacity {
+  --short-videos-player--elements-opacity: 1;
+}
+
+@mixin fade-opacity {
+  --short-videos-player--elements-opacity: 0;
+}
+
+@mixin handle-fade {
+  opacity: var(--short-videos-player--elements-opacity);
+  transition: opacity 0.3s ease-in-out;
+}