@streamscloud/embeddable 2.1.0 → 2.1.1

package/dist/streams/stream-player/stream-overview.svelte

@@ -1,239 +0,0 @@
-<script lang="ts">import { slideHorizontally } from '../../core/transitions';
-import { Icon } from '../../ui/icon';
-import { Image, ImageRound } from '../../ui/image';
-import { InfiniteScrolling } from '../../ui/infinite-scrolling';
-import { LineClamp } from '../../ui/line-clamp';
-import { ProportionalContainer } from '../../ui/proportional-container';
-import { TimeAgo } from '../../ui/time-ago';
-import { default as ActionButton } from './action-button.svelte';
-import { StreamPlayerLocalization } from './stream-player-localization.svelte';
-import IconPanelLeftText from '@fluentui/svg-icons/icons/panel_left_text_20_regular.svg';
-let { model, buffer, activePageId, on, uiManager, localization } = $props();
-</script>
-
-{#if !uiManager.overviewCollapsed}
-  <div class="stream-overview" transition:slideHorizontally|local>
-    <div class="stream-overview-info">
-      <div class="stream-overview-owner">
-        <div class="stream-overview-owner__image">
-          <ImageRound src={model.header.image} />
-        </div>
-        <div class="stream-overview-owner__body">
-          <div class="stream-overview-owner__name">
-            <LineClamp maxLines={1}>
-              {model.header.name}
-            </LineClamp>
-          </div>
-          <div class="stream-overview-owner__meta">
-            <LineClamp maxLines={1}>
-              <TimeAgo date={model.publishedAt || model.createdAt} />
-            </LineClamp>
-          </div>
-        </div>
-      </div>
-      <div class="stream-overview-info__title">
-        <LineClamp maxLines={2}>
-          {model.title}
-        </LineClamp>
-      </div>
-      {#if model.subTitle}
-        <div class="stream-overview-info__subtitle">
-          <LineClamp maxLines={3}>
-            {model.subTitle}
-          </LineClamp>
-        </div>
-      {/if}
-      <div class="stream-overview-info__pages">
-        {localization.pagesCount(model.pagesCount)}
-      </div>
-    </div>
-    <div class="stream-overview-pages">
-      <InfiniteScrolling loadMore={buffer.loadMore}>
-        <div class="stream-overview-pages__grid">
-          {#each buffer.loaded as item, index (item.id)}
-            <button
-              type="button"
-              class="stream-overview-pages__page"
-              class:stream-overview-pages__page--active={activePageId === item.id}
-              onclick={() => on.setCurrentItem(index)}>
-              <ProportionalContainer ratio={9 / 16}>
-                <Image src={item.cover} />
-              </ProportionalContainer>
-            </button>
-          {/each}
-        </div>
-      </InfiniteScrolling>
-    </div>
-  </div>
-{/if}
-
-<div class="toggle-collapsed-button">
-  <ActionButton on={{ click: () => (uiManager.overviewCollapsed = !uiManager.overviewCollapsed) }}>
-    <Icon src={IconPanelLeftText} />
-  </ActionButton>
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.stream-overview {
-  background: #1c1c1c;
-  height: 100%;
-  min-height: 100%;
-  max-height: 100%;
-  width: 13.75rem;
-  min-width: 13.75rem;
-  max-width: 13.75rem;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  padding-bottom: 0.9375rem;
-  overflow: hidden;
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  z-index: 1;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .stream-overview {
-    width: 100%;
-    min-width: 100%;
-    max-width: 100%;
-  }
-}
-
-.toggle-collapsed-button {
-  position: absolute;
-  bottom: var(--stream-player--controls--offset-vertical);
-  left: var(--stream-player--controls--offset-horizontal);
-  z-index: 1;
-}
-
-.stream-overview-info {
-  padding: 1rem;
-}
-.stream-overview-info__title {
-  font-size: 1.125rem;
-  line-height: 1.2;
-  font-weight: 900;
-  color: #ffffff;
-}
-.stream-overview-info__subtitle {
-  font-size: 0.9375rem;
-  line-height: 1.6;
-  font-weight: 500;
-  letter-spacing: 0.75px;
-  color: #ffffff;
-}
-.stream-overview-info__pages {
-  font-size: 0.625rem;
-  line-height: 1;
-  font-weight: 500;
-  color: #999999;
-}
-
-.stream-overview-pages {
-  display: flex;
-  flex: 1;
-  justify-content: center;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  scrollbar-color: transparent transparent;
-  scrollbar-width: thin;
-  --custom-scrollbar-background: transparent;
-  padding: 0.9375rem 0.9375rem 0;
-}
-.stream-overview-pages::-webkit-scrollbar {
-  width: 3px;
-  height: 3px;
-  background: var(--custom-scrollbar-background, transparent);
-  visibility: hidden;
-}
-.stream-overview-pages::-webkit-scrollbar-thumb {
-  background: transparent;
-}
-.stream-overview-pages:hover {
-  scrollbar-color: var(--custom-scrollbar-color, #7d7d7d) var(--custom-scrollbar-background, transparent);
-  scrollbar-width: thin;
-}
-.stream-overview-pages:hover::-webkit-scrollbar {
-  width: 3px;
-  height: 3px;
-  background: var(--custom-scrollbar-background, transparent);
-  visibility: hidden;
-}
-.stream-overview-pages:hover::-webkit-scrollbar-thumb {
-  background: var(--custom-scrollbar-color, #7d7d7d);
-}
-.stream-overview-pages__grid {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2.5rem;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .stream-overview-pages__grid {
-    display: grid;
-    width: 100%;
-    grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
-    gap: 1.25rem;
-  }
-}
-.stream-overview-pages__page {
-  width: 6.25rem;
-  border-radius: 0.125rem;
-  overflow: hidden;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .stream-overview-pages__page {
-    width: auto;
-  }
-}
-.stream-overview-pages__page--active {
-  outline: 2px solid #5a8dec;
-}
-
-.stream-overview-owner {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-.stream-overview-owner__image {
-  width: 2rem;
-  min-width: 2rem;
-  max-width: 2rem;
-  height: 2rem;
-  min-height: 2rem;
-  max-height: 2rem;
-  --image--rounded--inner--border-color: #111827;
-  --image--rounded--outer--border-color: #f3f4f6;
-  --image--rounded--outer--border-width: 0.0625rem;
-}
-.stream-overview-owner__body {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  color: #ffffff;
-}
-.stream-overview-owner__name {
-  font-size: 0.75rem;
-  line-height: 1.2;
-  font-weight: 500;
-}
-.stream-overview-owner__meta {
-  font-size: 0.625rem;
-  line-height: 1.2;
-  font-weight: 500;
-}</style>

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

@@ -1,17 +0,0 @@
-import type { StreamPlayerBuffer } from './stream-player-buffer.svelte';
-import { StreamPlayerLocalization } from './stream-player-localization.svelte';
-import type { StreamPlayerModel } from './types';
-import type { StreamPlayerUiManager } from './ui-manager.svelte';
-type Props = {
-    model: StreamPlayerModel;
-    activePageId: string;
-    buffer: StreamPlayerBuffer;
-    uiManager: StreamPlayerUiManager;
-    localization: StreamPlayerLocalization;
-    on: {
-        setCurrentItem: (index: number) => void;
-    };
-};
-declare const StreamOverview: import("svelte").Component<Props, {}, "">;
-type StreamOverview = ReturnType<typeof StreamOverview>;
-export default StreamOverview;

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

@@ -1,25 +0,0 @@
-import { type StreamPageViewerModel } from '../stream-page-viewer';
-import type { IPlayerBuffer } from '../../ui/player';
-import type { Client } from '@urql/core';
-export declare class StreamPlayerBuffer implements IPlayerBuffer<StreamPageViewerModel> {
-    readonly loaded: StreamPageViewerModel[];
-    readonly currentIndex: number;
-    readonly current: StreamPageViewerModel | null;
-    readonly canLoadNext: boolean;
-    readonly canLoadPrevious: boolean;
-    readonly navigationDisabled: boolean;
-    readonly animationDuration = 1200;
-    private _pagesLoader;
-    private _currentIndex;
-    private _loaded;
-    constructor(data: {
-        streamId: string;
-        graphql: Client;
-    });
-    loadMore: () => Promise<StreamPageViewerModel[]>;
-    loadNext: () => Promise<void>;
-    loadPrevious: () => Promise<void>;
-    setIndex: (index: number) => void;
-    reset: () => void;
-    private warmUpBuffer;
-}

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

@@ -1,84 +0,0 @@
-import { ContinuationToken } from '../../core/continuation-token';
-import { CursorDataLoader } from '../../core/data-loaders';
-import { ImageScale } from '../../core/enums';
-import { Utils } from '../../core/utils';
-import {} from '../stream-page-viewer';
-import { mapToStreamPageViewerModel } from '../stream-page-viewer/mapper';
-import { GetStreamPagesDocument } from './operations.generated';
-export class StreamPlayerBuffer {
-    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;
-    _pagesLoader;
-    _currentIndex = $state(-1);
-    _loaded = $state.raw([]);
-    constructor(data) {
-        const { streamId, graphql } = data;
-        this._pagesLoader = new CursorDataLoader({
-            loadPage: async (continuationToken) => {
-                const payload = await graphql
-                    .query(GetStreamPagesDocument, {
-                    input: {
-                        limit: 10,
-                        continuationToken,
-                        filter: {
-                            streamId
-                        }
-                    },
-                    image_scale: ImageScale.OriginalEncoded
-                })
-                    .toPromise();
-                const data = payload.data?.streamPages;
-                if (!data) {
-                    return null;
-                }
-                const items = data.items.map(mapToStreamPageViewerModel);
-                this._loaded = [...this._loaded, ...items];
-                return {
-                    items: items,
-                    continuationToken: ContinuationToken.fromPayload(data.continuationToken)
-                };
-            }
-        });
-        this.warmUpBuffer();
-        this.loadNext = Utils.throttle(this.loadNext, this.animationDuration);
-        this.loadPrevious = Utils.throttle(this.loadPrevious, this.animationDuration);
-    }
-    loadMore = () => this._pagesLoader.loadMore();
-    loadNext = async () => {
-        if (!this.canLoadNext) {
-            return;
-        }
-        ++this._currentIndex;
-        this.warmUpBuffer();
-    };
-    loadPrevious = async () => {
-        if (!this.canLoadPrevious) {
-            return;
-        }
-        --this._currentIndex;
-    };
-    setIndex = (index) => {
-        this._currentIndex = index;
-        this.warmUpBuffer();
-    };
-    reset = () => {
-        this._pagesLoader.reset();
-    };
-    warmUpBuffer = async () => {
-        const bufferSize = 5;
-        if (this.loaded.length >= this.currentIndex + bufferSize) {
-            return;
-        }
-        await this._pagesLoader.loadMore();
-        if (this._currentIndex < 0) {
-            if (this.loaded.length > 0) {
-                this._currentIndex = 0;
-            }
-        }
-    };
-}

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/streams/stream-player/types.d.ts

@@ -1,12 +0,0 @@
-export type StreamPlayerModel = {
-    id: string;
-    title: string;
-    subTitle: string | null;
-    createdAt: string;
-    publishedAt: string | null;
-    header: {
-        image: string | null;
-        name: string;
-    };
-    pagesCount: number;
-};

package/dist/streams/stream-player/types.js

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

package/dist/streams/stream-player/ui-manager.svelte.d.ts

@@ -1,17 +0,0 @@
-export declare class StreamPlayerUiManager {
-    overviewCollapsed: boolean;
-    shortVideoDetailsCollapsed: boolean;
-    globalCssVariables: string;
-    isMobileView: boolean;
-    showShortVideoOverlay: boolean;
-    private readonly actionButtonSize;
-    private readonly navigationButtonSize;
-    private readonly controlsOffsetHorizontal;
-    private readonly controlsOffsetVertical;
-    private viewTotalWidth;
-    private mainViewColumnWidth;
-    updateDimensions: (dimensions: {
-        viewTotalWidth: number;
-        mainViewColumnWidth: number;
-    }) => void;
-}

package/dist/streams/stream-player/ui-manager.svelte.js

@@ -1,26 +0,0 @@
-export class StreamPlayerUiManager {
-    overviewCollapsed = $state(false);
-    shortVideoDetailsCollapsed = $state(true);
-    globalCssVariables = $derived.by(() => {
-        const values = [
-            `--stream-player--action-button--size: ${this.actionButtonSize}px`,
-            `--stream-player--navigation-button--size: ${this.navigationButtonSize}px`,
-            `--stream-player--controls--offset-horizontal: ${this.controlsOffsetHorizontal}px`,
-            `--stream-player--controls--offset-vertical: ${this.controlsOffsetVertical}px`,
-            `--stream-player--sidebar--available-space: ${(this.viewTotalWidth - this.mainViewColumnWidth) / 2}px`
-        ];
-        return values.join(';');
-    });
-    isMobileView = $derived.by(() => this.viewTotalWidth <= 576);
-    showShortVideoOverlay = $derived.by(() => (this.viewTotalWidth - this.mainViewColumnWidth) / 2 <= 70);
-    actionButtonSize = 30;
-    navigationButtonSize = 40;
-    controlsOffsetHorizontal = 15;
-    controlsOffsetVertical = 10;
-    viewTotalWidth = $state(0);
-    mainViewColumnWidth = $state(0);
-    updateDimensions = (dimensions) => {
-        this.viewTotalWidth = dimensions.viewTotalWidth;
-        this.mainViewColumnWidth = dimensions.mainViewColumnWidth;
-    };
-}

package/dist/ui/button/cmp.button.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">import ButtonBase from './resources/button-base.svelte';
-import ButtonTheme from './resources/button-theme.svelte';
-let { type = 'button', disabled = false, autofocus = false, style = null, size = null, on, children } = $props();
-</script>
-
-<ButtonTheme style={style} size={size}>
-  <ButtonBase disabled={disabled} type={type} autofocus={autofocus} on={on}>
-    {@render children()}
-  </ButtonBase>
-</ButtonTheme>

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

@@ -1,16 +0,0 @@
-import type { ButtonStyle, ButtonSize } from './resources/button-types';
-import type { Snippet } from 'svelte';
-type Props = {
-    type?: 'button' | 'submit' | 'reset';
-    disabled?: boolean;
-    autofocus?: boolean;
-    style?: ButtonStyle | null;
-    size?: ButtonSize | null;
-    on?: {
-        click: (e: MouseEvent) => void;
-    };
-    children: Snippet;
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

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

@@ -1,2 +0,0 @@
-export { default as Button } from './cmp.button.svelte';
-export { ButtonStyle, ButtonSize } from './resources/button-types';

package/dist/ui/button/index.js

@@ -1,2 +0,0 @@
-export { default as Button } from './cmp.button.svelte';
-export { ButtonStyle, ButtonSize } from './resources/button-types';

package/dist/ui/button/resources/button-base.svelte

@@ -1,84 +0,0 @@
-<script lang="ts">import { onMount } from 'svelte';
-let { type = 'button', disabled = false, autofocus = false, on, children } = $props();
-let buttonRef;
-onMount(() => {
-    if (autofocus) {
-        buttonRef.focus();
-    }
-});
-</script>
-
-<button class="button" disabled={disabled} type={type} bind:this={buttonRef} onclick={(e) => on?.click?.(e)}>
-  <span class="button__text">
-    {@render children()}
-  </span>
-</button>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.button {
-  --_button--font--size: var(--button--font--size, 1rem);
-  --_button--font--color: var(--button--font--color, black);
-  --_button--font-weight: var(--button--font-weight, 400);
-  --_button--text--font-size: var(--button--text--font-size, 0.75em);
-  --_button--icon--font-size: var(--button--icon--font-size, 1em);
-  --_button--justify-content: var(--button--justify-content, center);
-  --_button--background: var(--button--background, white);
-  --_button--background--hover: var(--button--background--hover, var(--_button--background));
-  --_button--background--active: var(--button--background--active, var(--_button--background));
-  --_button--background--disabled: var(--button--background--disabled, var(--_button--background));
-  --_button--border: var(--button--border, none);
-  --_button--border-radius: var(--button--border-radius, 0.25em);
-  --_button--padding--vertical: var(--button--padding--vertical, 0);
-  --_button--padding--horizontal: var(--button--padding--horizontal, 1em);
-  --_button--min-width: var(--button--min-width, 0);
-  --_button--height: var(--button--height, 2em);
-  --_button--box-shadow: var(--button--box-shadow, none);
-  font-size: var(--_button--font--size);
-  font-weight: var(--_button--font-weight);
-  padding: var(--_button--padding--vertical) var(--_button--padding--horizontal);
-  color: var(--_button--font--color);
-  background: var(--_button--background);
-  box-shadow: var(--_button--box-shadow);
-  border: var(--_button--border);
-  border-radius: var(--_button--border-radius);
-  min-width: var(--_button--min-width);
-  max-width: 100%;
-  height: var(--_button--height);
-  outline: none;
-  display: inline-flex;
-  flex: 1;
-  justify-content: var(--_button--justify-content);
-  align-items: center;
-  vertical-align: middle;
-  transition: background-color linear 0.2s, color linear 0.2s, border-color linear 0.2s, filter linear 0.2s;
-  white-space: nowrap;
-}
-.button__text {
-  width: 100%;
-  text-align: center;
-  font-size: var(--_button--text--font-size);
-  --icon-text--global--font-size: 1rem;
-  --icon-text--text--font-size: var(--_button--text--font-size);
-  --icon-text--icon--font-size: var(--_button--icon--font-size);
-  --icon-text--justify-content: var(--_button--justify-content);
-}
-.button:not(:disabled):hover {
-  background: var(--_button--background--hover);
-}
-.button:not(:disabled):active {
-  background: var(--_button--background--active);
-}
-.button:disabled {
-  cursor: default;
-  background: var(--_button--background--disabled);
-}</style>

package/dist/ui/button/resources/button-base.svelte.d.ts

@@ -1,13 +0,0 @@
-import { type Snippet } from 'svelte';
-type Props = {
-    type?: 'button' | 'submit' | 'reset';
-    disabled?: boolean;
-    autofocus?: boolean;
-    on?: {
-        click?: (e: MouseEvent) => void;
-    };
-    children: Snippet;
-};
-declare const ButtonBase: import("svelte").Component<Props, {}, "">;
-type ButtonBase = ReturnType<typeof ButtonBase>;
-export default ButtonBase;