@streamscloud/embeddable 2.0.4 → 2.1.1

package/dist/streams/layout/styles.d.ts

@@ -1,43 +0,0 @@
-import type { StreamCssValue } from './css-values';
-import { StreamElementStyleDirection, StreamElementStyleFontFamily, StreamElementStyleFontWeight, StreamElementStyleMediaFit, StreamElementStyleHorizontalAlign } from './enums';
-export type StreamLayoutStyles = {
-    backgroundColor?: string | null;
-    fontFamily?: StreamElementStyleFontFamily | null;
-};
-export type ImageStreamElementStyles = {
-    mediaFit?: StreamElementStyleMediaFit | null;
-};
-export type PriceStreamElementStyles = {
-    height?: number | null;
-    fontWeight?: StreamElementStyleFontWeight | null;
-    fontFamily?: StreamElementStyleFontFamily | null;
-    regularPriceColor?: string | null;
-    salePriceColor?: string | null;
-    saveValueColor?: string | null;
-    saveValueBackgroundColor?: string | null;
-    beforeValueColor?: string | null;
-    horizontalAlign?: StreamElementStyleHorizontalAlign | null;
-};
-export type TextStreamElementStyles = {
-    fontSize?: number | null;
-    fontWeight?: StreamElementStyleFontWeight | null;
-    fontFamily?: StreamElementStyleFontFamily | null;
-    lineHeight?: number | null;
-    textAlign?: StreamElementStyleHorizontalAlign | null;
-    color?: string | null;
-    maxLines?: number | null;
-};
-export type ContainerStreamElementStyles = {
-    width?: StreamCssValue | null;
-    height?: StreamCssValue | null;
-    aspectRatio?: number | null;
-    direction?: StreamElementStyleDirection | null;
-    gap?: number | null;
-    paddingTop?: number | null;
-    paddingRight?: number | null;
-    paddingBottom?: number | null;
-    paddingLeft?: number | null;
-    backgroundColor?: string | null;
-    borderRadius?: number | null;
-    borderColor?: string | null;
-};

package/dist/streams/layout/styles.js

@@ -1 +0,0 @@
-import { StreamElementStyleDirection, StreamElementStyleFontFamily, StreamElementStyleFontWeight, StreamElementStyleMediaFit, StreamElementStyleHorizontalAlign } from './enums';

package/dist/streams/layout/type-guards.d.ts

@@ -1,8 +0,0 @@
-import type { ImagesStreamSlotData, ProductStreamSlotData, ShortVideoStreamSlotData, StreamSlotData } from './slot-data';
-import type { ImagesStreamSlotDataInput, ProductStreamSlotDataInput, ShortVideoStreamSlotDataInput, StreamSlotDataInput } from './slot-data-input';
-export declare function isImagesSlotDataInput(data: StreamSlotDataInput | null): data is ImagesStreamSlotDataInput;
-export declare function isProductSlotDataInput(data: StreamSlotDataInput | null): data is ProductStreamSlotDataInput;
-export declare function isShortVideoSlotDataInput(data: StreamSlotDataInput | null): data is ShortVideoStreamSlotDataInput;
-export declare function isImagesSlotData(data: StreamSlotData | null): data is ImagesStreamSlotData;
-export declare function isProductSlotData(data: StreamSlotData | null): data is ProductStreamSlotData;
-export declare function isShortVideoSlotData(data: StreamSlotData | null): data is ShortVideoStreamSlotData;

package/dist/streams/layout/type-guards.js

@@ -1,21 +0,0 @@
-import { StreamComponentDataType } from './enums';
-// SlotDataInput guards
-export function isImagesSlotDataInput(data) {
-    return data?.type === StreamComponentDataType.Images;
-}
-export function isProductSlotDataInput(data) {
-    return data?.type === StreamComponentDataType.Product;
-}
-export function isShortVideoSlotDataInput(data) {
-    return data?.type === StreamComponentDataType.ShortVideo;
-}
-// SlotData guards
-export function isImagesSlotData(data) {
-    return data?.type === StreamComponentDataType.Images;
-}
-export function isProductSlotData(data) {
-    return data?.type === StreamComponentDataType.Product;
-}
-export function isShortVideoSlotData(data) {
-    return data?.type === StreamComponentDataType.ShortVideo;
-}

