@streamscloud/embeddable 3.2.4 → 3.2.6

package/dist/ui/time-ago/time-ago-localization.js

@@ -0,0 +1,55 @@
+import { isLocale } from '../../core/locale';
+export class TimeAgoLocalization {
+    locale;
+    aMinuteAgo;
+    anHourAgo;
+    justNow;
+    at;
+    hoursAgo;
+    minutesAgo;
+    yesterday;
+    constructor(init) {
+        this.locale = isLocale(init) ? loc.locale[init] : init.locale || loc.locale.en;
+        this.aMinuteAgo = isLocale(init) ? loc.aMinuteAgo[init] : init.aMinuteAgo || loc.aMinuteAgo.en;
+        this.anHourAgo = isLocale(init) ? loc.anHourAgo[init] : init.anHourAgo || loc.anHourAgo.en;
+        this.justNow = isLocale(init) ? loc.justNow[init] : init.justNow || loc.justNow.en;
+        this.at = isLocale(init) ? loc.at[init] : init.at || loc.at.en;
+        this.hoursAgo = isLocale(init) ? loc.hoursAgo[init] : init.hoursAgo || loc.hoursAgo.en;
+        this.minutesAgo = isLocale(init) ? loc.minutesAgo[init] : init.minutesAgo || loc.minutesAgo.en;
+        this.yesterday = isLocale(init) ? loc.yesterday[init] : init.yesterday || loc.yesterday.en;
+    }
+}
+const loc = {
+    locale: {
+        en: 'en-US',
+        no: 'no-NO'
+    },
+    aMinuteAgo: {
+        en: 'a minute ago',
+        no: 'ett minutt siden'
+    },
+    anHourAgo: {
+        en: 'an hour ago',
+        no: 'en time siden'
+    },
+    justNow: {
+        en: 'just now',
+        no: 'nettopp nå'
+    },
+    at: {
+        en: (date, time) => `${date} at ${time}`,
+        no: (date, time) => `${date} kl. ${time}`
+    },
+    hoursAgo: {
+        en: (hours) => `${hours} hours ago`,
+        no: (hours) => `${hours} timer siden`
+    },
+    minutesAgo: {
+        en: (minutes) => `${minutes} minutes ago`,
+        no: (minutes) => `${minutes} minutter siden`
+    },
+    yesterday: {
+        en: (time) => `Yesterday at ${time}`,
+        no: (time) => `I går kl. ${time}`
+    }
+};

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

@@ -55,8 +55,13 @@ onMount(() => {
     }
 });
 onDestroy(() => {
-    PlaybackManager.unregisterPlayer(id);
-    intersectionObserver.disconnect();
+    try {
+        PlaybackManager.unregisterPlayer(id);
+        intersectionObserver.disconnect();
+    }
+    catch (_a) {
+        // ignore
+    }
 });
 let video = $state.raw(undefined);
 let showControlsOnHover = $state(false);
