@streamscloud/embeddable 2.1.2 → 2.1.3

package/dist/short-videos/short-videos-player/action-button.svelte

@@ -18,19 +18,19 @@ export {};
   }
 }
 .action-button {
-  --_short-video-player--action-button--size: var(--short-video-player--action-button--size);
-  --_action-button--background: var(--action-button-background, #1c1c1c);
-  width: var(--_short-video-player--action-button--size);
-  min-width: var(--_short-video-player--action-button--size);
-  max-width: var(--_short-video-player--action-button--size);
-  height: var(--_short-video-player--action-button--size);
-  min-height: var(--_short-video-player--action-button--size);
-  max-height: var(--_short-video-player--action-button--size);
+  --_short-videos-player--action-button--size: var(--short-videos-player--action-button--size);
+  --_short-videos-player--action-button--background: var(--action-button-background, #1c1c1c);
+  width: var(--_short-videos-player--action-button--size);
+  min-width: var(--_short-videos-player--action-button--size);
+  max-width: var(--_short-videos-player--action-button--size);
+  height: var(--_short-videos-player--action-button--size);
+  min-height: var(--_short-videos-player--action-button--size);
+  max-height: var(--_short-videos-player--action-button--size);
   display: flex;
   justify-content: center;
   align-items: center;
   line-height: 0;
-  background: var(--_action-button--background);
+  background: var(--_short-videos-player--action-button--background);
   border-radius: 50%;
   --icon--size: 1.25rem;
   z-index: 1;

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

@@ -12,12 +12,12 @@ import { PlayerBuffer, PlayerSlider } from '../../ui/player';
 import { SpotlightLayout } from '../../ui/spotlight-layout';
 import { default as Controls } from './controls.svelte';
 import { ShortVideosPlayerLocalization } from './short-videos-player-localization.svelte';
-import { ShortVideoPlayerUiManager } from './ui-manager.svelte';
+import { ShortVideosPlayerUiManager } from './ui-manager.svelte';
 import { onDestroy, onMount } from 'svelte';
 let { shortVideosProvider, localization: localizationInit, on } = $props();
 const localization = $derived(new ShortVideosPlayerLocalization(localizationInit));
 const buffer = $derived(new PlayerBuffer(shortVideosProvider));
-const uiManager = new ShortVideoPlayerUiManager();
+const uiManager = new ShortVideosPlayerUiManager();
 onMount(() => __awaiter(void 0, void 0, void 0, function* () {
     uiManager.detailsCollapsed = window && window.innerWidth < window.innerHeight;
 }));

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

@@ -16,16 +16,16 @@ const toggleMuted = () => {
 const shortVideo = $derived(buffer.current);
 </script>
 
-<div class="short-video-player-controls">
-  <div class="short-video-player-controls__left">
+<div class="short-videos-player-controls">
+  <div class="short-videos-player-controls__left">
     {#if shortVideo && uiManager.detailsCollapsed && !uiManager.showShortVideoOverlay}
-      <div class="short-video-player-controls__short-video-overlay">
-        <div class="short-video-player-controls__short-video-attachments-inline">
+      <div class="short-videos-player-controls__short-video-overlay">
+        <div class="short-videos-player-controls__short-video-attachments-inline">
           <ShortVideoViewerAttachmentsInline model={shortVideo} />
         </div>
       </div>
     {/if}
-    <div class="short-video-player-controls__navigation-buttons">
+    <div class="short-videos-player-controls__navigation-buttons">
       <button type="button" class="navigation-button" disabled={!buffer.canLoadPrevious} onclick={buffer.loadPrevious}>
         <Icon src={IconChevronUp} />
       </button>
@@ -34,13 +34,13 @@ const shortVideo = $derived(buffer.current);
       </button>
     </div>
   </div>
-  <div class="short-video-player-controls__right">
+  <div class="short-videos-player-controls__right">
     {#if shortVideo}
-      <div class="short-video-player-controls__short-video-attachments">
+      <div class="short-videos-player-controls__short-video-attachments">
         <ShortVideoViewerAttachments shortVideo={shortVideo} localization={localization.shortVideoDetailsLocalization?.attachmentsLocalization} />
       </div>
     {/if}
-    <div class="short-video-player-controls__controls">
+    <div class="short-videos-player-controls__controls">
       {#if shortVideo}
         <ActionButton on={{ click: toggleMuted }}>
           {#if MediaVolumeManager.isMuted}
@@ -79,37 +79,37 @@ const shortVideo = $derived(buffer.current);
 }
 .close-button {
   position: absolute;
-  top: var(--short-video-player--controls--offset-vertical);
-  right: var(--short-video-player--controls--offset-horizontal);
+  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-video-player--controls--offset-vertical);
-  right: var(--short-video-player--controls--offset-horizontal);
+  bottom: var(--short-videos-player--controls--offset-vertical);
+  right: var(--short-videos-player--controls--offset-horizontal);
   z-index: 1;
 }
 
-.short-video-player-controls {
+.short-videos-player-controls {
   position: absolute;
   top: 0;
   right: 0;
   height: 100%;
-  width: var(--short-video-player--sidebar--available-space);
+  width: var(--short-videos-player--sidebar--available-space);
   display: flex;
   justify-content: space-between;
   gap: 2.5rem;
-  padding: var(--short-video-player--controls--offset-vertical) var(--short-video-player--controls--offset-horizontal);
+  padding: var(--short-videos-player--controls--offset-vertical) var(--short-videos-player--controls--offset-horizontal);
   container-type: inline-size;
 }
-.short-video-player-controls__left {
+.short-videos-player-controls__left {
   display: flex;
   flex-direction: column;
   gap: 2.5rem;
   justify-content: flex-end;
 }
-.short-video-player-controls__right {
+.short-videos-player-controls__right {
   flex: 1;
   display: flex;
   justify-content: space-between;
@@ -119,11 +119,11 @@ const shortVideo = $derived(buffer.current);
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 9.375rem) {
-  .short-video-player-controls__right {
+  .short-videos-player-controls__right {
     display: none;
   }
 }
-.short-video-player-controls__short-video-overlay {
+.short-videos-player-controls__short-video-overlay {
   gap: 2.5rem;
   display: flex;
   flex: 1;
@@ -131,21 +131,21 @@ const shortVideo = $derived(buffer.current);
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-end;
-  --short-video-viewer--interactions--icon--size: var(--short-video-player--navigation-button--size);
+  --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-video-player-controls__short-video-attachments-inline {
+.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-video-player-controls__short-video-attachments-inline {
+  .short-videos-player-controls__short-video-attachments-inline {
     display: contents;
   }
 }
-.short-video-player-controls__short-video-attachments {
+.short-videos-player-controls__short-video-attachments {
   flex: 1;
   overflow-x: hidden;
   overflow-y: auto;
@@ -155,34 +155,34 @@ const shortVideo = $derived(buffer.current);
   max-width: 21.875rem;
   /* Set 'container-type: inline-size;' to reference container*/
 }
-.short-video-player-controls__short-video-attachments::-webkit-scrollbar {
+.short-videos-player-controls__short-video-attachments::-webkit-scrollbar {
   width: 3px;
   height: 3px;
   background: var(--custom-scrollbar-background, transparent);
   visibility: hidden;
 }
-.short-video-player-controls__short-video-attachments::-webkit-scrollbar-thumb {
+.short-videos-player-controls__short-video-attachments::-webkit-scrollbar-thumb {
   background: transparent;
 }
-.short-video-player-controls__short-video-attachments:hover {
+.short-videos-player-controls__short-video-attachments:hover {
   scrollbar-color: var(--custom-scrollbar-color, #7d7d7d) var(--custom-scrollbar-background, transparent);
   scrollbar-width: thin;
 }
-.short-video-player-controls__short-video-attachments:hover::-webkit-scrollbar {
+.short-videos-player-controls__short-video-attachments:hover::-webkit-scrollbar {
   width: 3px;
   height: 3px;
   background: var(--custom-scrollbar-background, transparent);
   visibility: hidden;
 }
-.short-video-player-controls__short-video-attachments:hover::-webkit-scrollbar-thumb {
+.short-videos-player-controls__short-video-attachments:hover::-webkit-scrollbar-thumb {
   background: var(--custom-scrollbar-color, #7d7d7d);
 }
 @container (width < calc(21.875rem + 3.75rem)) {
-  .short-video-player-controls__short-video-attachments {
+  .short-videos-player-controls__short-video-attachments {
     display: none;
   }
 }
-.short-video-player-controls__navigation-buttons {
+.short-videos-player-controls__navigation-buttons {
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -191,11 +191,11 @@ const shortVideo = $derived(buffer.current);
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 6.25rem) {
-  .short-video-player-controls__navigation-buttons {
+  .short-videos-player-controls__navigation-buttons {
     visibility: hidden;
   }
 }
-.short-video-player-controls__controls {
+.short-videos-player-controls__controls {
   display: flex;
   margin-top: auto;
   gap: 1rem;
@@ -203,12 +203,12 @@ const shortVideo = $derived(buffer.current);
 }
 
 .navigation-button {
-  width: var(--short-video-player--navigation-button--size);
-  min-width: var(--short-video-player--navigation-button--size);
-  max-width: var(--short-video-player--navigation-button--size);
-  height: var(--short-video-player--navigation-button--size);
-  min-height: var(--short-video-player--navigation-button--size);
-  max-height: var(--short-video-player--navigation-button--size);
+  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;
   border: 1px solid #1c1c1c;
   border-radius: 50%;

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

@@ -1,10 +1,10 @@
 import { type ShortVideoViewerModel } from '../short-video-viewer';
 import type { IPlayerBuffer } from '../../ui/player';
 import { ShortVideosPlayerLocalization } from './short-videos-player-localization.svelte.js';
-import type { ShortVideoPlayerUiManager } from './ui-manager.svelte';
+import type { ShortVideosPlayerUiManager } from './ui-manager.svelte';
 type Props = {
     buffer: IPlayerBuffer<ShortVideoViewerModel>;
-    uiManager: ShortVideoPlayerUiManager;
+    uiManager: ShortVideosPlayerUiManager;
     localization: ShortVideosPlayerLocalization;
     on: {
         closePlayer: () => void;

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

@@ -1,4 +1,4 @@
-export declare class ShortVideoPlayerUiManager {
+export declare class ShortVideosPlayerUiManager {
     detailsCollapsed: boolean;
     globalCssVariables: string;
     isMobileView: boolean;

package/dist/short-videos/short-videos-player/ui-manager.svelte.js

@@ -1,12 +1,12 @@
-export class ShortVideoPlayerUiManager {
+export class ShortVideosPlayerUiManager {
     detailsCollapsed = $state(true);
     globalCssVariables = $derived.by(() => {
         const values = [
-            `--short-video-player--action-button--size: ${this.actionButtonSize}px`,
-            `--short-video-player--navigation-button--size: ${this.navigationButtonSize}px`,
-            `--short-video-player--controls--offset-horizontal: ${this.controlsOffsetHorizontal}px`,
-            `--short-video-player--controls--offset-vertical: ${this.controlsOffsetVertical}px`,
-            `--short-video-player--sidebar--available-space: ${(this.viewTotalWidth - this.mainViewColumnWidth) / 2}px`
+            `--short-videos-player--action-button--size: ${this.actionButtonSize}px`,
+            `--short-videos-player--navigation-button--size: ${this.navigationButtonSize}px`,
+            `--short-videos-player--controls--offset-horizontal: ${this.controlsOffsetHorizontal}px`,
+            `--short-videos-player--controls--offset-vertical: ${this.controlsOffsetVertical}px`,
+            `--short-videos-player--sidebar--available-space: ${(this.viewTotalWidth - this.mainViewColumnWidth) / 2}px`
         ];
         return values.join(';');
     });

package/dist/streams/layout/cmp.slot-content.svelte

@@ -23,10 +23,55 @@ const dataIsFilled = $derived.by(() => {
             Utils.assertUnreachable(model.data);
     }
 });
+const productModel = $derived.by(() => {
+    var _a;
+    return ((_a = model.data) === null || _a === void 0 ? void 0 : _a.type) === StreamComponentDataType.Product ? model.data.product : undefined;
+});
+const handleProductClick = (e) => {
+    e.preventDefault();
+    if (!productModel) {
+        return;
+    }
+    if (productModel.id && (on === null || on === void 0 ? void 0 : on.productClick)) {
+        on.productClick(productModel.id);
+    }
+    if (productModel.link) {
+        window.open(productModel.link, '_blank', 'noopener noreferrer');
+    }
+};
 </script>
 
-{#if component && model.data && dataIsFilled}
-  {#each component.elements as element (element)}
-    <StreamElement model={element} data={model.data} localization={localization} on={on} />
-  {/each}
+{#snippet slotContent()}
+  {#if component && model.data && dataIsFilled}
+    {#each component.elements as element (element)}
+      <StreamElement model={element} data={model.data} localization={localization} on={on} />
+    {/each}
+  {/if}
+{/snippet}
+{#if productModel?.link}
+  <a class="stream-slot-content-product-link" href={productModel.link} onclick={handleProductClick} target="_blank" rel="noopener noreferrer">
+    {@render slotContent()}
+  </a>
+{:else}
+  {@render slotContent()}
 {/if}
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.stream-slot-content-product-link {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+}</style>

package/dist/streams/layout/element-views/cmp.stream-element.svelte.d.ts

@@ -8,7 +8,6 @@ type Props = {
     constainerDirection?: StreamElementStyleDirection;
     localization?: IStreamElementLocalization;
     on?: {
-        productClick: (productId: string) => void;
         progress?: (videoId: string, progress: number) => void;
     };
 };

package/dist/streams/stream-player/action-button.svelte

@@ -19,7 +19,7 @@ export {};
 }
 .action-button {
   --_stream-player--action-button--size: var(--stream-player--action-button--size);
-  --_action-button--background: var(--action-button-background, #1c1c1c);
+  --_stream-player--action-button--background: var(--action-button-background, #1c1c1c);
   width: var(--_stream-player--action-button--size);
   min-width: var(--_stream-player--action-button--size);
   max-width: var(--_stream-player--action-button--size);
@@ -30,7 +30,7 @@ export {};
   justify-content: center;
   align-items: center;
   line-height: 0;
-  background: var(--_action-button--background);
+  background: var(--_stream-player--action-button--background);
   border-radius: 50%;
   --icon--size: 1.25rem;
   z-index: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "author": "StreamsCloud",
   "repository": "https://github.com/StreamsCloud/streamscloud-frontend-packages.git",
   "type": "module",