package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">import { StreamLayoutSlot, StreamPageLayout, StreamLayoutSlotContent } from '../layout';
-let { page } = $props();
-</script>
-
-{#if page.type === 'general'}
-  <StreamPageLayout model={page.layout}>
-    {#each page.layout.slots as slot (slot)}
-      <StreamLayoutSlot model={slot}>
-        <StreamLayoutSlotContent model={slot} />
-      </StreamLayoutSlot>
-    {/each}
-  </StreamPageLayout>
-{/if}

package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { StreamPageViewerModel } from './types';
-type Props = {
-    page: StreamPageViewerModel;
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

package/dist/streams/stream-page-viewer/index.d.ts

@@ -1,2 +0,0 @@
-export { default as StreamPageViewer } from './cmp.stream-page-viewer.svelte';
-export type { StreamPageViewerModel } from './types';

package/dist/streams/stream-page-viewer/index.js

@@ -1 +0,0 @@
-export { default as StreamPageViewer } from './cmp.stream-page-viewer.svelte';

package/dist/streams/stream-page-viewer/mapper.d.ts

@@ -1,3 +0,0 @@
-import type { StreamPageViewerPayloadFragment } from './operations.generated';
-import type { StreamPageViewerModel } from './types';
-export declare const mapToStreamPageViewerModel: (payload: StreamPageViewerPayloadFragment) => StreamPageViewerModel;

package/dist/streams/stream-page-viewer/mapper.js

@@ -1,22 +0,0 @@
-import { getSingleShortVideoFromLayout, parseToStreamLayout } from '../layout';
-export const mapToStreamPageViewerModel = (payload) => {
-    const layout = parseToStreamLayout(payload.layout);
-    const singleShortVideo = getSingleShortVideoFromLayout(layout);
-    if (singleShortVideo) {
-        return {
-            type: 'short-video',
-            id: payload.id,
-            cover: payload.cover?.url || null,
-            name: payload.name,
-            shortVideo: singleShortVideo,
-            layout
-        };
-    }
-    return {
-        type: 'general',
-        id: payload.id,
-        cover: payload.cover?.url || null,
-        name: payload.name,
-        layout
-    };
-};

package/dist/streams/stream-page-viewer/operations.generated.d.ts

@@ -1,10 +0,0 @@
-import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
-export type StreamPageViewerPayloadFragment = {
-    id: string;
-    name: string | null;
-    layout: string;
-    cover: {
-        url: string;
-    } | null;
-};
-export declare const StreamPageViewerPayloadFragmentDoc: DocumentNode<StreamPageViewerPayloadFragment, unknown>;

package/dist/streams/stream-page-viewer/operations.generated.js

@@ -1,27 +0,0 @@
-export const StreamPageViewerPayloadFragmentDoc = {
-    kind: 'Document',
-    definitions: [
-        {
-            kind: 'FragmentDefinition',
-            name: { kind: 'Name', value: 'StreamPageViewerPayloadFragment' },
-            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'StreamPage' } },
-            selectionSet: {
-                kind: 'SelectionSet',
-                selections: [
-                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'cover' },
-                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'url' } }] }
-                    },
-                    { kind: 'Field', name: { kind: 'Name', value: 'name' } },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'layout' },
-                        arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } } }]
-                    }
-                ]
-            }
-        }
-    ]
-};

package/dist/streams/stream-page-viewer/operations.graphql

@@ -1,8 +0,0 @@
-fragment StreamPageViewerPayloadFragment on StreamPage {
-  id
-  cover {
-    url
-  }
-  name
-  layout(scale: $image_scale)
-}

package/dist/streams/stream-page-viewer/stream-page-viewer-localization.svelte.d.ts

@@ -1,13 +0,0 @@
-import type { IStreamElementLocalization } from '../layout/element-views';
-import type { ITimeAgoLocalization } from '../../ui/time-ago';
-export interface IStreamPageViewerLocalization {
-    viewsCount?: (count: number) => string;
-    timeAgoLocalization?: ITimeAgoLocalization;
-    elementsLocalization?: IStreamElementLocalization;
-}
-export declare class StreamPageViewerLocalization {
-    viewsCount: (count: number) => string;
-    timeAgoLocalization: ITimeAgoLocalization | undefined;
-    elementsLocalization: IStreamElementLocalization | undefined;
-    constructor(init?: IStreamPageViewerLocalization);
-}

