@streamscloud/embeddable 13.3.0 → 14.0.0

package/dist/ui/card-actions/card-action-container.js

@@ -0,0 +1,17 @@
+export const cardActionContainer = (node) => {
+    const handleHover = () => {
+        node.style.setProperty('--card-actions--opacity', '1');
+    };
+    const handleHoverOut = () => {
+        node.style.setProperty('--card-actions--opacity', '');
+    };
+    node.addEventListener('mouseenter', handleHover);
+    node.addEventListener('mouseleave', handleHoverOut);
+    node.style.position = 'relative';
+    return {
+        destroy() {
+            node.removeEventListener('mouseenter', handleHover);
+            node.removeEventListener('mouseleave', handleHoverOut);
+        }
+    };
+};

package/dist/ui/card-actions/cmp.card-action.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">import { Icon, IconColor } from '../icon';
+let { action, on } = $props();
+</script>
+
+<button
+  type="button"
+  class="card-action"
+  title={action.title ?? ''}
+  onclick={(e) => {
+    if (!action.propagateClickEvent) {
+      e.stopPropagation();
+    }
+
+    action.callback?.();
+    on?.click?.();
+  }}>
+  <Icon src={action.icon} color={action.iconColor ?? IconColor.Text} />
+</button>
+
+<style>.card-action {
+  --_card-action--padding: var(--card-action-padding, 0.3125em);
+  padding: var(--_card-action--padding);
+  transition: transform 0.3s;
+  line-height: 0;
+}
+.card-action:hover {
+  transform: scale(1.2);
+}</style>

package/dist/ui/card-actions/cmp.card-action.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { CardActionModel } from './types';
+type Props = {
+    action: CardActionModel;
+    on?: {
+        click?: () => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/card-actions/cmp.card-actions.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">import { Dropdown } from '../dropdown';
+import CardAction from './cmp.card-action.svelte';
+import IconMoreVertical from '@fluentui/svg-icons/icons/more_vertical_20_regular.svg?raw';
+let { actions, dropdownPosition = 'bottom-start' } = $props();
+let toggleDropdown = $state.raw(null);
+let closeDropdown = () => {
+    if (toggleDropdown) {
+        toggleDropdown(false);
+    }
+};
+</script>
+
+{#if actions.length}
+  <div class="card-actions">
+    <Dropdown position={dropdownPosition} on={{ mounted: (v) => (toggleDropdown = v.toggleOpen) }}>
+      {#snippet trigger()}
+        <CardAction action={{ icon: IconMoreVertical, propagateClickEvent: true }} />
+      {/snippet}
+
+      <div class="card-actions__dropdown-content">
+        {#each actions as action (action)}
+          <CardAction action={action} on={{ click: closeDropdown }} />
+        {/each}
+      </div>
+    </Dropdown>
+  </div>
+{/if}
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.card-actions {
+  --_card-actions--opacity: var(--card-actions--opacity, 0);
+  --_card-actions--top-offset: var(--card-actions--top-offset, 0.3125em);
+  --_card-actions--left-offset: var(--card-actions--left-offset, 0.3125em);
+  --_card-actions--right-offset: var(--card-actions--right-offset, auto);
+  position: absolute;
+  top: var(--_card-actions--top-offset);
+  right: var(--_card-actions--right-offset);
+  left: var(--_card-actions--left-offset);
+  --icon--stroke-width: 0.3;
+  opacity: var(--_card-actions--opacity);
+  transition: opacity ease-in-out 0.4s;
+  display: flex;
+  background: var(--sc-mc-color--bg-card-action);
+  border-radius: 0.1875em;
+}
+.card-actions__dropdown-content {
+  padding: 0 0.3125em;
+  background: var(--sc-mc-color--bg-card-action);
+}
+@media (any-hover: none) {
+  .card-actions {
+    opacity: 1;
+  }
+}
+
+:global(.card-actions-container) {
+  position: relative;
+}
+:global(.card-actions-container):hover .card-actions {
+  opacity: 1;
+}</style>

package/dist/ui/card-actions/cmp.card-actions.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type DropdownPosition } from '../dropdown';
+import type { CardActionModel } from './types';
+type Props = {
+    actions: CardActionModel[];
+    dropdownPosition?: DropdownPosition;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,4 @@
+export { default as CardActions } from './cmp.card-actions.svelte';
+export { default as CardAction } from './cmp.card-action.svelte';
+export { cardActionContainer } from './card-action-container';
+export type { CardActionModel } from './types';

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

@@ -0,0 +1,3 @@
+export { default as CardActions } from './cmp.card-actions.svelte';
+export { default as CardAction } from './cmp.card-action.svelte';
+export { cardActionContainer } from './card-action-container';

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/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,3 +1,4 @@
+import type { PlayerButtonDef } from '../button';
 import type { ContentPlayerConfig } from './content-player-config.svelte';
 import { type Snippet } from 'svelte';
 declare class __sveltets_Render<T extends {
@@ -5,7 +6,11 @@ declare class __sveltets_Render<T extends {
 }> {
     props(): {
         config: ContentPlayerConfig<T>;
-        nonPostItemView?: Snippet<[{
+        itemActions: PlayerButtonDef[];
+        itemView: Snippet<[{
+            item: T;
+        }]>;
+        attachmentsView?: Snippet<[{
             item: T;
         }]> | undefined;
         overviewPanelContent?: Snippet;

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,10 +1,16 @@
+import { type PlayerButtonDef } from '../button';
 import { ContentPlayerConfig } from './content-player-config.svelte';
+import type { Snippet } from 'svelte';
 declare class __sveltets_Render<T extends {
     id: string;
 }> {
     props(): {
         config: ContentPlayerConfig<T>;
         hasOverview: boolean;
+        itemActions: PlayerButtonDef[];
+        attachmentsView?: Snippet<[{
+            item: T;
+        }]> | undefined;
     };
     events(): {};
     slots(): {};

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();

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>;
 }