@@ -154,6 +159,7 @@ const stop = () => {
     video.pause();
     video.currentTime = 0;
     video.load();
+    onPause();
 };
 const togglePlay = (e) => {
     e === null || e === void 0 ? void 0 : e.stopPropagation();
@@ -234,7 +240,7 @@ const handleSeek = (percent) => {
 <div class="video" onmouseenter={() => setShowControlsOnHover(true)} onmouseleave={() => setShowControlsOnHover(false)} role="none" inert={inert}>
   <video
     class="video__video"
-    style={everActivated ? `--_video--media-fit: contain;` : ''}
+    class:video__video--not-activated={!everActivated}
     width="100%"
     controls={controls && everActivated}
     poster={poster}
@@ -250,8 +256,11 @@ const handleSeek = (percent) => {
     bind:this={video}>
     <track src="" kind="captions" />
   </video>
+  {#if !everActivated}
+    <img class="video__poster" src={poster} alt="" />
+  {/if}
   {#if !controls || !everActivated}
-    <div class="video__cover" onclick={togglePlay} onkeydown={() => ({})} role="none">
+    <div class="video__overlay" onclick={togglePlay} onkeydown={() => ({})} role="none">
       {#if isVideoPaused}
         <button type="button" aria-label="play" class="video__playback-button" onclick={togglePlay} onkeydown={() => ({})}>
           <Icon src={IconPlay} color={IconColor.White} />
@@ -271,20 +280,22 @@ const handleSeek = (percent) => {
         </button>
       {/if}
 
-      <div class="video__progress-container">
-        {#if needShowProgress}
-          {#if showControlsOnHover}
-            <div class="video__seek-bar" onclick={(e) => e.stopPropagation()} onkeydown={() => ({})} role="none" transition:slide>
-              <SeekBar value={percentageCompleted} on={{ seek: handleSeek }} />
-            </div>
-          {/if}
-          {#if !showControlsOnHover}
-            <div class="video__progress" in:slide>
-              <Progress value={percentageCompleted} />
-            </div>
+      {#if everActivated}
+        <div class="video__progress-container">
+          {#if needShowProgress}
+            {#if showControlsOnHover}
+              <div class="video__seek-bar" onclick={(e) => e.stopPropagation()} onkeydown={() => ({})} role="none" transition:slide>
+                <SeekBar value={percentageCompleted} on={{ seek: handleSeek }} />
+              </div>
+            {/if}
+            {#if !showControlsOnHover}
+              <div class="video__progress" in:slide>
+                <Progress value={percentageCompleted} />
+              </div>
+            {/if}
           {/if}
-        {/if}
-      </div>
+        </div>
+      {/if}
     </div>
   {/if}
 </div>
@@ -304,6 +315,7 @@ const handleSeek = (percent) => {
   --_video--background-color: var(--video--background-color, #000000);
   --_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, hsla(0, 0%, 0%, 0.5));
   --_video--progress--back-color: var(--video--progress--back-color);
   --_video--progress--front-color: var(--video--progress--front-color);
@@ -341,6 +353,13 @@ const handleSeek = (percent) => {
   font-size: 1em;
   z-index: 1;
 }
+.video__poster {
+  object-fit: var(--_video--poster--media-fit);
+  min-width: 100%;
+  min-height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}
 .video__video {
   object-fit: var(--_video--media-fit);
   min-width: 100%;
@@ -348,7 +367,12 @@ const handleSeek = (percent) => {
   max-width: 100%;
   max-height: 100%;
 }
-.video__cover {
+.video__video--not-activated {
+  visibility: hidden;
+  height: 0;
+  min-height: 0;
+}
+.video__overlay {
   position: absolute;
   left: 0;
   top: 0;

package/package.json

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

package/dist/short-videos/short-video-viewer/short-video-attachments-localization.svelte.js

@@ -1,10 +0,0 @@
-export class ShortVideoAttachmentsLocalizationSvelte {
-    productsSection = $state('Products');
-    offersSection = $state('Offers');
-    productLocalization = $state(undefined);
-    constructor(init) {
-        this.productsSection = init?.productsSection || this.productsSection;
-        this.offersSection = init?.offersSection || this.offersSection;
-        this.productLocalization = init?.productLocalization;
-    }
-}

package/dist/short-videos/short-video-viewer/short-video-details-localization.svelte.js

@@ -1,10 +0,0 @@
-export class ShortVideoDetailsLocalization {
-    viewsCount = $state((count) => (count === 1 ? '1 view' : `${count} views`));
-    timeAgoLocalization = $state(undefined);
-    attachmentsLocalization = $state(undefined);
-    constructor(init) {
-        this.viewsCount = init?.viewsCount ? init.viewsCount : this.viewsCount;
-        this.timeAgoLocalization = init?.timeAgoLocalization;
-        this.attachmentsLocalization = init?.attachmentsLocalization;
-    }
-}

package/dist/short-videos/short-video-viewer/short-video-product-localization.svelte.js

@@ -1,11 +0,0 @@
-export class ShortVideoProductLocalization {
-    beforeNowPrefix = $state('Before');
-    constructor(init) {
-        if (!init) {
-            return;
-        }
-        if (init.beforeNowPrefix !== undefined) {
-            this.beforeNowPrefix = init.beforeNowPrefix;
-        }
-    }
-}

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

@@ -1,13 +0,0 @@
-import type { ITimeAgoLocalization } from '../../ui/time-ago';
-import type { IShortVideoProductLocalization } from './short-video-product-localization.svelte';
-export interface IShortVideoViewerLocalization {
-    viewsCount?: (count: number) => string;
-    timeAgoLocalization?: ITimeAgoLocalization;
-    productLocalization?: IShortVideoProductLocalization;
-}
-export declare class ShortVideoViewerLocalization {
-    viewsCount: (count: number) => string;
-    timeAgoLocalization: ITimeAgoLocalization | undefined;
-    productLocalization: IShortVideoProductLocalization | undefined;
-    constructor(init?: IShortVideoViewerLocalization);
-}

package/dist/short-videos/short-video-viewer/short-video-viewer-localization.svelte.js

@@ -1,10 +0,0 @@
-export class ShortVideoViewerLocalization {
-    viewsCount = $state((count) => (count === 1 ? '1 view' : `${count} views`));
-    timeAgoLocalization = $state(undefined);
-    productLocalization = $state(undefined);
-    constructor(init) {
-        this.viewsCount = init?.viewsCount ? init.viewsCount : this.viewsCount;
-        this.timeAgoLocalization = init?.timeAgoLocalization;
-        this.productLocalization = init?.productLocalization;
-    }
-}

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

@@ -1,8 +0,0 @@
-import type { IShortVideoDetailsLocalization } from '../short-video-viewer';
-export interface IShortVideosPlayerLocalization {
-    shortVideoDetailsLocalization?: IShortVideoDetailsLocalization;
-}
-export declare class ShortVideosPlayerLocalization {
-    shortVideoDetailsLocalization: IShortVideoDetailsLocalization | undefined;
-    constructor(init?: IShortVideosPlayerLocalization);
-}

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

@@ -1,6 +0,0 @@
-export class ShortVideosPlayerLocalization {
-    shortVideoDetailsLocalization = $state(undefined);
-    constructor(init) {
-        this.shortVideoDetailsLocalization = init?.shortVideoDetailsLocalization || this.shortVideoDetailsLocalization;
-    }
-}

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

@@ -1,9 +0,0 @@
-export interface IPriceStreamElementLocalization {
-    saveValue?: (value: string | number) => string;
-    beforeValue?: (value: string) => string;
-}
-export declare class PriceStreamElementLocalization {
-    saveValue: (value: string | number) => string;
-    beforeValue: (value: string) => string;
-    constructor(init?: IPriceStreamElementLocalization);
-}

package/dist/streams/layout/element-views/price-stream-element-localization.svelte.js

@@ -1,8 +0,0 @@
-export class PriceStreamElementLocalization {
-    saveValue = $state((value) => `Save ${value}`);
-    beforeValue = $state((value) => `Before ${value}`);
-    constructor(init) {
-        this.saveValue = init?.saveValue ?? this.saveValue;
-        this.beforeValue = init?.beforeValue ?? this.beforeValue;
-    }
-}

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

@@ -1,8 +0,0 @@
-import type { IPriceStreamElementLocalization } from './price-stream-element-localization.svelte';
-export interface IStreamElementLocalization {
-    priceElementLocalization?: IPriceStreamElementLocalization;
-}
-export declare class StreamElementLocalization {
-    priceElementLocalization: IPriceStreamElementLocalization | undefined;
-    constructor(init?: IStreamElementLocalization);
-}

package/dist/streams/layout/element-views/stream-element-localization.svelte.js

@@ -1,6 +0,0 @@
-export class StreamElementLocalization {
-    priceElementLocalization = $state(undefined);
-    constructor(init) {
-        this.priceElementLocalization = init?.priceElementLocalization ?? this.priceElementLocalization;
-    }
-}

package/dist/streams/layout/serializer.d.ts

@@ -1,3 +0,0 @@
-import type { StreamLayout } from './layout';
-export declare const parseToStreamLayout: (value: string) => StreamLayout;
-export declare const stringifyToStreamLayoutInput: (layout: StreamLayout) => string;

package/dist/streams/layout/serializer.js

@@ -1,6 +0,0 @@
-export const parseToStreamLayout = (value) => {
-    return JSON.parse(value);
-};
-export const stringifyToStreamLayoutInput = (layout) => {
-    return JSON.stringify(layout);
-};

package/dist/streams/stream-page-viewer/stream-page-viewer-localization.svelte.d.ts

@@ -1,13 +0,0 @@
-import type { IStreamElementLocalization } from '../layout/element-views';
-import type { ITimeAgoLocalization } from '../../ui/time-ago';
-export interface IStreamPageViewerLocalization {
-    viewsCount?: (count: number) => string;
-    timeAgoLocalization?: ITimeAgoLocalization;
-    elementsLocalization?: IStreamElementLocalization;
-}
-export declare class StreamPageViewerLocalization {
-    viewsCount: (count: number) => string;
-    timeAgoLocalization: ITimeAgoLocalization | undefined;
-    elementsLocalization: IStreamElementLocalization | undefined;
-    constructor(init?: IStreamPageViewerLocalization);
-}

package/dist/streams/stream-page-viewer/stream-page-viewer-localization.svelte.js

@@ -1,10 +0,0 @@
-export class StreamPageViewerLocalization {
-    viewsCount = $state((count) => (count === 1 ? '1 view' : `${count} views`));
-    timeAgoLocalization = $state(undefined);
-    elementsLocalization = $state(undefined);
-    constructor(init) {
-        this.viewsCount = init?.viewsCount ?? this.viewsCount;
-        this.timeAgoLocalization = init?.timeAgoLocalization ?? this.timeAgoLocalization;
-        this.elementsLocalization = init?.elementsLocalization ?? this.elementsLocalization;
-    }
-}

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

@@ -1,12 +0,0 @@
-import type { IShortVideoDetailsLocalization } from '../../short-videos/short-video-viewer';
-export interface IStreamPlayerLocalization {
-    streamNotFound?: string;
-    pagesCount?: (count: number) => string;
-    shortVideoDetailsLocalization?: IShortVideoDetailsLocalization;
-}
-export declare class StreamPlayerLocalization {
-    streamNotFound: string;
-    pagesCount: (count: number) => string;
-    shortVideoDetailsLocalization: IShortVideoDetailsLocalization | undefined;
-    constructor(init?: IStreamPlayerLocalization);
-}

package/dist/streams/stream-player/stream-player-localization.svelte.js

@@ -1,10 +0,0 @@
-export class StreamPlayerLocalization {
-    streamNotFound = $state('Stream not found');
-    pagesCount = $state((count) => (count === 1 ? '1 page' : `${count} pages`));
-    shortVideoDetailsLocalization = $state(undefined);
-    constructor(init) {
-        this.streamNotFound = init?.streamNotFound || this.streamNotFound;
-        this.pagesCount = init?.pagesCount || this.pagesCount;
-        this.shortVideoDetailsLocalization = init?.shortVideoDetailsLocalization || this.shortVideoDetailsLocalization;
-    }
-}

package/dist/ui/line-clamp/line-clamp-localization.svelte.js

@@ -1,15 +0,0 @@
-export class LineClampLocalization {
-    showLess = $state('Show less');
-    showMore = $state('Show more');
-    constructor(init) {
-        if (!init) {
-            return;
-        }
-        if (init.showLess !== undefined) {
-            this.showLess = init.showLess;
-        }
-        if (init.showMore !== undefined) {
-            this.showMore = init.showMore;
-        }
-    }
-}

package/dist/ui/time-ago/time-ago-localization.svelte.js

@@ -1,39 +0,0 @@
-export class TimeAgoLocalization {
-    locale = $state('en-US');
-    aMinuteAgo = $state('a minute ago');
-    anHourAgo = $state('an hour ago');
-    justNow = $state('just now');
-    at = $state((date, time) => `${date} at ${time}`);
-    hoursAgo = $state((hours) => `${hours} hours ago`);
-    minutesAgo = $state((minutes) => `${minutes} minutes ago`);
-    yesterday = $state((time) => `esterday at ${time}`);
-    constructor(init) {
-        if (!init) {
-            return;
-        }
-        if (init.locale !== undefined) {
-            this.locale = init.locale;
-        }
-        if (init.aMinuteAgo !== undefined) {
-            this.aMinuteAgo = init.aMinuteAgo;
-        }
-        if (init.anHourAgo !== undefined) {
-            this.anHourAgo = init.anHourAgo;
-        }
-        if (init.justNow !== undefined) {
-            this.justNow = init.justNow;
-        }
-        if (init.at !== undefined) {
-            this.at = init.at;
-        }
-        if (init.hoursAgo !== undefined) {
-            this.hoursAgo = init.hoursAgo;
-        }
-        if (init.minutesAgo !== undefined) {
-            this.minutesAgo = init.minutesAgo;
-        }
-        if (init.yesterday !== undefined) {
-            this.yesterday = init.yesterday;
-        }
-    }
-}