@streamscloud/embeddable 5.0.0 → 5.1.1

package/dist/ads/ad-card/mapper.js

@@ -3,7 +3,7 @@ export const mapToAdCardModel = (payload) => {
     return {
         id: payload.id,
         type: payload.type,
-        image: getMediaItemImageUrl(payload.media[0]),
+        image: getMediaItemImageUrl(payload.media?.[0]),
         title: payload.title,
         description: payload.description,
         price: payload.price,

package/dist/core/media/media-item-url.service.d.ts

@@ -1,2 +1,2 @@
 import { type MediaItemModel } from './types';
-export declare const getMediaItemImageUrl: (media: MediaItemModel) => string;
+export declare const getMediaItemImageUrl: (media?: MediaItemModel | null) => string;

package/dist/core/media/media-item-url.service.js

@@ -1,3 +1,8 @@
 import { MediaType } from '../enums';
 import {} from './types';
-export const getMediaItemImageUrl = (media) => (media.type === MediaType.Image ? media.url : media.thumbnailUrl);
+export const getMediaItemImageUrl = (media) => {
+    if (!media) {
+        return '';
+    }
+    return media.type === MediaType.Image ? media.url : media.thumbnailUrl;
+};

package/dist/products/product-card/mapper.js

@@ -1,8 +1,8 @@
 import { getMediaItemImageUrl } from '../../core/media';
 import { shouldUseSalePrice } from '../price-helper';
 export const mapToProductCard = (payload, referenceDate) => {
-    const effectiveSalePrice = payload.priceAndAvailability.productSalePrices?.find((x) => shouldUseSalePrice({
-        price: payload.priceAndAvailability.price,
+    const effectiveSalePrice = payload.priceAndAvailability?.productSalePrices?.find((x) => shouldUseSalePrice({
+        price: payload.priceAndAvailability?.price,
         salePrice: x.salePrice,
         effectiveDateFrom: x.salePriceEffectiveDateFrom,
         effectiveDateTo: x.salePriceEffectiveDateTo,
@@ -14,7 +14,7 @@ export const mapToProductCard = (payload, referenceDate) => {
         shortDescription: payload.shortDescription,
         link: payload.link,
         brandName: payload.brand?.name || null,
-        image: getMediaItemImageUrl(payload.media[0]),
+        image: getMediaItemImageUrl(payload.media?.[0]),
         currency: payload.priceAndAvailability.currency,
         price: payload.priceAndAvailability.price,
         salePrice: effectiveSalePrice?.salePrice ?? null

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

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

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

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

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, ShortVideoSocialInteractionsHanlder, ShortVideoAdCardModel, ShortVideoProductCardModel } from './types';
+export type { ShortVideoViewerModel, ShortVideoSocialInteractionsHandler, 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/types.d.ts

@@ -21,7 +21,7 @@ export type ShortVideoViewerHeadingModel = {
     displayDate: string;
     viewsCount: number;
 };
-export type ShortVideoSocialInteractionsHanlder = {
+export type ShortVideoSocialInteractionsHandler = {
     isLiked: (shortVideoId: string) => Promise<{
         readonly isLiked: boolean;
     }>;

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

@@ -1,10 +1,10 @@
 import { type Locale } from '../../core/locale';
-import type { ShortVideoSocialInteractionsHanlder } from '../short-video-viewer';
+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?: ShortVideoSocialInteractionsHanlder;
+    socialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
     localization?: IShortVideosPlayerLocalization | Locale;
     showStreamsCloudWatermark?: boolean;
     disableBackground?: boolean;

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

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

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

@@ -1,10 +1,10 @@
 import type { Locale } from '../../core/locale';
-import { type ShortVideoSocialInteractionsHanlder } from '../short-video-viewer';
+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?: ShortVideoSocialInteractionsHanlder;
+    socialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
     localization?: IShortVideosPlayerLocalization | Locale;
     showStreamsCloudWatermark?: boolean;
     disableBackground?: boolean;

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

@@ -1,4 +1,4 @@
-import type { ShortVideoViewerModel, ShortVideoSocialInteractionsHanlder } from '../short-video-viewer';
+import type { ShortVideoViewerModel, ShortVideoSocialInteractionsHandler } from '../short-video-viewer';
 import type { PlayerItemsProvider } from '../../ui/player';
 import type { IShortVideosPlayerLocalization } from './short-videos-player-localization';
 export type PlayerInput = ProviderPlayerInput | IdsPlayerInput;
@@ -24,7 +24,7 @@ type IdsInit = PlayerSettings & {
     initiator?: string;
 };
 type PlayerSettings = {
-    socialInteractionsHandler?: ShortVideoSocialInteractionsHanlder;
+    socialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
     disableBackground?: boolean;
     localization?: IShortVideosPlayerLocalization | 'en' | 'no';
     showStreamsCloudWatermark?: boolean;

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

@@ -1,12 +1,12 @@
 import type { Locale } from '../../core/locale';
-import { type ShortVideoSocialInteractionsHanlder } from '../../short-videos/short-video-viewer';
+import { type ShortVideoSocialInteractionsHandler } from '../../short-videos/short-video-viewer';
 import { type IStreamPlayerLocalization } from './stream-player-localization';
 type Props = {
     streamId: string;
     localization?: IStreamPlayerLocalization | Locale;
     graphqlOrigin?: string;
     showStreamsCloudWatermark?: boolean;
-    shortVideoSocialInteractionsHandler?: ShortVideoSocialInteractionsHanlder;
+    shortVideoSocialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
     initiator?: string;
     on?: {
         closePlayer?: () => void;

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

@@ -1,11 +1,11 @@
-import { type ShortVideoSocialInteractionsHanlder } from '../../short-videos/short-video-viewer';
+import { type ShortVideoSocialInteractionsHandler } from '../../short-videos/short-video-viewer';
 import type { StreamPlayerBuffer } from './stream-player-buffer.svelte';
 import { StreamPlayerLocalization } from './stream-player-localization';
 import type { StreamPlayerUiManager } from './ui-manager.svelte';
 type Props = {
     buffer: StreamPlayerBuffer;
     uiManager: StreamPlayerUiManager;
-    shortVideoSocialInteractionsHandler?: ShortVideoSocialInteractionsHanlder;
+    shortVideoSocialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
     localization: StreamPlayerLocalization;
     on: {
         closePlayer: () => void;

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

@@ -1,4 +1,4 @@
-import type { ShortVideoSocialInteractionsHanlder } from '../../short-videos/short-video-viewer';
+import type { ShortVideoSocialInteractionsHandler } from '../../short-videos/short-video-viewer';
 import type { IStreamPlayerLocalization } from './stream-player-localization';
 export type { IStreamPlayerLocalization };
 /**
@@ -29,7 +29,7 @@ export declare const openStreamPlayer: (init: {
     graphqlOrigin?: string;
     localization?: IStreamPlayerLocalization | "en" | "no";
     showStreamsCloudWatermark?: boolean;
-    shortVideoSocialInteractionsHandler?: ShortVideoSocialInteractionsHanlder;
+    shortVideoSocialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
     initiator?: string;
     on?: {
         streamActivated?: (data: {

package/dist/ui/player/cmp.player-slider.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">import { isScrollingPrevented } from './prevent-slider-scroll';
 import { onDestroy, onMount, untrack } from 'svelte';
+const MOUSE_DETECTION_THRESHOLD_MS = 100;
 let { buffer, on, children } = $props();
 let slidesRef;
 let sliderHeight = $state(0);
@@ -131,7 +132,7 @@ onMount(() => {
             const lastEvent = waveDetector.events[waveDetector.events.length - 1];
             const timeSinceLastEvent = lastEvent ? now - lastEvent.time : 1000;
             // If enough time has passed since the last event - it's a mouse
-            if (timeSinceLastEvent > 100) {
+            if (timeSinceLastEvent > MOUSE_DETECTION_THRESHOLD_MS) {
                 triggerAnimation(direction);
                 waveDetector = { events: [], direction: 0, peakReached: false, lastPeak: 0, waveStartTime: 0 };
                 return;

package/dist/ui/seek-bar/cmp.seek-bar.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">let { value, listenParentClicks = false, on } = $props();
 let seekBarRef;
+let scrubberRef;
 let progressRef;
 let isDragging = $state(false);
 const cssValue = $derived(`${100 * (value <= 1 ? value : 1)}%`);
@@ -36,6 +37,7 @@ const onMouseUp = () => {
     isDragging = false;
     window.removeEventListener('mousemove', onMouseMove);
     window.removeEventListener('mouseup', onMouseUp);
+    scrubberRef === null || scrubberRef === void 0 ? void 0 : scrubberRef.blur();
     (_a = on === null || on === void 0 ? void 0 : on.dragEnd) === null || _a === void 0 ? void 0 : _a.call(on);
 };
 const onMouseDown = (e) => {
@@ -45,6 +47,7 @@ const onMouseDown = (e) => {
     handleSeek(e);
     window.addEventListener('mousemove', onMouseMove);
     window.addEventListener('mouseup', onMouseUp);
+    scrubberRef === null || scrubberRef === void 0 ? void 0 : scrubberRef.blur();
 };
 const handleScrubberKeyDown = (event) => {
     const step = 0.05;
@@ -67,15 +70,18 @@ const handleScrubberKeyDown = (event) => {
     }
 };
 $effect(() => {
+    let parent = null;
     if (listenParentClicks && seekBarRef) {
-        const parent = seekBarRef.parentElement;
+        parent = seekBarRef.parentElement;
         if (parent) {
             parent.addEventListener('click', handleParentClick);
-            return () => {
-                parent.removeEventListener('click', handleParentClick);
-            };
         }
     }
+    return () => {
+        if (parent) {
+            parent.removeEventListener('click', handleParentClick);
+        }
+    };
 });
 $effect(() => {
     return () => {
@@ -90,6 +96,8 @@ $effect(() => {
     <span class="seek-bar__value" style="width: {cssValue}"> &nbsp; </span>
     <div
       class="seek-bar__scrubber"
+      bind:this={scrubberRef}
+      class:is-dragging={isDragging}
       style="left: {cssValue}"
       role="slider"
       tabindex="0"
@@ -116,9 +124,15 @@ $effect(() => {
 .seek-bar {
   cursor: pointer;
   position: relative;
+  padding: 0.3125rem 0;
   --_seek-bar--container-color: var(--seek-bar--container-color, #b0b0b0);
-  --_seek-bar--value-color: var(--seek-bar--value-color, #fff);
-  --_seek-bar--scrubber-color: var(--seek-bar--scrubber-color, #fff);
+  --_seek-bar--value-color: var(--seek-bar--value-color, #ffffff);
+  --_seek-bar--scrubber-color: var(--seek-bar--scrubber-color, #ffffff);
+  --_seek-bar--scrubber-border-color: var(--seek-bar--scrubber-border-color, #b0b0b0);
+  --_seek-bar--scrubber-opacity: 0;
+}
+.seek-bar:hover {
+  --_seek-bar--scrubber-opacity: 1;
 }
 .seek-bar__container {
   width: 100%;
@@ -139,9 +153,17 @@ $effect(() => {
   width: 0.75rem;
   height: 0.75rem;
   background: var(--_seek-bar--scrubber-color);
-  border-color: var(--_seek-bar--container-color);
+  border-color: var(--_seek-bar--scrubber-border-color);
   border-width: 0.0625rem;
   border-radius: 50%;
   transform: translate(-50%, -50%);
   z-index: 1;
+  opacity: var(--_seek-bar--scrubber-opacity);
+  transition: opacity 0.2s ease-in-out;
+}
+.seek-bar__scrubber.is-dragging, .seek-bar__scrubber:focus {
+  --_seek-bar--scrubber-opacity: 1;
+}
+.seek-bar__scrubber:focus-visible {
+  outline: none;
 }</style>

package/dist/ui/video/cmp.video.svelte

@@ -10,7 +10,6 @@
 import { randomNanoid } from '../../core/utils/string-generator';
 import { Icon, IconColor } from '../icon';
 import { MediaVolumeManager, PlaybackManager } from '../media-playback';
-import { Progress } from '../progress';
 import { SeekBar } from '../seek-bar';
 import { ScrubberPosition } from './types';
 import IconPause from '@fluentui/svg-icons/icons/pause_20_regular.svg?raw';
@@ -286,17 +285,15 @@ const handleSeek = (percent) => {
           class:video__progress-container--bottom={scrubberPosition === ScrubberPosition.Bottom}
           onmouseenter={() => setShowControlsOnHover(true)}
           onmouseleave={() => setShowControlsOnHover(false)}
-          onclick={(e) => e.stopPropagation()}
-          onkeydown={() => ({})}
           role="none">
-          {#if !showControlsOnHover && isVideoPaused}
-            <div class="video__progress">
-              <Progress value={percentageCompleted} />
-            </div>
-          {/if}
-          {#if showControlsOnHover}
-            <div class="video__progress" transition:fade={{ duration: isVideoPaused ? 0 : 300 }}>
-              <SeekBar value={percentageCompleted} listenParentClicks={true} on={{ seek: handleSeek }} />
+          {#if showControlsOnHover || (!showControlsOnHover && isVideoPaused)}
+            <div
+              class="video__seek-bar"
+              transition:fade={{ duration: isVideoPaused ? 0 : 300 }}
+              onclick={(e) => e.stopPropagation()}
+              onkeydown={() => ({})}
+              role="none">
+              <SeekBar value={percentageCompleted} on={{ seek: handleSeek }} />
             </div>
           {/if}
         </div>
@@ -321,9 +318,6 @@ const handleSeek = (percent) => {
   --_video--border-radius: var(--video--border-radius, 0);
   --_video--media-fit: var(--video--media-fit, contain);
   --_video--poster--media-fit: var(--video--poster--media-fit, cover);
-  --_video--progress--background-color: var(--video--progress--background-color, transparent);
-  --_video--progress--back-color: var(--video--progress--back-color);
-  --_video--progress--front-color: var(--video--progress--front-color);
   height: 100%;
   min-height: 100%;
   max-height: 100%;
@@ -390,20 +384,16 @@ const handleSeek = (percent) => {
   left: 0;
   right: 0;
   z-index: 1;
-  min-height: 1.5625rem;
-  padding: 0 0.25rem;
+  height: 2.5rem;
+  padding: 0.625rem 0.25rem;
 }
 .video__progress-container--top {
-  top: 0.5625rem;
+  top: -0.625rem;
   bottom: auto;
+  padding-bottom: 0.9375rem;
 }
 .video__progress-container--bottom {
   top: auto;
-  bottom: 0;
-}
-.video__progress {
-  --progress--height: 0.3125em;
-  --progress--back-color: var(--_video--progress--back-color);
-  --progress--front-color: var(--_video--progress--front-color);
-  padding: 0.625rem 0;
+  bottom: -0.625rem;
+  padding-top: 0.9375rem;
 }</style>

package/package.json

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