@streamscloud/embeddable 14.0.0-rc.0 → 14.0.0

package/dist/ui/card-actions/types.d.ts

@@ -0,0 +1,9 @@
+import { IconColor } from '../icon';
+export type CardActionModel = {
+    icon: string;
+    title?: string;
+    iconColor?: IconColor;
+    callback?: () => void | Promise<void>;
+    disabled?: boolean;
+    propagateClickEvent?: boolean;
+};

package/dist/ui/card-actions/types.js

@@ -0,0 +1 @@
+import { IconColor } from '../icon';

package/dist/ui/icon/cmp.icon.svelte

@@ -73,7 +73,7 @@ let { src, color = null } = $props();
   stroke: var(--_icon--stroke-color, var(--_icon--color));
   stroke-width: var(--_icon--stroke-width);
 }
-:global([data-theme='dark']) .icon :global(path) {
+:global([data-theme="dark"]) .icon :global(path) {
   stroke: var(--_icon--stroke-color, var(--_icon--color));
   stroke-width: var(--_icon--stroke-width);
 }</style>

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

@@ -47,6 +47,7 @@ const styles = $derived.by(() => {
   color: var(--sc-mc-color--text-white);
   --icon--color: var(--sc-mc-color--icon-overlay);
   --icon--size: 1.75rem;
+  /* Set 'container-type: inline-size;' to reference container*/
 }
 .player-button:hover:not(:disabled) {
   background-color: var(--_player-button--color);
@@ -63,9 +64,6 @@ const styles = $derived.by(() => {
   transform: scale(var(--_player-button--icon-scale));
   transition: 0.3s;
 }
-.player-button {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
 @container (width < 576px) {
   .player-button {
     padding: 0.5rem;

package/dist/ui/player/button/cmp.player-buttons-group.svelte

@@ -47,6 +47,7 @@ const styles = $derived.by(() => {
   background: var(--_player-buttons-group--background-color);
   padding: 0.4375rem 0.0625rem;
   pointer-events: auto;
+  /* Set 'container-type: inline-size;' to reference container*/
 }
 .player-buttons-group__action {
   --_player-action--icon-scale: 1;
@@ -72,9 +73,6 @@ const styles = $derived.by(() => {
   transform: scale(var(--_player-action--icon-scale));
   transition: 0.3s;
 }
-.player-buttons-group {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
 @container (width < 576px) {
   .player-buttons-group {
     border-radius: 0.9375rem;

package/dist/ui/player/button/cmp.responsive-player-buttons-group.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">import { MobilePlayerButtonsGroup, PlayerButtonsGroup, PlayerButton } from './';
+let { scaleEffect = false, activeColor, backgroundColor, actions } = $props();
+</script>
+
+<div class="desktop-controls">
+  {#if actions.length > 0}
+    {#if actions.length === 1}
+      <PlayerButton
+        scaleEffect={scaleEffect}
+        activeColor={activeColor}
+        inactiveColor={backgroundColor}
+        icon={actions[0].icon}
+        on={{ click: actions[0].callback }} />
+    {:else}
+      <PlayerButtonsGroup scaleEffect={scaleEffect} activeColor={activeColor} backgroundColor={backgroundColor} actions={actions} />
+    {/if}
+  {/if}
+</div>
+
+<div class="mobile-controls">
+  <MobilePlayerButtonsGroup actions={actions} />
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.desktop-controls {
+  display: contents;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .desktop-controls {
+    display: none;
+  }
+}
+
+.mobile-controls {
+  display: none;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .mobile-controls {
+    display: contents;
+  }
+}</style>

package/dist/ui/player/button/cmp.responsive-player-buttons-group.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type PlayerButtonDef } from './';
+type Props = {
+    activeColor: string | null;
+    backgroundColor: string | null;
+    actions: PlayerButtonDef[];
+    scaleEffect?: boolean;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -1,4 +1,5 @@
 export { default as PlayerButton } from './cmp.player-button.svelte';
 export { default as PlayerButtonsGroup } from './cmp.player-buttons-group.svelte';
 export { default as MobilePlayerButtonsGroup } from './cmp.mobile-player-buttons-group.svelte';
+export { default as ResponsivePlayerButtonsGroup } from './cmp.responsive-player-buttons-group.svelte';
 export type { PlayerButtonDef } from './types';

package/dist/ui/player/button/index.js

@@ -1,3 +1,4 @@
 export { default as PlayerButton } from './cmp.player-button.svelte';
 export { default as PlayerButtonsGroup } from './cmp.player-buttons-group.svelte';
 export { default as MobilePlayerButtonsGroup } from './cmp.mobile-player-buttons-group.svelte';
+export { default as ResponsivePlayerButtonsGroup } from './cmp.responsive-player-buttons-group.svelte';

package/dist/{content-player → ui/player/content-player}/cmp.content-player.svelte

@@ -1,12 +1,11 @@
-<script lang="ts">import { handleEsc } from '../core/document.event-handlers';
-import { PostViewer } from '../posts/post-viewer';
-import { Loading } from '../ui/loading';
-import { PlayerSlider } from '../ui/player/slider';
-import { SwipeIndicator } from '../ui/swipe-indicator';
+<script lang="ts">import { handleEsc } from '../../../core/document.event-handlers';
+import { Loading } from '../../loading';
+import { PlayerSlider } from '../slider';
+import { SwipeIndicator } from '../../swipe-indicator';
 import { default as ControlsAndAttachments } from './controls-and-attachments.svelte';
 import { default as OverviewPanel } from './overview-panel.svelte';
 import {} from 'svelte';
-let { config, nonPostItemView, overviewPanelContent } = $props();
+let { config, itemActions, itemView, attachmentsView, overviewPanelContent } = $props();
 let everTouched = $state(false);
 let overviewPosition = $state({
     top: 0,
@@ -114,29 +113,8 @@ const handleSliderMounted = (node) => {
     <div class="content-player__slider" use:handleSliderMounted>
       <PlayerSlider buffer={config.playerBuffer} on={config.playerSliderCallbacks}>
         {#snippet children({ item })}
-          {@const postModel = config.itemAsPostViewerModel(item)}
           <div class="content-player__content">
-            {#if postModel}
-              <PostViewer
-                model={postModel}
-                controlsColors={{ active: config.playerColors.button, inactive: config.playerColors.buttonInactive }}
-                trackingParams={config.trackingParams}
-                socialInteractionsHandler={config.socialInteractionsHandler}
-                enableAttachments={config.uiManager.showPostOverlayAttachments}
-                enableControls={config.uiManager.showPostOverlayControls}
-                autoplay="on-appearance"
-                locale={config.settings.locale}
-                on={{
-                  progress: (progress) => config.callbacks?.videoProgress?.(item.id, postModel.id, progress),
-                  productClick: (productId) => config.callbacks?.productClick?.(productId, postModel.id),
-                  productImpression: (productId) => config.callbacks?.productImpression?.(productId, postModel.id),
-                  adClick: (adId) => config.callbacks?.adClick?.(adId, postModel.id),
-                  adImpression: (adId) => config.callbacks?.adImpression?.(adId, postModel.id)
-                }} />
-            {:else if nonPostItemView}
-              {@render nonPostItemView({ item })}
-            {/if}
-
+            {@render itemView({ item })}
             {#if uiManager.isMobileView && config.playerBuffer && config.playerBuffer.loaded.length > 1 && !everTouched}
               <SwipeIndicator locale={config.settings.locale} />
             {/if}
@@ -150,7 +128,7 @@ const handleSliderMounted = (node) => {
       {/if}
     </div>
 
-    <ControlsAndAttachments config={config} hasOverview={!!overviewPanelContent} />
+    <ControlsAndAttachments config={config} hasOverview={!!overviewPanelContent} itemActions={itemActions} attachmentsView={attachmentsView} />
   {:else}
     <Loading positionFixedCenter={true} timeout={1000} />
   {/if}

package/dist/{content-player → ui/player/content-player}/cmp.content-player.svelte.d.ts

@@ -1,26 +1,22 @@
+import type { PlayerButtonDef } from '../button';
 import type { ContentPlayerConfig } from './content-player-config.svelte';
 import { type Snippet } from 'svelte';
-declare function $$render<T extends {
+declare class __sveltets_Render<T extends {
     id: string;
-}>(): {
-    props: {
+}> {
+    props(): {
         config: ContentPlayerConfig<T>;
-        nonPostItemView?: Snippet<[{
+        itemActions: PlayerButtonDef[];
+        itemView: Snippet<[{
             item: T;
         }]>;
+        attachmentsView?: Snippet<[{
+            item: T;
+        }]> | undefined;
         overviewPanelContent?: Snippet;
     };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<T extends {
-    id: string;
-}> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+    events(): {};
+    slots(): {};
     bindings(): "";
     exports(): {};
 }

package/dist/ui/player/content-player/content-player-config.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { ICloseOrchestrator } from '../close-orchestrator';
+import type { IPlayerBuffer } from '../providers';
+import type { PlayerSliderCallbacks } from '../slider/types';
+import { ContentPlayerSettings } from './content-player-settings.svelte';
+import { ContentPlayerUIManager } from './ui-manager.svelte';
+export declare class ContentPlayerConfig<T extends {
+    id: string;
+}> {
+    playerBuffer: IPlayerBuffer<T> | null;
+    readonly settings: ContentPlayerSettings;
+    readonly playerSliderCallbacks: PlayerSliderCallbacks | undefined;
+    readonly closeOrchestrator: ICloseOrchestrator;
+    readonly uiManager: ContentPlayerUIManager;
+    private _trackingParams;
+    constructor(init: {
+        playerBuffer: IPlayerBuffer<T> | null;
+        settings?: ContentPlayerSettings;
+        playerSliderCallbacks?: PlayerSliderCallbacks;
+        trackingParams?: ContentPlayerTrackingParams | null;
+        closeOrchestrator: ICloseOrchestrator;
+    });
+    get playerColors(): import("../colors").PlayerColors;
+    get trackingParams(): ContentPlayerConfig<T>['_trackingParams'];
+    updateTrackingParams: (data: ContentPlayerTrackingParams | null) => void;
+}
+export type ContentPlayerTrackingParams = {
+    streamId?: string;
+    campaignId?: string;
+} | false;

package/dist/ui/player/content-player/content-player-config.svelte.js

@@ -0,0 +1,27 @@
+import { ContentPlayerSettings } from './content-player-settings.svelte';
+import { ContentPlayerUIManager } from './ui-manager.svelte';
+export class ContentPlayerConfig {
+    playerBuffer = $state.raw(null);
+    settings;
+    playerSliderCallbacks;
+    closeOrchestrator;
+    uiManager = new ContentPlayerUIManager();
+    _trackingParams = $state.raw(null);
+    constructor(init) {
+        const { playerBuffer, trackingParams, settings, playerSliderCallbacks, closeOrchestrator } = init;
+        this.playerBuffer = playerBuffer;
+        this._trackingParams = trackingParams ?? null;
+        this.settings = settings || new ContentPlayerSettings();
+        this.playerSliderCallbacks = playerSliderCallbacks;
+        this.closeOrchestrator = closeOrchestrator;
+    }
+    get playerColors() {
+        return this.settings.playerColors;
+    }
+    get trackingParams() {
+        return this._trackingParams;
+    }
+    updateTrackingParams = (data) => {
+        this._trackingParams = data ?? null;
+    };
+}

package/dist/{content-player → ui/player/content-player}/content-player-settings.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { Locale } from '../core/locale';
-import { type ThemeValue } from '../core/theme';
-import { PlayerColors } from '../ui/player/colors';
+import type { Locale } from '../../../core/locale';
+import { type ThemeValue } from '../../../core/theme';
+import { PlayerColors } from '../colors';
 export declare class ContentPlayerSettings {
     locale: Locale;
     showStreamsCloudWatermark: boolean;

package/dist/{content-player → ui/player/content-player}/content-player-settings.svelte.js

@@ -1,5 +1,5 @@
-import { Theme } from '../core/theme';
-import { PlayerColors } from '../ui/player/colors';
+import { Theme } from '../../../core/theme';
+import { PlayerColors } from '../colors';
 export class ContentPlayerSettings {
     locale = $state('en');
     showStreamsCloudWatermark = $state(false);

package/dist/{content-player → ui/player/content-player}/controls-and-attachments.svelte

@@ -1,28 +1,17 @@
-<script lang="ts">import { slideHorizontally } from '../core/transitions';
-import { PostAttachments } from '../posts/attachments';
-import { PostControls } from '../posts/controls';
-import { IconColor } from '../ui/icon';
-import { PlayerButton, PlayerButtonsGroup } from '../ui/player/button';
+<script lang="ts">import { slideHorizontally } from '../../../core/transitions';
+import { PlayerButton, ResponsivePlayerButtonsGroup } from '../button';
 import { ContentPlayerConfig } from './content-player-config.svelte';
 import IconCalendarWeekNumbers from '@fluentui/svg-icons/icons/calendar_week_numbers_24_regular.svg?raw';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_28_regular.svg?raw';
 import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_28_regular.svg?raw';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_28_regular.svg?raw';
-let { config, hasOverview } = $props();
+let { config, hasOverview, itemActions, attachmentsView } = $props();
 const uiManager = config.uiManager;
-let attachmentsCollapsed = $state(false);
 let closeButtonAreaHeight = $state(0);
-const currentItemPostContainer = $derived.by(() => {
-    var _a;
-    if (!((_a = config.playerBuffer) === null || _a === void 0 ? void 0 : _a.current)) {
-        return null;
-    }
-    return config.itemAsPostViewerModel(config.playerBuffer.current);
-});
-const extraActions = $derived.by(() => {
-    const actions = [];
+const allActions = $derived.by(() => {
+    const actions = [...itemActions];
     if (hasOverview && uiManager.overviewCanBeShown) {
-        actions.push({
+        actions.unshift({
             icon: IconCalendarWeekNumbers,
             callback: () => {
                 uiManager.overviewCollapsed = !uiManager.overviewCollapsed;
@@ -31,9 +20,6 @@ const extraActions = $derived.by(() => {
     }
     return actions;
 });
-const changeShowAttachments = () => {
-    attachmentsCollapsed = !attachmentsCollapsed;
-};
 const trackAttachmentsPanelSize = (node) => {
     const resizeObserver = new ResizeObserver(([entry]) => {
         uiManager.attachmentsWidth = entry.contentRect.width;
@@ -72,34 +58,16 @@ const variables = $derived.by(() => {
 });
 </script>
 
-{#if !uiManager.showPostOverlayControls}
+{#if !uiManager.showControlsOverlay}
   <div class="controls-and-attachments" style={variables}>
     <div class="controls-and-attachments__spacer">&nbsp;</div>
     <div class="controls-and-attachments__left">
-      {#if currentItemPostContainer}
-        <PostControls
-          model={currentItemPostContainer}
-          activeColor={config.playerColors.button}
-          inactiveColor={config.playerColors.buttonInactive}
-          socialInteractionsHandler={config.socialInteractionsHandler}
-          extraActions={extraActions}
-          on={{ attachmentsClicked: changeShowAttachments }} />
-      {:else if extraActions.length}
-        {#if extraActions.length === 1}
-          <PlayerButton
-            scaleEffect={true}
-            activeColor={config.playerColors.button}
-            inactiveColor={config.playerColors.buttonInactive}
-            icon={extraActions[0].icon}
-            on={{ click: extraActions[0].callback }} />
-        {:else}
-          <PlayerButtonsGroup
-            scaleEffect={true}
-            activeColor={config.playerColors.button}
-            backgroundColor={config.playerColors.buttonInactive}
-            actions={extraActions} />
-        {/if}
-      {/if}
+      <ResponsivePlayerButtonsGroup
+        actions={allActions}
+        scaleEffect={true}
+        activeColor={config.playerColors.button}
+        backgroundColor={config.playerColors.buttonInactive} />
+
       {#if config.playerBuffer}
         <div
           class="controls-and-attachments__navigation-buttons"
@@ -122,25 +90,10 @@ const variables = $derived.by(() => {
       {/if}
     </div>
     <div class="controls-and-attachments__right" use:trackAttachmentsPanelSize>
-      {#if !uiManager.showPostOverlayAttachments}
-        {#if currentItemPostContainer && !attachmentsCollapsed && currentItemPostContainer.attachments}
-          <div class="controls-and-attachments__post-attachments" transition:slideHorizontally|local>
-            <PostAttachments
-              model={currentItemPostContainer}
-              colors={{
-                background: config.playerColors.cardBackground,
-                price: config.playerColors.price,
-                salePrice: config.playerColors.salePrice,
-                buttonBackground: config.playerColors.cardButton
-              }}
-              trackingParams={config.trackingParams}
-              locale={config.settings.locale}
-              on={{
-                productClick: (id) => config.callbacks?.productClick?.(id, currentItemPostContainer.id),
-                productImpression: (id) => config.callbacks?.productImpression?.(id, currentItemPostContainer.id),
-                adClick: (id) => config.callbacks?.adClick?.(id, currentItemPostContainer.id),
-                adImpression: (id) => config.callbacks?.adImpression?.(id, currentItemPostContainer.id)
-              }} />
+      {#if !uiManager.showAttachmentsOverlay}
+        {#if attachmentsView && config.playerBuffer?.current && !config.uiManager.attachmentsCollapsed}
+          <div class="controls-and-attachments__attachments" transition:slideHorizontally|local>
+            {@render attachmentsView({ item: config.playerBuffer.current })}
           </div>
         {/if}
       {/if}
@@ -202,7 +155,7 @@ const variables = $derived.by(() => {
   align-items: flex-end;
   flex-direction: column;
 }
-.controls-and-attachments__post-attachments {
+.controls-and-attachments__attachments {
   flex: 1 1 auto;
   width: var(--_controls-and-attachments--attachments--max-width);
   max-width: var(--_controls-and-attachments--attachments--max-width);

package/dist/{content-player → ui/player/content-player}/controls-and-attachments.svelte.d.ts

@@ -1,22 +1,19 @@
+import { type PlayerButtonDef } from '../button';
 import { ContentPlayerConfig } from './content-player-config.svelte';
-declare function $$render<T extends {
+import type { Snippet } from 'svelte';
+declare class __sveltets_Render<T extends {
     id: string;
-}>(): {
-    props: {
+}> {
+    props(): {
         config: ContentPlayerConfig<T>;
         hasOverview: boolean;
+        itemActions: PlayerButtonDef[];
+        attachmentsView?: Snippet<[{
+            item: T;
+        }]> | undefined;
     };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<T extends {
-    id: string;
-}> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+    events(): {};
+    slots(): {};
     bindings(): "";
     exports(): {};
 }

package/dist/{content-player → ui/player/content-player}/overview-panel.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { slideHorizontally } from '../core/transitions';
+<script lang="ts">import { slideHorizontally } from '../../../core/transitions';
 let { config, uiManager, position, children } = $props();
 const handlePanelClick = (e) => {
     e.stopPropagation();
@@ -59,6 +59,7 @@ const styles = $derived.by(() => {
   z-index: 0;
   border-radius: 0.5rem 0 0 0.5rem;
   background: var(--_overview-panel--background);
+  /* Set 'container-type: inline-size;' to reference container*/
 }
 .overview-panel__content {
   width: 100%;
@@ -70,9 +71,6 @@ const styles = $derived.by(() => {
   overflow: hidden;
   container-type: inline-size;
 }
-.overview-panel {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
 @container (width < 576px) {
   .overview-panel {
     width: 100%;

package/dist/{content-player → ui/player/content-player}/overview-panel.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { ContentPlayerConfig } from './content-player-config.svelte';
 import type { ContentPlayerUIManager } from './ui-manager.svelte';
 import type { Snippet } from 'svelte';
-declare function $$render<T extends {
+declare class __sveltets_Render<T extends {
     id: string;
-}>(): {
-    props: {
+}> {
+    props(): {
         config: ContentPlayerConfig<T>;
         uiManager: ContentPlayerUIManager;
         position: {
@@ -14,17 +14,8 @@ declare function $$render<T extends {
         };
         children: Snippet;
     };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<T extends {
-    id: string;
-}> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+    events(): {};
+    slots(): {};
     bindings(): "";
     exports(): {};
 }

package/dist/{content-player → ui/player/content-player}/ui-manager.svelte.d.ts

@@ -2,6 +2,7 @@ export declare class ContentPlayerUIManager {
     overviewCollapsed: boolean;
     readonly overviewCanBeShown: boolean;
     readonly overviewMaxWidth = 150;
+    attachmentsCollapsed: boolean;
     attachmentsWidth: number;
     readonly attachmentsMaxWidth = 176;
     playerTotalWidth: number;
@@ -9,6 +10,6 @@ export declare class ContentPlayerUIManager {
     readonly sidePanelsMaxWidth: number;
     readonly isMobileView: boolean;
     readonly viewInitialized: boolean;
-    showPostOverlayAttachments: boolean;
-    showPostOverlayControls: boolean;
+    showAttachmentsOverlay: boolean;
+    showControlsOverlay: boolean;
 }

package/dist/{content-player → ui/player/content-player}/ui-manager.svelte.js

@@ -5,6 +5,7 @@ export class ContentPlayerUIManager {
     overviewCollapsed = $state(true);
     overviewCanBeShown = $derived.by(() => this.overviewMaxWidth <= this.sidePanelsMaxWidth);
     overviewMaxWidth = OVERLAY_MAX_WIDTH;
+    attachmentsCollapsed = $state(false);
     attachmentsWidth = $state(0);
     attachmentsMaxWidth = ATTACHMENTS_MAX_WIDTH;
     playerTotalWidth = $state(0);
@@ -12,6 +13,6 @@ export class ContentPlayerUIManager {
     sidePanelsMaxWidth = $derived.by(() => (this.playerTotalWidth - this.contentViewWidth) / 2);
     isMobileView = $derived.by(() => this.playerTotalWidth <= 576);
     viewInitialized = $derived.by(() => !!this.playerTotalWidth && !!this.contentViewWidth);
-    showPostOverlayAttachments = $derived.by(() => this.viewInitialized && this.attachmentsWidth < ATTACHMENTS_MAX_WIDTH + 10);
-    showPostOverlayControls = $derived.by(() => this.viewInitialized && this.sidePanelsMaxWidth < SAFE_AREA_SIZE);
+    showAttachmentsOverlay = $derived.by(() => this.viewInitialized && this.attachmentsWidth < ATTACHMENTS_MAX_WIDTH + 10);
+    showControlsOverlay = $derived.by(() => this.viewInitialized && this.sidePanelsMaxWidth < SAFE_AREA_SIZE);
 }

package/dist/ui/player/providers/chunks-player-buffer/player-chunk-item.svelte.d.ts

@@ -2,10 +2,8 @@ import type { WithId } from '../types';
 export declare class PlayerChunkItem<T extends WithId> {
     model: T;
     chunkId: string;
-    indexWithinChunk: number;
     constructor(init: {
         model: T;
-        indexWithinChunk: number;
         chunkId: string;
     });
 }

package/dist/ui/player/providers/chunks-player-buffer/player-chunk-item.svelte.js

@@ -1,11 +1,9 @@
 export class PlayerChunkItem {
     model;
     chunkId;
-    indexWithinChunk;
     constructor(init) {
-        const { model, indexWithinChunk, chunkId } = init;
+        const { model, chunkId } = init;
         this.model = model;
-        this.indexWithinChunk = indexWithinChunk;
         this.chunkId = chunkId;
     }
 }

package/dist/ui/player/providers/chunks-player-buffer/player-chunk.svelte.d.ts

@@ -4,7 +4,6 @@ export declare class PlayerChunk<TItem extends WithId, TChunk extends WithId> {
     readonly model: TChunk;
     readonly items: TItem[];
     readonly chunkItems: PlayerChunkItem<TItem>[];
-    readonly chunkIndex: number;
     readonly activeChunkItem: PlayerChunkItem<TItem>;
     readonly isEmpty: boolean;
     isFullyLoaded: boolean;
@@ -14,7 +13,6 @@ export declare class PlayerChunk<TItem extends WithId, TChunk extends WithId> {
     private _itemsLoader;
     constructor(data: {
         chunk: TChunk;
-        chunkIndex: number;
         provider: {
             loadChunkItems: (chunkId: string, continuationToken: string | null | undefined) => Promise<{
                 items: TItem[];
@@ -25,7 +23,10 @@ export declare class PlayerChunk<TItem extends WithId, TChunk extends WithId> {
             onChunkFullyLoaded: (chunk: PlayerChunk<TItem, TChunk>) => void;
         };
     });
+    get isLoading(): boolean;
+    get activeItemIndex(): number;
     loadMore: () => Promise<TItem[]>;
     setActiveItemIndex: (index: number, warmUp?: boolean) => Promise<void>;
+    mutateChunkItems: (items: PlayerChunkItem<TItem>[]) => void;
     warmUp: () => Promise<void>;
 }