@streamscloud/embeddable 15.1.0-1770823267010 → 16.0.0

package/dist/ui/proportional-container/cmp.proportional-container.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CmpProps = typeof __propDef.props;
-export type CmpEvents = typeof __propDef.events;
-export type CmpSlots = typeof __propDef.slots;
-export default class Cmp extends SvelteComponentTyped<CmpProps, CmpEvents, CmpSlots> {
-}
-export {};

package/dist/ui/proportional-container/index.d.ts

@@ -1 +0,0 @@
-export { default as ProportionalContainer } from './cmp.proportional-container.svelte';

package/dist/ui/proportional-container/index.js

@@ -1 +0,0 @@
-export { default as ProportionalContainer } from './cmp.proportional-container.svelte';

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

@@ -1,156 +0,0 @@
-<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)}%`);
-const handleSeek = (e) => {
-    if (!progressRef) {
-        return;
-    }
-    e.stopPropagation();
-    const { left, width } = progressRef.getBoundingClientRect();
-    const x = e.clientX - left;
-    const percent = Math.max(0, Math.min(1, x / width));
-    on?.seek(percent);
-};
-const handleParentClick = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!progressRef || !seekBarRef || isDragging) {
-        return;
-    }
-    const seekBarRect = progressRef.getBoundingClientRect();
-    if (e.clientX >= seekBarRect.left && e.clientX <= seekBarRect.right) {
-        const x = e.clientX - seekBarRect.left;
-        const percent = Math.max(0, Math.min(1, x / seekBarRect.width));
-        on?.seek(percent);
-    }
-};
-const onMouseMove = (e) => {
-    if (isDragging) {
-        handleSeek(e);
-    }
-};
-const onMouseUp = () => {
-    isDragging = false;
-    window.removeEventListener('mousemove', onMouseMove);
-    window.removeEventListener('mouseup', onMouseUp);
-    scrubberRef?.blur();
-    on?.dragEnd?.();
-};
-const onMouseDown = (e) => {
-    isDragging = true;
-    on?.dragStart?.();
-    handleSeek(e);
-    window.addEventListener('mousemove', onMouseMove);
-    window.addEventListener('mouseup', onMouseUp);
-    scrubberRef?.blur();
-};
-const handleScrubberKeyDown = (event) => {
-    const step = 0.05;
-    let newValue;
-    if (event.key === 'ArrowLeft') {
-        newValue = Math.max(0, value - step);
-    }
-    else if (event.key === 'ArrowRight') {
-        newValue = Math.min(1, value + step);
-    }
-    else if (event.key === 'Home') {
-        newValue = 0;
-    }
-    else if (event.key === 'End') {
-        newValue = 1;
-    }
-    if (newValue !== undefined) {
-        event.preventDefault();
-        on?.seek(newValue);
-    }
-};
-$effect(() => {
-    let parent = null;
-    if (listenParentClicks && seekBarRef) {
-        parent = seekBarRef.parentElement;
-        if (parent) {
-            parent.addEventListener('click', handleParentClick);
-        }
-    }
-    return () => {
-        if (parent) {
-            parent.removeEventListener('click', handleParentClick);
-        }
-    };
-});
-$effect(() => {
-    return () => {
-        window.removeEventListener('mousemove', onMouseMove);
-        window.removeEventListener('mouseup', onMouseUp);
-    };
-});
-</script>
-
-<div class="seek-bar" onmousedown={onMouseDown} onkeydown={() => ({})} role="none" bind:this={seekBarRef}>
-  <div class="seek-bar__container" bind:this={progressRef}>
-    <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"
-      aria-valuemin="0"
-      aria-valuemax="1"
-      aria-valuenow={value}
-      aria-label="Media position slider"
-      onkeydown={handleScrubberKeyDown}>
-    </div>
-  </div>
-</div>
-
-<style>.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, #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%;
-  background: var(--_seek-bar--container-color);
-  height: 0.3125rem;
-  position: relative;
-}
-.seek-bar__value {
-  background: var(--_seek-bar--value-color);
-  border-color: var(--_seek-bar--container-color);
-  border-width: 0.0625rem;
-  display: inline-block;
-  height: 100%;
-}
-.seek-bar__scrubber {
-  position: absolute;
-  top: 50%;
-  width: 0.75rem;
-  height: 0.75rem;
-  background: var(--_seek-bar--scrubber-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/seek-bar/cmp.seek-bar.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CmpProps = typeof __propDef.props;
-export type CmpEvents = typeof __propDef.events;
-export type CmpSlots = typeof __propDef.slots;
-export default class Cmp extends SvelteComponentTyped<CmpProps, CmpEvents, CmpSlots> {
-}
-export {};

package/dist/ui/seek-bar/index.d.ts

@@ -1 +0,0 @@
-export { default as SeekBar } from './cmp.seek-bar.svelte';

package/dist/ui/seek-bar/index.js

@@ -1 +0,0 @@
-export { default as SeekBar } from './cmp.seek-bar.svelte';

package/dist/ui/swipe-indicator/cmp.swipe-indicator.svelte

@@ -1,113 +0,0 @@
-<script lang="ts">import { Icon } from '../icon';
-import { SwipeIndicatorLocalization } from './swipe-indicator-localization';
-import IconArrowUp from '@fluentui/svg-icons/icons/arrow_up_20_regular.svg?raw';
-let { fadeTimeout = 2000, locale } = $props();
-const localization = $derived(new SwipeIndicatorLocalization(locale));
-let isFaded = $state(false);
-const indicatorMounted = (_) => {
-    if (fadeTimeout) {
-        const timeout = setTimeout(() => {
-            isFaded = true;
-        }, 3000);
-        return {
-            destroy() {
-                clearTimeout(timeout);
-            }
-        };
-    }
-};
-</script>
-
-<div class="swipe-indicator" class:swipe-indicator--faded={isFaded} use:indicatorMounted>
-  <div class="swipe-indicator__icon">
-    <Icon src={IconArrowUp} />
-  </div>
-  <div class="swipe-indicator__text">
-    {localization.swipe}
-  </div>
-</div>
-
-<style>.swipe-indicator {
-  --_swipe-indicator--color: var(--swipe-indicator--color, #ffffff);
-  --_swipe-indicator--font-size: var(--swipe-indicator--font-size, 1rem);
-  --_swipe-indicator--icon-size: var(--swipe-indicator--icon-size, var(--_swipe-indicator--font-size));
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  top: 80%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 10;
-  color: var(--_swipe-indicator--color);
-  opacity: 1;
-  transition: opacity 2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.swipe-indicator--faded {
-  opacity: 0;
-  pointer-events: none;
-}
-.swipe-indicator:before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  pointer-events: none;
-  border-radius: 50%;
-  background: #000;
-  filter: blur(12px);
-  transform: scale(3);
-}
-.swipe-indicator__icon {
-  font-size: var(--_swipe-indicator--icon-size);
-  animation: bounce 2.7s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
-  will-change: transform;
-  z-index: 1;
-}
-.swipe-indicator__text {
-  font-size: var(--_swipe-indicator--font-size);
-  z-index: 1;
-}
-
-@keyframes bounce {
-  0%, 100% {
-    transform: translateY(0);
-  }
-  10% {
-    transform: translateY(-24px);
-  }
-  18% {
-    transform: translateY(0);
-  }
-  26% {
-    transform: translateY(-12px);
-  }
-  34% {
-    transform: translateY(0);
-  }
-  41% {
-    transform: translateY(-8px);
-  }
-  48% {
-    transform: translateY(0);
-  }
-  54% {
-    transform: translateY(-4px);
-  }
-  60% {
-    transform: translateY(0);
-  }
-  65% {
-    transform: translateY(-2px);
-  }
-  70% {
-    transform: translateY(0);
-  }
-  75% {
-    transform: translateY(-1px);
-  }
-  80% {
-    transform: translateY(0);
-  }
-}</style>

package/dist/ui/swipe-indicator/cmp.swipe-indicator.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CmpProps = typeof __propDef.props;
-export type CmpEvents = typeof __propDef.events;
-export type CmpSlots = typeof __propDef.slots;
-export default class Cmp extends SvelteComponentTyped<CmpProps, CmpEvents, CmpSlots> {
-}
-export {};

package/dist/ui/swipe-indicator/index.d.ts

@@ -1 +0,0 @@
-export { default as SwipeIndicator } from './cmp.swipe-indicator.svelte';

package/dist/ui/swipe-indicator/index.js

@@ -1 +0,0 @@
-export { default as SwipeIndicator } from './cmp.swipe-indicator.svelte';

package/dist/ui/swipe-indicator/swipe-indicator-localization.d.ts

@@ -1,5 +0,0 @@
-import { type Locale } from '../../core/locale';
-export declare class SwipeIndicatorLocalization {
-    swipe: string;
-    constructor(locale: Locale);
-}

package/dist/ui/swipe-indicator/swipe-indicator-localization.js

@@ -1,13 +0,0 @@
-import {} from '../../core/locale';
-export class SwipeIndicatorLocalization {
-    swipe;
-    constructor(locale) {
-        this.swipe = loc.swipe[locale];
-    }
-}
-const loc = {
-    swipe: {
-        en: 'Swipe',
-        no: 'Sveip'
-    }
-};

package/dist/ui/time-ago/cmp.time-ago.svelte

@@ -1,69 +0,0 @@
-<script lang="ts">import { DateFormatOptions, DateHelper } from '../../core/utils/date-helper';
-import { TimeAgoLocalization } from './time-ago-localization';
-import { onDestroy } from 'svelte';
-let { date = null, thresholdMinutes = 60 * 24 * 2 /* 2 days */, locale } = $props();
-const localization = $derived(new TimeAgoLocalization(locale));
-let timeSpan = $state.raw(null);
-let timeoutId;
-onDestroy(() => {
-    disableTimeout();
-});
-const setRelativeTime = (date) => {
-    disableTimeout();
-    const dateVal = date ? DateHelper.toDate(date) : new Date();
-    const setupAbsDate = () => {
-        timeSpan = localization.at(dateVal.toLocaleString(localization.locale, dateVal.getFullYear() === new Date().getFullYear() ? DateFormatOptions.dateFormatWithoutYear : DateFormatOptions.dateFormat), dateVal.toLocaleString(localization.locale, DateFormatOptions.timeFormat));
-    };
-    const diffSeconds = (+new Date() - +dateVal) / 1000;
-    if (diffSeconds > thresholdMinutes * 60) {
-        return setupAbsDate();
-    }
-    const secsInHour = 60 * 60; // 3600
-    const secsIn2Hours = secsInHour * 2; // 7200
-    const secsInDay = 60 * 60 * 24; // 86400
-    const secsIn2Days = secsInDay * 2; // 172800
-    let refreshIntervalSec;
-    if (diffSeconds < 60) {
-        timeSpan = localization.justNow;
-        refreshIntervalSec = 5;
-    }
-    else if (diffSeconds < 120) {
-        timeSpan = localization.aMinuteAgo;
-        refreshIntervalSec = 5;
-    }
-    else if (diffSeconds < secsInHour) {
-        timeSpan = localization.minutesAgo(Math.floor(diffSeconds / 60));
-        refreshIntervalSec = 60;
-    }
-    else if (diffSeconds < secsIn2Hours) {
-        timeSpan = localization.anHourAgo;
-        refreshIntervalSec = 60;
-    }
-    else if (diffSeconds < secsInDay) {
-        timeSpan = localization.hoursAgo(Math.floor(diffSeconds / secsInHour));
-        refreshIntervalSec = 3600;
-    }
-    else if (diffSeconds < secsIn2Days) {
-        timeSpan = localization.yesterday(dateVal.toLocaleString(localization.locale, DateFormatOptions.timeFormat));
-        refreshIntervalSec = 3600;
-    }
-    else {
-        return setupAbsDate();
-    }
-    timeoutId = setTimeout(() => setRelativeTime(date), refreshIntervalSec * 1000);
-};
-$effect(() => {
-    setRelativeTime(date);
-});
-const disableTimeout = () => {
-    if (timeoutId) {
-        clearTimeout(timeoutId);
-    }
-};
-</script>
-
-<span>
-  {#if timeSpan}
-    {timeSpan}
-  {/if}
-</span>

package/dist/ui/time-ago/cmp.time-ago.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CmpProps = typeof __propDef.props;
-export type CmpEvents = typeof __propDef.events;
-export type CmpSlots = typeof __propDef.slots;
-export default class Cmp extends SvelteComponentTyped<CmpProps, CmpEvents, CmpSlots> {
-}
-export {};

package/dist/ui/time-ago/index.d.ts

@@ -1 +0,0 @@
-export { default as TimeAgo } from './cmp.time-ago.svelte';

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

@@ -1 +0,0 @@
-export { default as TimeAgo } from './cmp.time-ago.svelte';

package/dist/ui/time-ago/time-ago-localization.d.ts

@@ -1,12 +0,0 @@
-import { type Locale } from '../../core/locale';
-export declare class TimeAgoLocalization {
-    locale: string;
-    aMinuteAgo: string;
-    anHourAgo: string;
-    justNow: string;
-    at: (date: string, time: string) => string;
-    hoursAgo: (hours: number) => string;
-    minutesAgo: (minutes: number) => string;
-    yesterday: (time: string) => string;
-    constructor(locale: Locale);
-}

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

@@ -1,55 +0,0 @@
-import {} from '../../core/locale';
-export class TimeAgoLocalization {
-    locale;
-    aMinuteAgo;
-    anHourAgo;
-    justNow;
-    at;
-    hoursAgo;
-    minutesAgo;
-    yesterday;
-    constructor(locale) {
-        this.locale = loc.locale[locale];
-        this.aMinuteAgo = loc.aMinuteAgo[locale];
-        this.anHourAgo = loc.anHourAgo[locale];
-        this.justNow = loc.justNow[locale];
-        this.at = loc.at[locale];
-        this.hoursAgo = loc.hoursAgo[locale];
-        this.minutesAgo = loc.minutesAgo[locale];
-        this.yesterday = loc.yesterday[locale];
-    }
-}
-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}`
-    }
-};