@streamscloud/embeddable 2.1.1 → 2.1.2

package/dist/ui/player/player-buffer.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { IPlayerBuffer } from './types';
+export declare class PlayerBuffer<T extends {
+    id: string;
+}> implements IPlayerBuffer<T> {
+    readonly loaded: T[];
+    readonly currentIndex: number;
+    readonly current: T | null;
+    readonly canLoadNext: boolean;
+    readonly canLoadPrevious: boolean;
+    readonly navigationDisabled: boolean;
+    readonly animationDuration = 1200;
+    private _currentIndex;
+    private _loaded;
+    private loadMoreFn;
+    private isLoading;
+    constructor(provider: PlayerItemsProvider<T>);
+    loadNext: () => Promise<void>;
+    loadPrevious: () => Promise<void>;
+    reset: () => void;
+    private warmUpBuffer;
+}
+export type PlayerItemsProvider<T> = {
+    initialData: {
+        prefetchedItems: T[];
+        startIndex: number;
+    };
+    loadMore(): Promise<T[]>;
+};

package/dist/ui/player/player-buffer.svelte.js

@@ -0,0 +1,64 @@
+import { Utils } from '../../core/utils';
+export class PlayerBuffer {
+    loaded = $derived.by(() => this._loaded);
+    currentIndex = $derived.by(() => this._currentIndex);
+    current = $derived(this.currentIndex >= 0 ? this.loaded[this.currentIndex] : null);
+    canLoadNext = $derived(this.currentIndex < this.loaded.length - 1);
+    canLoadPrevious = $derived(this.currentIndex > 0);
+    navigationDisabled = $derived(!this.canLoadNext && !this.canLoadPrevious);
+    animationDuration = 1200;
+    _currentIndex = $state(-1);
+    _loaded = $state.raw([]);
+    loadMoreFn;
+    isLoading = false;
+    constructor(provider) {
+        this.loadMoreFn = provider.loadMore;
+        this._loaded = provider.initialData.prefetchedItems;
+        this._currentIndex = this._loaded.length
+            ? provider.initialData.startIndex >= this._loaded.length
+                ? this._loaded.length - 1
+                : provider.initialData.startIndex
+            : -1;
+        this.warmUpBuffer();
+        this.loadNext = Utils.throttle(this.loadNext, this.animationDuration);
+        this.loadPrevious = Utils.throttle(this.loadPrevious, this.animationDuration);
+    }
+    loadNext = async () => {
+        if (!this.canLoadNext) {
+            return;
+        }
+        ++this._currentIndex;
+        this.warmUpBuffer();
+    };
+    loadPrevious = async () => {
+        if (!this.canLoadPrevious) {
+            return;
+        }
+        --this._currentIndex;
+    };
+    reset = () => {
+        this._loaded = [];
+        this._currentIndex = -1;
+        this.isLoading = false;
+        this.warmUpBuffer();
+    };
+    warmUpBuffer = async () => {
+        const bufferSize = 5;
+        if (this._loaded.length >= this.currentIndex + bufferSize || this.isLoading) {
+            return;
+        }
+        this.isLoading = true;
+        try {
+            const result = await this.loadMoreFn();
+            this._loaded = [...this._loaded, ...result];
+            if (this.currentIndex < 0) {
+                if (this._loaded.length > 0) {
+                    this._currentIndex = 0;
+                }
+            }
+        }
+        finally {
+            this.isLoading = false;
+        }
+    };
+}

package/dist/ui/player/prevent-slider-scroll.d.ts

@@ -0,0 +1,5 @@
+/** @type {import('svelte/action').Action}  */
+export declare const preventSliderScroll: (node: HTMLElement, value?: boolean) => {
+    destroy(): void;
+};
+export declare const isScrollingPrevented: (node: HTMLElement) => boolean;

package/dist/ui/player/prevent-slider-scroll.js

@@ -0,0 +1,11 @@
+/** @type {import('svelte/action').Action}  */
+export const preventSliderScroll = (node, value = true) => {
+    node.dataset[preventScrollingAttrubute] = value.toString();
+    return {
+        destroy() {
+            // the node has been removed from the DOM
+        }
+    };
+};
+export const isScrollingPrevented = (node) => node.dataset[preventScrollingAttrubute] === 'true';
+const preventScrollingAttrubute = 'preventPlayerScrolling';

package/dist/ui/player/types.d.ts

