@streamscloud/embeddable 3.4.2 → 5.0.0

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

@@ -1,70 +1,63 @@
-<script lang="ts">import { ShortVideoDetails, ShortVideoViewerAttachments, ShortVideoViewerAttachmentsInline } from '../short-video-viewer';
+<script lang="ts">import { slideHorizontally } from '../../core/transitions';
+import { ShortVideoControls, ShortVideoViewerAttachments, ShortVideoViewerAttachmentsInline } from '../short-video-viewer';
 import { Icon } from '../../ui/icon';
-import { MediaVolumeManager } from '../../ui/media-playback';
-import { default as ActionButton } from './action-button.svelte';
 import { ShortVideosPlayerLocalization } from './short-videos-player-localization';
 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';
-import IconPanelRightGallery from '@fluentui/svg-icons/icons/panel_right_gallery_20_regular.svg?raw';
-import IconSpeaker2 from '@fluentui/svg-icons/icons/speaker_2_20_regular.svg?raw';
-import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_20_regular.svg?raw';
-let { buffer, uiManager, localization, on } = $props();
-const toggleMuted = () => {
-    MediaVolumeManager.isMuted = !MediaVolumeManager.isMuted;
-};
+let { buffer, uiManager, localization, socialInteractionsHandler, on } = $props();
 const shortVideo = $derived(buffer.current);
+const changeShowAttachments = () => {
+    uiManager.showAttachments = !uiManager.showAttachments;
+};
 </script>
 