package/dist/streams/stream-page-viewer/stream-page-viewer-localization.svelte.js

@@ -1,10 +0,0 @@
-export class StreamPageViewerLocalization {
-    viewsCount = $state((count) => (count === 1 ? '1 view' : `${count} views`));
-    timeAgoLocalization = $state(undefined);
-    elementsLocalization = $state(undefined);
-    constructor(init) {
-        this.viewsCount = init?.viewsCount ?? this.viewsCount;
-        this.timeAgoLocalization = init?.timeAgoLocalization ?? this.timeAgoLocalization;
-        this.elementsLocalization = init?.elementsLocalization ?? this.elementsLocalization;
-    }
-}

package/dist/streams/stream-page-viewer/types.d.ts

@@ -1,18 +0,0 @@
-import type { StreamLayout } from '../layout';
-import type { StreamLayoutShortVideoModel } from '../layout/models';
-export type StreamPageViewerModel = GeneralStreamPageViewerModel | ShortVideoStreamPageViewerModel;
-export type ShortVideoStreamPageViewerModel = {
-    type: 'short-video';
-    id: string;
-    cover: string | null;
-    name: string | null;
-    shortVideo: StreamLayoutShortVideoModel;
-    layout: StreamLayout;
-};
-export type GeneralStreamPageViewerModel = {
-    type: 'general';
-    id: string;
-    cover: string | null;
-    name: string | null;
-    layout: StreamLayout;
-};

package/dist/streams/stream-page-viewer/types.js

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

package/dist/streams/stream-player/action-button.svelte

@@ -1,38 +0,0 @@
-<script lang="ts">let { children, on } = $props();
-export {};
-</script>
-
-<button type="button" class="action-button" onclick={() => on.click()}>
-  {@render children()}
-</button>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.action-button {
-  --_stream-player--action-button--size: var(--stream-player--action-button--size);
-  --_action-button--background: var(--action-button-background, #1c1c1c);
-  width: var(--_stream-player--action-button--size);
-  min-width: var(--_stream-player--action-button--size);
-  max-width: var(--_stream-player--action-button--size);
-  height: var(--_stream-player--action-button--size);
-  min-height: var(--_stream-player--action-button--size);
-  max-height: var(--_stream-player--action-button--size);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  line-height: 0;
-  background: var(--_action-button--background);
-  border-radius: 50%;
-  --icon--size: 1.25rem;
-  z-index: 1;
-  color: #ffffff;
-}</style>

package/dist/streams/stream-player/action-button.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    on: {
-        click: () => void;
-    };
-    children: Snippet;
-};
-declare const ActionButton: import("svelte").Component<Props, {}, "">;
-type ActionButton = ReturnType<typeof ActionButton>;
-export default ActionButton;

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

