@streamscloud/embeddable 1.1.2

package/dist/ui/spotlight-layout/cmp.spotlight-layout.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">let { ratio, children, left = undefined, right = undefined, on } = $props();
+let containerRef = $state.raw(null);
+let mainSceneRef = $state.raw(null);
+let leftSidebarRef = $state.raw(null);
+let rightSidebarRef = $state.raw(null);
+const notifyDimensionChanged = () => {
+    var _a;
+    if (!containerRef || !mainSceneRef || !leftSidebarRef || !rightSidebarRef) {
+        return;
+    }
+    (_a = on === null || on === void 0 ? void 0 : on.dimensionsChanged) === null || _a === void 0 ? void 0 : _a.call(on, {
+        mainSceneWidth: mainSceneRef.getBoundingClientRect().width,
+        leftSidebarWidth: leftSidebarRef.getBoundingClientRect().width,
+        rightSidebarWidth: rightSidebarRef.getBoundingClientRect().width,
+        totalWidth: containerRef.getBoundingClientRect().width
+    });
+};
+let computedMainSceneStyle = $state('width: 100%; height: 100%');
+const calcMainSceneSize = () => {
+    if (!containerRef) {
+        return;
+    }
+    const { width: parentWidth, height: parentHeight } = containerRef.getBoundingClientRect();
+    const parentAspectRatio = parentWidth / parentHeight;
+    let width;
+    let height;
+    let margin;
+    if (parentAspectRatio > ratio) {
+        // container is wider than main content
+        width = `${parentHeight * ratio}px`;
+        height = '100%';
+        margin = '0 auto';
+    }
+    else if (parentAspectRatio < ratio) {
+        // main content is wider than container
+        width = '100%';
+        height = `${parentWidth / ratio}px`;
+        margin = 'auto 0';
+    }
+    else {
+        // fallback case
+        width = '100%';
+        height = '100%';
+        margin = '0';
+    }
+    computedMainSceneStyle = `--_spotlight-layout--main--width: ${width}; --_spotlight-layout--main--height: ${height}; --_spotlight-layout--main--margin: ${margin};`;
+};
+$effect(() => {
+    let mainSceneSizeCalculationObserver = new ResizeObserver(calcMainSceneSize);
+    let dimentionsChangedObserver = new ResizeObserver(notifyDimensionChanged);
+    if (containerRef && mainSceneRef && leftSidebarRef && rightSidebarRef) {
+        mainSceneSizeCalculationObserver.observe(mainSceneRef);
+        dimentionsChangedObserver.observe(containerRef);
+        dimentionsChangedObserver.observe(mainSceneRef);
+        dimentionsChangedObserver.observe(leftSidebarRef);
+        dimentionsChangedObserver.observe(rightSidebarRef);
+    }
+    return () => {
+        mainSceneSizeCalculationObserver.disconnect();
+        dimentionsChangedObserver.disconnect();
+    };
+});
+export {};
+</script>
+
+<div class="spotlight-layout" bind:this={containerRef}>
+  <div class="spotlight-layout__sidebar" bind:this={leftSidebarRef}>
+    {#if left}
+      {@render left()}
+    {/if}
+  </div>
+
+  <div class="spotlight-layout__main-scene" bind:this={mainSceneRef} style={computedMainSceneStyle}>
+    {@render children()}
+  </div>
+  <div class="spotlight-layout__sidebar" bind:this={rightSidebarRef}>
+    {#if right}
+      {@render right()}
+    {/if}
+  </div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.spotlight-layout {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  container-type: inline-size;
+  display: flex;
+}
+.spotlight-layout__main-scene {
+  width: var(--_spotlight-layout--main--width);
+  height: var(--_spotlight-layout--main--height);
+  margin: var(--_spotlight-layout--main--margin);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .spotlight-layout__main-scene {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+  }
+}</style>

package/dist/ui/spotlight-layout/cmp.spotlight-layout.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    ratio: number;
+    children: Snippet;
+    left?: Snippet;
+    right?: Snippet;
+    on?: {
+        dimensionsChanged?: (dimensions: {
+            mainSceneWidth: number;
+            leftSidebarWidth: number;
+            rightSidebarWidth: number;
+            totalWidth: number;
+        }) => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/spotlight-layout/index.d.ts

@@ -0,0 +1 @@
+export { default as SpotlightLayout } from './cmp.spotlight-layout.svelte';

package/dist/ui/spotlight-layout/index.js

@@ -0,0 +1 @@
+export { default as SpotlightLayout } from './cmp.spotlight-layout.svelte';

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

@@ -0,0 +1,69 @@
+<script lang="ts">import { DateFormatOptions, DateHelper } from '../../core/utils/date-helper';
+import { TimeAgoLocalization } from './time-ago-localization.svelte';
+import { onDestroy } from 'svelte';
+let { date = null, thresholdMinutes = 60 * 24 * 2 /* 2 days */, localization: localizationInit } = $props();
+const localization = $derived(new TimeAgoLocalization(localizationInit));
+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

@@ -0,0 +1,9 @@
+import { type ITimeAgoLocalization } from './time-ago-localization.svelte';
+type Props = {
+    date: Date | string | null;
+    thresholdMinutes?: number;
+    localization?: ITimeAgoLocalization;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

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

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

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

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

@@ -0,0 +1,21 @@
+export interface ITimeAgoLocalization {
+    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;
+}
+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(init?: ITimeAgoLocalization);
+}

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

@@ -0,0 +1,39 @@
+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;
+        }
+    }
+}

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