-<div class="short-videos-player-controls">
-  <div class="short-videos-player-controls__left">
-    {#if shortVideo && uiManager.detailsCollapsed && !uiManager.showShortVideoOverlay}
-      <div class="short-videos-player-controls__short-video-overlay">
-        <div class="short-videos-player-controls__short-video-attachments-inline">
-          <ShortVideoViewerAttachmentsInline model={shortVideo} />
+{#if uiManager.viewInitialized && !uiManager.showShortVideoOverlay}
+  <div class="short-videos-player-controls">
+    <div class="short-videos-player-controls__left">
+      {#if shortVideo}
+        <div class="short-videos-player-controls__short-video-hub">
+          {#if uiManager.showAttachments}
+            <div class="short-videos-player-controls__short-video-attachments-inline">
+              <ShortVideoViewerAttachmentsInline model={shortVideo} />
+            </div>
+          {/if}
+          <ShortVideoControls model={shortVideo} socialInteractionsHandler={socialInteractionsHandler} on={{ attachmentsClicked: changeShowAttachments }} />
         </div>
+      {/if}
+      <div class="short-videos-player-controls__navigation-buttons">
+        <button type="button" class="navigation-button" disabled={!buffer.canLoadPrevious} onclick={buffer.loadPrevious}>
+          <span class="navigation-button__icon">
+            <Icon src={IconChevronUp} />
+          </span>
+        </button>
+        <button type="button" class="navigation-button" disabled={!buffer.canLoadNext} onclick={buffer.loadNext}>
+          <span class="navigation-button__icon">
+            <Icon src={IconChevronDown} />
+          </span>
+        </button>
       </div>
-    {/if}
-    <div class="short-videos-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="short-videos-player-controls__right">
-    {#if shortVideo}
-      <div class="short-videos-player-controls__short-video-attachments">
-        <ShortVideoViewerAttachments shortVideo={shortVideo} localization={localization.shortVideoAttachmentsLocalization} />
-      </div>
-    {/if}
-    <div class="short-videos-player-controls__controls">
-      {#if shortVideo}
-        <ActionButton on={{ click: toggleMuted }}>
-          {#if MediaVolumeManager.isMuted}
-            <Icon src={IconSpeakerMute} />
-          {:else}
-            <Icon src={IconSpeaker2} />
-          {/if}
-        </ActionButton>
+    <div class="short-videos-player-controls__right">
+      {#if shortVideo && uiManager.showAttachments}
+        <div class="short-videos-player-controls__short-video-attachments" transition:slideHorizontally|local>
+          <ShortVideoViewerAttachments
+            shortVideo={shortVideo}
+            localization={localization.shortVideoAttachmentsLocalization}
+            on={{
+              productClick: on.productClick
+            }} />
+        </div>
       {/if}
     </div>
   </div>
-</div>
+{/if}
 
-{#if shortVideo && !uiManager.isMobileView}
-  <ShortVideoDetails shortVideo={shortVideo} collapsed={uiManager.detailsCollapsed} localization={localization.shortVideoDetailsLocalization} />
-  <div class="toggle-collapsed-button">
-    <ActionButton on={{ click: () => (uiManager.detailsCollapsed = !uiManager.detailsCollapsed) }}>
-      <Icon src={IconPanelRightGallery} />
-    </ActionButton>
-  </div>
+{#if on.closePlayer}
+  <button type="button" class="close-button" onclick={on.closePlayer}>
+    <Icon src={IconDismiss} />
+  </button>
 {/if}
-<button type="button" class="close-button navigation-button" onclick={on.closePlayer}>
-  <Icon src={IconDismiss} />
-</button>
 
 <style>@keyframes fadeIn {
   0% {
@@ -77,20 +70,6 @@ const shortVideo = $derived(buffer.current);
     opacity: 1;
   }
 }
-.close-button {
-  position: absolute;
-  top: var(--short-videos-player--controls--offset-vertical);
-  right: var(--short-videos-player--controls--offset-horizontal);
-  z-index: 1;
-}
-
-.toggle-collapsed-button {
-  position: absolute;
-  bottom: var(--short-videos-player--controls--offset-vertical);
-  right: var(--short-videos-player--controls--offset-horizontal);
-  z-index: 1;
-}
-
 .short-videos-player-controls {
   position: absolute;
   top: 0;
@@ -99,15 +78,15 @@ const shortVideo = $derived(buffer.current);
   width: var(--short-videos-player--sidebar--available-space);
   display: flex;
   justify-content: space-between;
-  gap: 2.5rem;
   padding: var(--short-videos-player--controls--offset-vertical) var(--short-videos-player--controls--offset-horizontal);
   container-type: inline-size;
 }
 .short-videos-player-controls__left {
   display: flex;
   flex-direction: column;
-  gap: 2.5rem;
+  gap: 2.3125rem;
   justify-content: flex-end;
+  align-items: center;
 }
 .short-videos-player-controls__right {
   flex: 1;
@@ -115,69 +94,59 @@ const shortVideo = $derived(buffer.current);
   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) {
-  .short-videos-player-controls__right {
-    display: none;
-  }
-}
-.short-videos-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(--short-videos-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;
-}
-.short-videos-player-controls__short-video-attachments-inline {
-  display: none;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < calc(21.875rem + 3.75rem)) {
-  .short-videos-player-controls__short-video-attachments-inline {
-    display: contents;
-  }
-}
-.short-videos-player-controls__short-video-attachments {
-  flex: 1;
   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*/
 }
-.short-videos-player-controls__short-video-attachments::-webkit-scrollbar {
+.short-videos-player-controls__right::-webkit-scrollbar {
   width: 3px;
   height: 3px;
   background: var(--custom-scrollbar-background, transparent);
   visibility: hidden;
 }
-.short-videos-player-controls__short-video-attachments::-webkit-scrollbar-thumb {
+.short-videos-player-controls__right::-webkit-scrollbar-thumb {
   background: transparent;
 }
-.short-videos-player-controls__short-video-attachments:hover {
+.short-videos-player-controls__right:hover {
   scrollbar-color: var(--custom-scrollbar-color, #7d7d7d) var(--custom-scrollbar-background, transparent);
   scrollbar-width: thin;
 }
-.short-videos-player-controls__short-video-attachments:hover::-webkit-scrollbar {
+.short-videos-player-controls__right:hover::-webkit-scrollbar {
   width: 3px;
   height: 3px;
   background: var(--custom-scrollbar-background, transparent);
   visibility: hidden;
 }
-.short-videos-player-controls__short-video-attachments:hover::-webkit-scrollbar-thumb {
+.short-videos-player-controls__right:hover::-webkit-scrollbar-thumb {
   background: var(--custom-scrollbar-color, #7d7d7d);
 }
-@container (width < calc(21.875rem + 3.75rem)) {
+.short-videos-player-controls__short-video-hub {
+  gap: 2.5rem;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-end;
+  --short-video-controls--icon--size: var(--short-videos-player--icon--size);
+}
+.short-videos-player-controls__short-video-attachments-inline {
+  display: none;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < calc(11rem + 3.75rem)) {
+  .short-videos-player-controls__short-video-attachments-inline {
+    display: contents;
+  }
+}
+.short-videos-player-controls__short-video-attachments {
+  flex: 1;
+  width: 11rem;
+  max-width: 11rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < calc(11rem + 3.75rem)) {
   .short-videos-player-controls__short-video-attachments {
     display: none;
   }
@@ -188,35 +157,66 @@ const shortVideo = $derived(buffer.current);
   gap: 1rem;
   margin-bottom: 0.625rem;
   z-index: 1;
+}
+
+.close-button {
+  width: var(--short-videos-player--button--size);
+  min-width: var(--short-videos-player--button--size);
+  max-width: var(--short-videos-player--button--size);
+  height: var(--short-videos-player--button--size);
+  min-height: var(--short-videos-player--button--size);
+  max-height: var(--short-videos-player--button--size);
+  background-color: rgba(0, 0, 0, 0.6);
+  border: 1px solid #1c1c1c;
+  border-radius: 50%;
+  text-align: center;
+  --icon--color: #ffffff;
+  --icon--size: var(--short-videos-player--icon--size);
+  position: absolute;
+  top: 0.9375rem;
+  left: 0.625rem;
+  z-index: 1;
   /* Set 'container-type: inline-size;' to reference container*/
 }
-@container (width < 6.25rem) {
-  .short-videos-player-controls__navigation-buttons {
-    visibility: hidden;
-  }
+.close-button:disabled {
+  opacity: 0.5;
+  cursor: default;
 }
-.short-videos-player-controls__controls {
-  display: flex;
-  margin-top: auto;
-  gap: 1rem;
-  align-self: flex-start;
+.close-button:hover {
+  background-color: rgba(0, 0, 0, 0.9);
+  transition: background-color 0.5s;
+}
+@container (width < 576px) {
+  .close-button {
+    left: unset;
+    right: 0.625rem;
+  }
 }
 
 .navigation-button {
-  width: var(--short-videos-player--navigation-button--size);
-  min-width: var(--short-videos-player--navigation-button--size);
-  max-width: var(--short-videos-player--navigation-button--size);
-  height: var(--short-videos-player--navigation-button--size);
-  min-height: var(--short-videos-player--navigation-button--size);
-  max-height: var(--short-videos-player--navigation-button--size);
-  background-color: #000000;
+  --_icon-scale: 1;
+  width: var(--short-videos-player--button--size);
+  min-width: var(--short-videos-player--button--size);
+  max-width: var(--short-videos-player--button--size);
+  height: var(--short-videos-player--button--size);
+  min-height: var(--short-videos-player--button--size);
+  max-height: var(--short-videos-player--button--size);
+  background-color: rgba(0, 0, 0, 0.6);
   border: 1px solid #1c1c1c;
   border-radius: 50%;
   text-align: center;
   --icon--color: #ffffff;
-  --icon--stroke-width: 0.6;
+  --icon--size: var(--short-videos-player--icon--size);
 }
 .navigation-button:disabled {
   opacity: 0.5;
   cursor: default;
+}
+.navigation-button:hover:not(:disabled) {
+  --_icon-scale: 1.2;
+}
+.navigation-button__icon {
+  display: block;
+  transform: scale(var(--_icon-scale));
+  transition: 0.3s;
 }</style>

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

@@ -1,4 +1,4 @@
-import { type ShortVideoViewerModel } from '../short-video-viewer';
+import { type ShortVideoSocialInteractionsHanlder, 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,8 +6,10 @@ type Props = {
     buffer: IPlayerBuffer<ShortVideoViewerModel>;
     uiManager: ShortVideosPlayerUiManager;
     localization: ShortVideosPlayerLocalization;
+    socialInteractionsHandler?: ShortVideoSocialInteractionsHanlder;
     on: {
-        closePlayer: () => void;
+        closePlayer?: () => void;
+        productClick?: (productId: string) => void;
     };
 };
 declare const Controls: import("svelte").Component<Props, {}, "">;

package/dist/short-videos/short-videos-player/index.d.ts

@@ -1,5 +1,7 @@
+import { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
 import type { IShortVideosPlayerLocalization } from './short-videos-player-localization';
 import { type OpenShortVideosPlayerInit } from './types';
+export { ShortVideosPlayer };
 export type { IShortVideosPlayerLocalization };
 /**
  * Opens the short videos player modal with the specified provider or by fetching videos by IDs.

package/dist/short-videos/short-videos-player/index.js

@@ -1,8 +1,10 @@
 import { getLocale } from '../../core/locale';
-import { ShadowHost } from '../../ui/shadow-dom';
+import { ModalShadowHost } from '../../ui/shadow-dom';
 import { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
+import { default as ShortVideosPlayerView } from './short-videos-player-view.svelte';
 import { isIdsInit, isShortVideosProviderInit } from './types';
 import { mount, unmount } from 'svelte';
+export { ShortVideosPlayer };
 /**
  * Opens the short videos player modal with the specified provider or by fetching videos by IDs.
  *
@@ -90,12 +92,14 @@ export const openShortVideosPlayer = async (init) => {
     if (!input) {
         return;
     }
-    const shadowHost = new ShadowHost();
-    const mounted = mount(ShortVideosPlayer, {
+    const shadowHost = new ModalShadowHost();
+    const mounted = mount(ShortVideosPlayerView, {
         target: shadowHost.shadowRoot,
         props: {
             input,
+            socialInteractionsHandler: init.socialInteractionsHandler,
             localization: getLocale(init.localization),
+            showStreamsCloudWatermark: init.showStreamsCloudWatermark,
             on: {
                 closePlayer: async () => {
                     if (init.on?.playerClosed) {
@@ -103,6 +107,11 @@ export const openShortVideosPlayer = async (init) => {
                     }
                     await unmount(mounted);
                     shadowHost.remove();
+                },
+                videoActivated: (id) => {
+                    if (init.on?.videoActivated) {
+                        init.on.videoActivated(id);
+                    }
                 }
             }
         }

package/dist/short-videos/short-videos-player/operations.generated.d.ts

@@ -9,22 +9,19 @@ export type GetShortVideosQuery = {
         items: Array<{
             id: string;
             enableSocialInteractions: boolean;
-            postHeading: {
-                sourceImage: string | null;
-                sourceName: string;
-                postDisplayDate: any;
-                postViewsCount: number;
-            };
             allProducts: Array<{
-                title: string;
                 id: string;
-                link: string | null;
+                title: string;
                 shortDescription: string | null;
+                link: string | null;
                 media: Array<{
                     url: string;
                     thumbnailUrl: string | null;
                     type: SchemaTypes.MediaType;
                 }>;
+                brand: {
+                    name: string;
+                } | null;
                 priceAndAvailability: {
                     currency: SchemaTypes.Currency;
                     price: number;
@@ -40,6 +37,7 @@ export type GetShortVideosQuery = {
                 title: string;
                 description: string | null;
                 price: number | null;
+                priceInfo: string | null;
                 currency: SchemaTypes.Currency | null;
                 type: SchemaTypes.AdType;
                 ctaButton: {

package/dist/short-videos/short-videos-player/operations.generated.js

@@ -52,25 +52,16 @@ export const GetShortVideosDocument = {
                 selections: [
                     { kind: 'Field', name: { kind: 'Name', value: 'id' } },
                     { kind: 'Field', name: { kind: 'Name', value: 'enableSocialInteractions' } },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'postHeading' },
-                        selectionSet: {
-                            kind: 'SelectionSet',
-                            selections: [
-                                { kind: 'Field', name: { kind: 'Name', value: 'sourceImage' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'sourceName' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'postDisplayDate' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'postViewsCount' } }
-                            ]
-                        }
-                    },
                     {
                         kind: 'Field',
                         name: { kind: 'Name', value: 'allProducts' },
                         selectionSet: {
                             kind: 'SelectionSet',
                             selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'title' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'shortDescription' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'link' } },
                                 {
                                     kind: 'Field',
                                     name: { kind: 'Name', value: 'media' },
@@ -83,10 +74,11 @@ export const GetShortVideosDocument = {
                                         ]
                                     }
                                 },
-                                { kind: 'Field', name: { kind: 'Name', value: 'title' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'link' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'shortDescription' } },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'brand' },
+                                    selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'name' } }] }
+                                },
                                 {
                                     kind: 'Field',
                                     name: { kind: 'Name', value: 'priceAndAvailability' },
@@ -123,6 +115,7 @@ export const GetShortVideosDocument = {
                                 { kind: 'Field', name: { kind: 'Name', value: 'title' } },
                                 { kind: 'Field', name: { kind: 'Name', value: 'description' } },
                                 { kind: 'Field', name: { kind: 'Name', value: 'price' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'priceInfo' } },
                                 { kind: 'Field', name: { kind: 'Name', value: 'currency' } },
                                 {
                                     kind: 'Field',

package/dist/short-videos/short-videos-player/short-videos-player-localization.d.ts

@@ -1,15 +1,13 @@
 import { type Locale } from '../../core/locale';
-import type { IShortVideoAttachmentsLocalization, IShortVideoDetailsLocalization, IShortVideoViewerLocalization } from '../short-video-viewer';
+import type { IShortVideoAttachmentsLocalization, IShortVideoViewerLocalization } from '../short-video-viewer';
 import type { ISwipeIndicatorLocalization } from '../../ui/swipe-indicator';
 export interface IShortVideosPlayerLocalization {
     shortVideoAttachmentsLocalization?: IShortVideoAttachmentsLocalization | Locale;
-    shortVideoDetailsLocalization?: IShortVideoDetailsLocalization | Locale;
     shortVideoViewerLocalization?: IShortVideoViewerLocalization | Locale;
     swipeIndicatorLocalization?: ISwipeIndicatorLocalization | Locale;
 }
 export declare class ShortVideosPlayerLocalization {
     shortVideoAttachmentsLocalization: IShortVideoAttachmentsLocalization | Locale;
-    shortVideoDetailsLocalization: IShortVideoDetailsLocalization | Locale;
     shortVideoViewerLocalization: IShortVideoViewerLocalization | Locale;
     swipeIndicatorLocalization: ISwipeIndicatorLocalization | Locale;
     constructor(init: IShortVideosPlayerLocalization | Locale);

package/dist/short-videos/short-videos-player/short-videos-player-localization.js

@@ -1,12 +1,10 @@
 import { isLocale } from '../../core/locale';
 export class ShortVideosPlayerLocalization {
     shortVideoAttachmentsLocalization;
-    shortVideoDetailsLocalization;
     shortVideoViewerLocalization;
     swipeIndicatorLocalization;
     constructor(init) {
         this.shortVideoAttachmentsLocalization = isLocale(init) ? init : init.shortVideoAttachmentsLocalization || 'en';
-        this.shortVideoDetailsLocalization = isLocale(init) ? init : init.shortVideoDetailsLocalization || 'en';
         this.shortVideoViewerLocalization = isLocale(init) ? init : init.shortVideoViewerLocalization || 'en';
         this.swipeIndicatorLocalization = isLocale(init) ? init : init.swipeIndicatorLocalization || 'en';
     }