@@ -1,149 +0,0 @@
-<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 { toastrWarning } from '../../core/toastr';
-import { ShortVideoViewer } from '../../short-videos/short-video-viewer';
-import { mapToShortVideoViewerModel } from '../layout/models';
-import { StreamPageViewer } from '../stream-page-viewer';
-import { Loading } from '../../ui/loading';
-import { PlayerSlider } from '../../ui/player';
-import { SpotlightLayout } from '../../ui/spotlight-layout';
-import { default as Controls } from './controls.svelte';
-import { mapStreamPlayerModel } from './mapper';
-import { GetStreamDocument } from './operations.generated';
-import { default as Overview } from './stream-overview.svelte';
-import { StreamPlayerBuffer } from './stream-player-buffer.svelte';
-import { StreamPlayerLocalization } from './stream-player-localization.svelte';
-import { StreamPlayerUiManager } from './ui-manager.svelte';
-import { onDestroy, onMount } from 'svelte';
-let { streamId, graphql, localization: localizationInit, on } = $props();
-const localization = $derived(new StreamPlayerLocalization(localizationInit));
-let model = $state(null);
-let buffer = $state.raw(null);
-let loading = $state(true);
-let activePageId = $derived.by(() => { var _a, _b; return (_b = (_a = buffer === null || buffer === void 0 ? void 0 : buffer.current) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : ''; });
-const uiManager = new StreamPlayerUiManager();
-onMount(() => __awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b, _c, _d;
-    uiManager.overviewCollapsed = window && window.innerWidth < window.innerHeight;
-    try {
-        const streamPayload = yield graphql.query(GetStreamDocument, { id: streamId }).toPromise();
-        if (!((_a = streamPayload.data) === null || _a === void 0 ? void 0 : _a.stream)) {
-            toastrWarning(localization.streamNotFound);
-            (_b = on === null || on === void 0 ? void 0 : on.closePlayer) === null || _b === void 0 ? void 0 : _b.call(on);
-            return;
-        }
-        (_c = on === null || on === void 0 ? void 0 : on.streamActivated) === null || _c === void 0 ? void 0 : _c.call(on, {
-            title: streamPayload.data.stream.title,
-            image: ((_d = streamPayload.data.stream.cover) === null || _d === void 0 ? void 0 : _d.url) || null
-        });
-        // start tracking the stream
-        model = mapStreamPlayerModel(streamPayload.data.stream);
-        buffer = new StreamPlayerBuffer({ graphql, streamId });
-    }
-    finally {
-        loading = false;
-    }
-}));
-onDestroy(() => {
-    // end tracking the stream
-});
-const handleChangePage = (index) => {
-    if (!buffer) {
-        return;
-    }
-    buffer.setIndex(index);
-    if (uiManager.isMobileView) {
-        uiManager.overviewCollapsed = true;
-    }
-};
-const handleDimensionsChanged = (dimensions) => {
-    uiManager.updateDimensions({
-        mainViewColumnWidth: dimensions.mainSceneWidth,
-        viewTotalWidth: dimensions.totalWidth
-    });
-};
-</script>
-
-<div class="stream-player-container">
-  {#if loading}
-    <Loading positionAbsoluteCenter={true} timeout={600} />
-  {/if}
-  <div class="stream-player" style={uiManager.globalCssVariables}>
-    {#if buffer && model}
-      <SpotlightLayout ratio={9 / 16} on={{ dimensionsChanged: handleDimensionsChanged }}>
-        <div class="stream-player__content">
-          <PlayerSlider buffer={buffer}>
-            {#snippet children({ item })}
-              {#if item.type === 'general'}
-                <StreamPageViewer page={item} />
-              {:else if item.type === 'short-video'}
-                <ShortVideoViewer
-                  model={mapToShortVideoViewerModel(item.shortVideo)}
-                  autoplay="on-appearance"
-                  showAttachments={uiManager.showShortVideoOverlay} />
-              {/if}
-            {/snippet}
-          </PlayerSlider>
-        </div>
-      </SpotlightLayout>
-      {#if model}
-        <Overview
-          model={model}
-          buffer={buffer}
-          activePageId={activePageId}
-          uiManager={uiManager}
-          localization={localization}
-          on={{ setCurrentItem: handleChangePage }} />
-      {/if}
-      <Controls buffer={buffer} uiManager={uiManager} localization={localization} on={{ closePlayer: () => on?.closePlayer?.() }} />
-    {/if}
-  </div>
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.stream-player-container {
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-  height: 100%;
-  min-height: 100%;
-  max-height: 100%;
-  container-type: inline-size;
-  display: flex;
-  position: relative;
-  background: #000000;
-}
-
-.stream-player {
-  display: flex;
-  flex: 1;
-  padding: 0.625rem 0;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .stream-player {
-    padding: 0;
-  }
-}
-.stream-player__content {
-  width: 100%;
-  height: 100%;
-  --short-video-viewer--actions-panel--bottom: 5rem;
-}</style>

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

@@ -1,17 +0,0 @@
-import { type IStreamPlayerLocalization } from './stream-player-localization.svelte';
-import type { Client } from '@urql/core';
-type Props = {
-    streamId: string;
-    localization?: IStreamPlayerLocalization;
-    graphql: Client;
-    on?: {
-        closePlayer?: () => void;
-        streamActivated?: (data: {
-            title: string;
-            image: string | null;
-        }) => void;
-    };
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;