@streamscloud/embeddable 15.1.0 → 16.0.1

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

@@ -1,124 +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>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.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,8 +0,0 @@
-import type { Locale } from '../../core/locale';
-type Props = {
-    fadeTimeout?: number;
-    locale: Locale;
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

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,9 +0,0 @@
-import type { Locale } from '../../core/locale';
-type Props = {
-    date: Date | string | null;
-    thresholdMinutes?: number;
-    locale: Locale;
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

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}`
-    }
-};

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

@@ -1,387 +0,0 @@
-<script lang="ts">import { randomNanoid } from '../../core/utils/string-generator';
-import { Icon, IconColor } from '../icon';
-import { MediaVolumeManager, PlaybackManager } from '../media-playback';
-import { SeekBar } from '../seek-bar';
-import { ScrubberPosition } from './types';
-import IconPause from '@fluentui/svg-icons/icons/pause_20_regular.svg?raw';
-import IconPlay from '@fluentui/svg-icons/icons/play_20_regular.svg?raw';
-import IconSpeaker from '@fluentui/svg-icons/icons/speaker_2_20_regular.svg?raw';
-import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_20_regular.svg?raw';
-import { onDestroy, onMount, untrack } from 'svelte';
-import { fade } from 'svelte/transition';
-let { src, poster, id = randomNanoid(), controls = true, autoplay = false, loop = false, inert = false, hideSpeaker = false, intersectionContainer, scrubberPosition = ScrubberPosition.Bottom, on } = $props();
-onMount(() => {
-    PlaybackManager.registerMountedPlayer(id, {
-        onPlay: () => {
-            play();
-        },
-        onPause: () => {
-            pause();
-        },
-        onStop: (inRespectToNewlyActivatedVideo) => {
-            if (autoplay === 'on-appearance' && inRespectToNewlyActivatedVideo) {
-                return;
-            }
-            stop();
-        },
-        onToggle: () => {
-            togglePlay();
-        },
-        onVolumeChange: (volume) => {
-            setVolume(volume);
-        },
-        onMute: () => {
-            setMuted(true);
-        },
-        onUnmute: () => {
-            setMuted(false);
-        }
-    });
-    on?.loaded?.({ id, src });
-    if (videoContainerRef) {
-        intersectionObserver.observe(videoContainerRef);
-    }
-});
-onDestroy(() => {
-    try {
-        PlaybackManager.unregisterPlayer(id);
-        intersectionObserver.disconnect();
-    }
-    catch {
-        // ignore
-    }
-});
-let video = $state.raw(undefined);
-let videoContainerRef = $state.raw(undefined);
-let showControlsOnHover = $state(false);
-let isVideoPaused = $state(true);
-let percentageCompleted = $state(0);
-let everActivated = $state(false);
-$effect(() => {
-    void src;
-    untrack(() => {
-        if (video?.src) {
-            video.src = src;
-        }
-    });
-});
-const intersectionObserver = new IntersectionObserver((entries) => {
-    if (!video) {
-        return;
-    }
-    const [entry] = entries;
-    // handle lazy loading, if the video is not in the viewport, don't load it
-    if (entry.isIntersecting && !video.src) {
-        video.src = src;
-        video.load();
-        // Handle one-time autoplay
-        if (autoplay === true) {
-            const handleCanPlay = () => {
-                if (entry.isIntersecting) {
-                    play();
-                    autoplay = false;
-                }
-            };
-            video.addEventListener('canplay', handleCanPlay, { once: true });
-            return;
-        }
-    }
-    // the following steps only for video with autoplay on-appearance
-    if (autoplay !== 'on-appearance') {
-        return;
-    }
-    if (!entry.isIntersecting) {
-        stop();
-        return;
-    }
-    if (entry.intersectionRatio < 0.4) {
-        pause();
-    }
-    if (entry.intersectionRatio >= 0.6) {
-        const handleCanPlay = () => {
-            if (entry.intersectionRatio >= 0.6) {
-                play();
-            }
-        };
-        if (video.readyState >= 3) {
-            play();
-        }
-        else {
-            video.addEventListener('canplay', handleCanPlay, { once: true });
-        }
-    }
-}, {
-    root: untrack(() => intersectionContainer),
-    rootMargin: '0px',
-    threshold: [0.1, 0.4, 0.6]
-});
-const play = async () => {
-    if (!video) {
-        return;
-    }
-    try {
-        await video.play();
-    }
-    catch {
-        // can't play video without interaction with document, just ignoring the error
-    }
-    finally {
-        // paused - default state for any video element (not started, not playing, ended)
-        // If the video is still paused after attempting to play (likely due to autoplay restrictions),
-        // we assume it couldn't start due to lack of user interaction.
-        // To comply with autoplay policies, we mute the video and attempt to play it again.
-        if (video.paused) {
-            video.muted = true;
-            video.play();
-        }
-        everActivated = true;
-    }
-};
-const pause = () => {
-    video?.pause();
-};
-const stop = () => {
-    if (!video) {
-        return;
-    }
-    video.pause();
-    video.currentTime = 0;
-    video.load();
-    onPause();
-};
-const togglePlay = (e) => {
-    e?.stopPropagation();
-    if (!video) {
-        return;
-    }
-    if (video.paused) {
-        play();
-    }
-    else {
-        pause();
-    }
-};
-const toggleMute = (e) => {
-    e?.stopPropagation();
-    setMuted(!video?.muted);
-};
-const onVolumeChange = (e) => {
-    const video = e.target;
-    MediaVolumeManager.volumeLevel = video.volume;
-    MediaVolumeManager.isMuted = video.muted;
-};
-const onTimeUpdate = (e) => {
-    const video = e.target;
-    percentageCompleted = video.currentTime / video.duration || 0;
-    notifyProgress();
-};
-const onLoaded = async () => {
-    setVolume(MediaVolumeManager.volumeLevel);
-    setMuted(MediaVolumeManager.isMuted);
-};
-const onEnded = () => {
-    percentageCompleted = 1;
-    notifyProgress();
-    on?.ended?.({ id, src });
-    if (!loop) {
-        everActivated = false;
-    }
-};
-const onPlay = () => {
-    isVideoPaused = false;
-    PlaybackManager.setPlayingComponent(id);
-};
-const onPause = () => {
-    isVideoPaused = true;
-};
-const setVolume = (level) => {
-    MediaVolumeManager.volumeLevel = level;
-    if (video) {
-        video.volume = level;
-    }
-};
-const setMuted = (state) => {
-    MediaVolumeManager.isMuted = state;
-};
-$effect(() => {
-    if (video) {
-        video.muted = MediaVolumeManager.isMuted;
-    }
-});
-const setShowControlsOnHover = (state) => {
-    showControlsOnHover = state;
-};
-const notifyProgress = () => {
-    on?.progress?.(percentageCompleted);
-};
-const handleSeek = (percent) => {
-    if (video) {
-        video.currentTime = video.duration * percent;
-        percentageCompleted = percent;
-        notifyProgress();
-    }
-};
-</script>
-
-<div class="video" role="none" inert={inert} bind:this={videoContainerRef}>
-  <video
-    class="video__video"
-    class:video__video--not-activated={!everActivated}
-    width="100%"
-    controls={controls && everActivated}
-    poster={poster}
-    loop={loop}
-    preload="metadata"
-    onvolumechange={onVolumeChange}
-    ontimeupdate={onTimeUpdate}
-    onloadeddata={onLoaded}
-    onended={onEnded}
-    onplay={onPlay}
-    onpause={onPause}
-    playsinline
-    bind:this={video}>
-    <track src="" kind="captions" />
-  </video>
-  {#if !everActivated}
-    <img class="video__poster" src={poster} alt="" />
-  {/if}
-  {#if !controls || !everActivated}
-    <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} />
-        </button>
-      {:else if showControlsOnHover}
-        <button type="button" aria-label="pause" class="video__playback-button video__playback-button--pause" onclick={togglePlay} onkeydown={() => ({})}>
-          <Icon src={IconPause} color={IconColor.White} />
-        </button>
-      {/if}
-      {#if (showControlsOnHover || MediaVolumeManager.isMuted) && !hideSpeaker}
-        <button type="button" aria-label={MediaVolumeManager.isMuted ? 'mute' : 'unmute'} class="video__mute-button" onclick={toggleMute}>
-          {#if MediaVolumeManager.isMuted}
-            <Icon src={IconSpeakerMute} color={IconColor.White} />
-          {:else}
-            <Icon src={IconSpeaker} color={IconColor.White} />
-          {/if}
-        </button>
-      {/if}
-
-      {#if everActivated}
-        <div
-          class="video__progress-container"
-          class:video__progress-container--top={scrubberPosition === ScrubberPosition.Top}
-          class:video__progress-container--bottom={scrubberPosition === ScrubberPosition.Bottom}
-          onmouseenter={() => setShowControlsOnHover(true)}
-          onmouseleave={() => setShowControlsOnHover(false)}
-          role="none">
-          {#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>
-      {/if}
-    </div>
-  {/if}
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.video {
-  --_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, contain);
-  height: 100%;
-  min-height: 100%;
-  max-height: 100%;
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-  border-radius: var(--_video--border-radius);
-  background: var(--_video--background-color);
-}
-.video__playback-button {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 2em;
-}
-.video__playback-button--pause {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .video__playback-button--pause {
-    display: none;
-  }
-}
-.video__mute-button {
-  position: absolute;
-  top: 0.625em;
-  right: 0.625em;
-  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%;
-  min-height: 100%;
-  max-width: 100%;
-  max-height: 100%;
-}
-.video__video--not-activated {
-  visibility: hidden;
-  height: 0;
-  min-height: 0;
-}
-.video__overlay {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: transparent;
-}
-.video__progress-container {
-  position: absolute;
-  left: 0;
-  right: 0;
-  z-index: 1;
-  height: 2.5rem;
-  padding: 0.625rem 0.25rem;
-}
-.video__progress-container--top {
-  top: -0.625rem;
-  bottom: auto;
-  padding-bottom: 0.9375rem;
-}
-.video__progress-container--bottom {
-  top: auto;
-  bottom: -0.625rem;
-  padding-top: 0.9375rem;
-}</style>