@streamscloud/embeddable 1.1.2

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

@@ -0,0 +1,239 @@
+<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, #b0b0b0) var(--custom-scrollbar-background, #f1f1f1);
+  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, #b0b0b0);
+}
+.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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,25 @@
+import type { IPlayerBuffer } from '../../ui/player';
+import { type StreamPageViewerModel } from '../stream-page-viewer';
+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

@@ -0,0 +1,84 @@
+import { ContinuationToken } from '../../core/continuation-token';
+import { CursorDataLoader } from '../../core/data-loaders';
+import { ImageScale } from '../../core/media';
+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

@@ -0,0 +1,18 @@
+import type { ITimeAgoLocalization } from '../../ui/time-ago';
+export interface IStreamPlayerLocalization {
+    productsSection?: string;
+    offersSection?: string;
+    streamNotFound?: string;
+    viewsCount?: (count: number) => string;
+    pagesCount?: (count: number) => string;
+    timeAgoLocalization?: ITimeAgoLocalization;
+}
+export declare class StreamPlayerLocalization {
+    streamNotFound: string;
+    productsSection: string;
+    offersSection: string;
+    viewsCount: (count: number) => string;
+    pagesCount: (count: number) => string;
+    timeAgoLocalization: ITimeAgoLocalization | undefined;
+    constructor(init?: IStreamPlayerLocalization);
+}

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

@@ -0,0 +1,29 @@
+export class StreamPlayerLocalization {
+    streamNotFound = $state('Stream not found');
+    productsSection = $state('Products');
+    offersSection = $state('Offers');
+    viewsCount = $state((count) => (count === 1 ? '1 view' : `${count} views`));
+    pagesCount = $state((count) => (count === 1 ? '1 page' : `${count} pages`));
+    timeAgoLocalization = $state(undefined);
+    constructor(init) {
+        if (!init) {
+            return;
+        }
+        if (init.streamNotFound !== undefined) {
+            this.streamNotFound = init.streamNotFound;
+        }
+        if (init.productsSection !== undefined) {
+            this.productsSection = init.productsSection;
+        }
+        if (init.offersSection !== undefined) {
+            this.offersSection = init.offersSection;
+        }
+        if (init.viewsCount !== undefined) {
+            this.viewsCount = init.viewsCount;
+        }
+        if (init.pagesCount !== undefined) {
+            this.pagesCount = init.pagesCount;
+        }
+        this.timeAgoLocalization = init.timeAgoLocalization;
+    }
+}

package/dist/streams/stream-player/types.d.ts

@@ -0,0 +1,12 @@
+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

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

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

@@ -0,0 +1,17 @@
+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

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