@streamscloud/embeddable 1.1.2

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

@@ -0,0 +1,400 @@
+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: 'components' },
+                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'StreamComponentPayloadFragment' } }] }
+                    },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'slots' },
+                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'StreamComponentSlotFragment' } }] }
+                    }
+                ]
+            }
+        },
+        {
+            kind: 'FragmentDefinition',
+            name: { kind: 'Name', value: 'ProductCardPayloadFragment' },
+            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Product' } },
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'media' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'url' },
+                                    arguments: [
+                                        { kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } } }
+                                    ]
+                                },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'thumbnailUrl' },
+                                    arguments: [
+                                        { kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } } }
+                                    ]
+                                },
+                                { kind: 'Field', name: { kind: 'Name', value: 'type' } }
+                            ]
+                        }
+                    },
+                    { kind: 'Field', name: { kind: 'Name', value: 'title' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'link' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'priceAndAvailability' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'currency' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'price' } },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'productSalePrices' },
+                                    selectionSet: {
+                                        kind: 'SelectionSet',
+                                        selections: [
+                                            { kind: 'Field', name: { kind: 'Name', value: 'salePrice' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'salePriceEffectiveDateFrom' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'salePriceEffectiveDateTo' } }
+                                        ]
+                                    }
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        },
+        {
+            kind: 'FragmentDefinition',
+            name: { kind: 'Name', value: 'AdViewPayloadFragment' },
+            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Ad' } },
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'title' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'description' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'buttonText' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'buttonUrl' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'openLinkInNewWindow' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'type' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'media' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'type' } },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'url' },
+                                    arguments: [
+                                        { kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } } }
+                                    ]
+                                },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'thumbnailUrl' },
+                                    arguments: [
+                                        { kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } } }
+                                    ]
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        },
+        {
+            kind: 'FragmentDefinition',
+            name: { kind: 'Name', value: 'ShortVideoViewerPayloadFragment' },
+            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Post' } },
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'enableSocialInteractions' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'postHeading' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'sourceImage' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'sourceName' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'postDisplayDate' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'postViewsCount' } }
+                            ]
+                        }
+                    },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'allProducts' },
+                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'ProductCardPayloadFragment' } }] }
+                    },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'ad' },
+                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'AdViewPayloadFragment' } }] }
+                    },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'postData' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'media' },
+                                    selectionSet: {
+                                        kind: 'SelectionSet',
+                                        selections: [
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'url' },
+                                                arguments: [
+                                                    {
+                                                        kind: 'Argument',
+                                                        name: { kind: 'Name', value: 'scale' },
+                                                        value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } }
+                                                    }
+                                                ]
+                                            },
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'thumbnailUrl' },
+                                                arguments: [
+                                                    {
+                                                        kind: 'Argument',
+                                                        name: { kind: 'Name', value: 'scale' },
+                                                        value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } }
+                                                    }
+                                                ]
+                                            },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'type' } }
+                                        ]
+                                    }
+                                },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'shortVideoData' },
+                                    selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'text' } }] }
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        },
+        {
+            kind: 'FragmentDefinition',
+            name: { kind: 'Name', value: 'ShortVideoStreamComponentDataFragment' },
+            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Post' } },
+            selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'ShortVideoViewerPayloadFragment' } }] }
+        },
+        {
+            kind: 'FragmentDefinition',
+            name: { kind: 'Name', value: 'ShortVideoStreamComponentParamsFragment' },
+            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'ShortVideoStreamComponentParams' } },
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'data' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'ShortVideoStreamComponentDataFragment' } }]
+                        }
+                    }
+                ]
+            }
+        },
+        {
+            kind: 'FragmentDefinition',
+            name: { kind: 'Name', value: 'ImagesStreamComponentParamsFragment' },
+            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'ImagesStreamComponentParams' } },
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'images' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'url' } }
+                            ]
+                        }
+                    },
+                    { kind: 'Field', name: { kind: 'Name', value: 'mode' } }
+                ]
+            }
+        },
+        {
+            kind: 'FragmentDefinition',
+            name: { kind: 'Name', value: 'ProductStreamComponentDataFragment' },
+            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Product' } },
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'media' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'url' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'thumbnailUrl' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'type' } }
+                            ]
+                        }
+                    },
+                    { kind: 'Field', name: { kind: 'Name', value: 'title' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'link' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'priceAndAvailability' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'currency' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'price' } },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'productSalePrices' },
+                                    selectionSet: {
+                                        kind: 'SelectionSet',
+                                        selections: [
+                                            { kind: 'Field', name: { kind: 'Name', value: 'salePrice' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'salePriceEffectiveDateFrom' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'salePriceEffectiveDateTo' } }
+                                        ]
+                                    }
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        },
+        {
+            kind: 'FragmentDefinition',
+            name: { kind: 'Name', value: 'ProductStreamComponentParamsFragment' },
+            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'ProductStreamComponentParams' } },
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'data' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'ProductStreamComponentDataFragment' } }]
+                        }
+                    }
+                ]
+            }
+        },
+        {
+            kind: 'FragmentDefinition',
+            name: { kind: 'Name', value: 'StreamComponentPayloadFragment' },
+            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'StreamComponent' } },
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    { kind: 'Field', name: { kind: 'Name', value: 'slotId' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'type' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'params' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'shortVideo' },
+                                    selectionSet: {
+                                        kind: 'SelectionSet',
+                                        selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'ShortVideoStreamComponentParamsFragment' } }]
+                                    }
+                                },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'images' },
+                                    selectionSet: {
+                                        kind: 'SelectionSet',
+                                        selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'ImagesStreamComponentParamsFragment' } }]
+                                    }
+                                },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'product' },
+                                    selectionSet: {
+                                        kind: 'SelectionSet',
+                                        selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'ProductStreamComponentParamsFragment' } }]
+                                    }
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        },
+        {
+            kind: 'FragmentDefinition',
+            name: { kind: 'Name', value: 'StreamComponentSlotFragment' },
+            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'StreamComponentSlot' } },
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'allowedComponents' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'top' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'left' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'width' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'height' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'styles' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'paddingTop' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'paddingRight' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'paddingBottom' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'paddingLeft' } }
+                            ]
+                        }
+                    }
+                ]
+            }
+        }
+    ]
+};

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