@@ -0,0 +1,14 @@
+export interface IPlayerBuffer<T extends {
+    id: string;
+}> {
+    readonly current: T | null;
+    readonly currentIndex: number;
+    readonly loaded: T[];
+    readonly canLoadNext: boolean;
+    readonly canLoadPrevious: boolean;
+    readonly navigationDisabled: boolean;
+    readonly animationDuration: number;
+    loadNext: () => void;
+    loadPrevious: () => void;
+    reset: () => void;
+}

package/dist/ui/player/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/progress/cmp.progress.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">let { value } = $props();
+</script>
+
+<div class="progress">
+  <span class="progress__value" class:progress__value--animated={value > 0.01 && value < 0.96} style="width: {`${100 * (value <= 1 ? value : 1)}%`}">
+    &nbsp;
+  </span>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.progress {
+  --_progress--height: var(--progress--height, 0.25em);
+  --_progress--back-color: var(--progress--back-color, #b0b0b0);
+  --_progress--front-color: var(--progress--front-color, #ffffff);
+  width: 100%;
+  background: var(--_progress--back-color);
+  height: var(--_progress--height);
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
+}
+.progress__value {
+  background: var(--_progress--front-color);
+  display: inline-block;
+  height: 100%;
+}
+.progress__value--animated {
+  transition: width 600ms;
+}</style>

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

@@ -0,0 +1,6 @@
+type Props = {
+    value: number;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

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

package/dist/ui/progress/index.js

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

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

@@ -0,0 +1,39 @@
+<script lang="ts">let { ratio, children } = $props();
+export {};
+</script>
+
+<div class="proportional-container" style={ratio ? `--proportional-container--ratio: ${ratio};` : undefined}>
+  <div class="proportional-container__placer">
+    {@render children?.()}
+  </div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.proportional-container {
+  --_proportional-container--ratio: var(--proportional-container--ratio, 1);
+  --_proportional-container--height: var(--proportional-container--height, auto);
+  --_proportional-container--width: var(--proportional-container--width, 100%);
+  width: var(--_proportional-container--width);
+  max-width: 100%;
+  height: var(--_proportional-container--height);
+  max-height: 100%;
+  aspect-ratio: var(--_proportional-container--ratio);
+  position: relative;
+}
+.proportional-container__placer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}</style>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    ratio?: number | undefined;
+    children?: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

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

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

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

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

@@ -0,0 +1,63 @@
+<script lang="ts">let { value, on } = $props();
+let progressRef;
+let valueRef;
+const handleSeek = (e) => {
+    e.stopPropagation();
+    const { left, width } = progressRef.getBoundingClientRect();
+    const x = e.clientX - left;
+    const percent = x / width;
+    value = percent;
+    valueRef.style.transition = 'none';
+    valueRef.style.width = `${100 * percent}%`;
+    setTimeout(() => {
+        valueRef.style.transition = '';
+    }, 0);
+    on === null || on === void 0 ? void 0 : on.seek(percent);
+};
+</script>
+
+<div class="seek-bar" onclick={handleSeek} onkeydown={() => ({})} role="none">
+  <div class="seek-bar__container" bind:this={progressRef}>
+    <span
+      class="seek-bar__value"
+      class:seek-bar__value--animate={value > 0.001 && value < 0.96}
+      style="width: {`${100 * (value <= 1 ? value : 1)}%`}"
+      bind:this={valueRef}>
+      &nbsp;
+    </span>
+  </div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.seek-bar {
+  --_seek-bar--height: var(--seek-bar--height, 0.25em);
+  --_seek-bar--back-color: var(--seek-bar--back-color, #b0b0b0);
+  --_seek-bar--front-color: var(--seek-bar--front-color, #ffffff);
+  cursor: pointer;
+}
+.seek-bar__container {
+  width: 100%;
+  background: var(--_seek-bar--back-color);
+  height: var(--_seek-bar--height);
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
+  border-radius: calc(var(--_seek-bar--height) / 2);
+  overflow: hidden;
+}
+.seek-bar__value {
+  background: var(--_seek-bar--front-color);
+  display: inline-block;
+  height: 100%;
+}
+.seek-bar__value--animate {
+  transition: width 500ms;
+}</style>

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

@@ -0,0 +1,12 @@
+type Props = {
+    /**
+     * 0-1
+     * */
+    value: number;
+    on: {
+        seek: (e: number) => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

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

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

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

package/dist/ui/shadow-dom/_normalize.scss

@@ -0,0 +1,350 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type='checkbox'],
+[type='radio'] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}