@@ -0,0 +1,377 @@
+<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { randomNanoid } from '../../core/utils/string-generator';
+import { MediaVolumeManager, PlaybackManager } from '../media-playback';
+import { Icon, IconColor } from '../icon';
+import { Progress } from '../progress';
+import { SeekBar } from '../seek-bar';
+import IconPause from '@fluentui/svg-icons/icons/pause_20_regular.svg';
+import IconPlay from '@fluentui/svg-icons/icons/play_20_regular.svg';
+import IconSpeaker from '@fluentui/svg-icons/icons/speaker_2_20_regular.svg';
+import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_20_regular.svg';
+import { onDestroy, onMount, untrack } from 'svelte';
+import { slide } from 'svelte/transition';
+let { src, poster, id = randomNanoid(), controls = true, autoplay = false, loop = false, inert = false, intersectionContainer, on } = $props();
+onMount(() => {
+    var _a;
+    PlaybackManager.registerMountedPlayer(id, {
+        onPlay: () => {
+            play();
+        },
+        onPause: () => {
+            pause();
+        },
+        onStop: (inRespectToNewlyActivatedVideo) => {
+            if (inRespectToNewlyActivatedVideo && autoplay === 'on-appearance') {
+                pause();
+            }
+            else {
+                stop();
+            }
+        },
+        onToggle: () => {
+            togglePlay();
+        },
+        onVolumeChange: (volume) => {
+            setVolume(volume);
+        },
+        onMute: () => {
+            setMuted(true);
+        },
+        onUnmute: () => {
+            setMuted(false);
+        }
+    });
+    (_a = on === null || on === void 0 ? void 0 : on.loaded) === null || _a === void 0 ? void 0 : _a.call(on, { id, src });
+    if (video) {
+        intersectionObserver.observe(video);
+    }
+});
+onDestroy(() => {
+    PlaybackManager.unregisterPlayer(id);
+    intersectionObserver.disconnect();
+});
+let video = $state.raw(undefined);
+let showControlsOnHover = $state(false);
+let needShowProgress = $state(false);
+let isVideoPaused = $state(true);
+let percentageCompleted = $state(0);
+let everActivated = $state(false);
+$effect(() => {
+    void src;
+    untrack(() => {
+        if (video === null || video === void 0 ? void 0 : 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: intersectionContainer,
+    rootMargin: '0px',
+    threshold: [0.1, 0.4, 0.6]
+});
+const play = () => __awaiter(void 0, void 0, void 0, function* () {
+    if (!video) {
+        return;
+    }
+    try {
+        yield video.play();
+    }
+    catch (_a) {
+        // 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 === null || video === void 0 ? void 0 : video.pause();
+};
+const stop = () => {
+    if (!video) {
+        return;
+    }
+    video.pause();
+    video.currentTime = 0;
+    video.load();
+};
+const togglePlay = (e) => {
+    e === null || e === void 0 ? void 0 : e.stopPropagation();
+    if (!video) {
+        return;
+    }
+    if (video.paused) {
+        play();
+    }
+    else {
+        pause();
+    }
+};
+const toggleMute = (e) => {
+    e === null || e === void 0 ? void 0 : e.stopPropagation();
+    setMuted(!(video === null || video === void 0 ? void 0 : 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 = (e) => __awaiter(void 0, void 0, void 0, function* () {
+    const video = e.target;
+    needShowProgress = video.duration >= 8;
+    setVolume(MediaVolumeManager.volumeLevel);
+    setMuted(MediaVolumeManager.isMuted);
+});
+const onEnded = () => {
+    var _a;
+    percentageCompleted = 1;
+    notifyProgress();
+    (_a = on === null || on === void 0 ? void 0 : on.ended) === null || _a === void 0 ? void 0 : _a.call(on, { 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 = () => {
+    var _a;
+    (_a = on === null || on === void 0 ? void 0 : on.progress) === null || _a === void 0 ? void 0 : _a.call(on, percentageCompleted);
+};
+const handleSeek = (percent) => {
+    if (video) {
+        video.currentTime = video.duration * percent;
+    }
+};
+</script>
+
+<div class="video" onmouseenter={() => setShowControlsOnHover(true)} onmouseleave={() => setShowControlsOnHover(false)} role="none" inert={inert}>
+  <video
+    class="video__video"
+    style={everActivated ? `--_video--media-fit: contain;` : ''}
+    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 !controls || !everActivated}
+    <div class="video__cover" 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}
+        <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}
+
+      <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}
+      </div>
+    </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--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);
+  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__video {
+  object-fit: var(--_video--media-fit);
+  min-width: 100%;
+  min-height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}
+.video__cover {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+}
+.video__progress-container {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.video__progress {
+  margin-bottom: 1px;
+  --progress--height: 0.125em;
+  --progress--back-color: var(--_video--progress--back-color);
+  --progress--front-color: var(--_video--progress--front-color);
+}
+.video__seek-bar {
+  padding: 0.625em 0.5em;
+  background: var(--_video--progress--background-color);
+  cursor: default;
+  --seek-bar--back-color: var(--_video--progress--back-color);
+  --seek-bar--front-color: var(--_video--progress--front-color);
+}</style>

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

@@ -0,0 +1,24 @@
+type Props = {
+    src: string;
+    poster: string | null;
+    id?: string;
+    controls?: boolean;
+    autoplay?: true | false | 'on-appearance';
+    loop?: boolean;
+    intersectionContainer?: HTMLElement;
+    inert?: boolean;
+    on?: {
+        loaded?: (data: {
+            id: string;
+            src: string;
+        }) => void;
+        progress?: (value: number) => void;
+        ended?: (data: {
+            id: string;
+            src: string;
+        }) => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/video/index.d.ts

@@ -0,0 +1 @@
+export { default as Video } from './cmp.video.svelte';