@@ -0,0 +1,13 @@
+fragment StreamPageViewerPayloadFragment on StreamPage {
+  id
+  cover {
+    url
+  }
+  name
+  components {
+    ...StreamComponentPayloadFragment
+  }
+  slots {
+    ...StreamComponentSlotFragment
+  }
+}

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

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

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

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

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

@@ -0,0 +1,18 @@
+import type { ShortVideoStreamComponentData, StreamComponentModel } from '../components';
+import type { StreamComponentSlotModel } from '../slots';
+export type StreamPageViewerModel = GeneralStreamPageViewerModel | ShortVideoStreamPageViewerModel;
+export type ShortVideoStreamPageViewerModel = {
+    type: 'short-video';
+    id: string;
+    cover: string | null;
+    name: string | null;
+    shortVideo: ShortVideoStreamComponentData;
+};
+export type GeneralStreamPageViewerModel = {
+    type: 'general';
+    id: string;
+    cover: string | null;
+    name: string | null;
+    components: StreamComponentModel[];
+    slots: StreamComponentSlotModel[];
+};

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

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

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

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

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

@@ -0,0 +1,141 @@
+<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 { PlayerSlider } from '../../ui/player';
+import { ShortVideosViewer } from '../../short-videos/short-video-viewer';
+import { StreamPageViewer } from '../stream-page-viewer';
+import { Loading } from '../../ui/loading';
+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;
+    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;
+        }
+        // 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'}
+                <ShortVideosViewer model={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>