@wyxos/vibe 5.7.2 → 5.8.1

package/README.md

@@ -99,6 +99,7 @@ const vibe = createVibe({
     height: 48,
   },
   mediaCard: {
+    feedPreload: 'replacement',
     videoMuted: true,
   },
 })
@@ -121,6 +122,18 @@ active again. Set `mediaCard.videoMuted` to explicitly override the initial
 state in either layout. Users can still change mute and volume through the
 timed-media controls.
 
+Set `mediaCard.feedPreload` to `replacement` to warm the exact preview source
+that a grouped masonry card will show after its current media item is removed.
+The default is `none`, so consumers opt in to the additional request.
+
+Applications that need audio continuity can pass `initialReelAudioState` with
+`volume`, `muted`, and `lastAudibleVolume`, then persist user changes through
+`onReelAudioStateChange`. Every reel card in that Vibe instance shares the
+state. `getReelAudioState()` returns a snapshot and `setReelAudioState()` applies
+an external update without invoking the callback, which lets applications sync
+several Vibe instances without an echo loop. Masonry's forced mute behavior is
+unchanged.
+
 Masonry virtualization keeps the existing 800px/1.5-viewport overscan by
 default. Consumers can opt into a capped window while retaining every loaded
 item and the same removal, restoration, reel, and pagination behavior:

package/lib/components/MediaCard.vue.d.ts

@@ -1,6 +1,6 @@
 import { type CSSProperties } from 'vue';
 import { type MediaPreviewState } from '../core/mediaPreview';
-import type { VibeCardRegion, VibeItem, VibeLayout, VibeMediaSource, VibeMediaCardOptions } from '../types';
+import type { VibeCardRegion, VibeItem, VibeLayout, VibeMediaSource, VibeMediaCardOptions, VibeReelAudioState } from '../types';
 type __VLS_Props = {
     active?: boolean;
     advanceOnMediaEnd?: boolean;
@@ -20,6 +20,7 @@ type __VLS_Props = {
     mediaSource?: VibeMediaSource;
     previewState: MediaPreviewState;
     reelControlsTarget?: HTMLElement | null;
+    reelAudioState?: VibeReelAudioState;
     stationaryReelControls?: boolean;
     total: number | null;
 };
@@ -29,12 +30,14 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     ended: (mediaIndex: number) => any;
     activate: (input: "keyboard" | "pointer") => any;
     mediaChange: (mediaIndex: number) => any;
+    reelAudioChange: (state: VibeReelAudioState) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onReady?: ((mediaIndex: number) => any) | undefined;
     onError?: ((mediaIndex: number) => any) | undefined;
     onEnded?: ((mediaIndex: number) => any) | undefined;
     onActivate?: ((input: "keyboard" | "pointer") => any) | undefined;
     onMediaChange?: ((mediaIndex: number) => any) | undefined;
+    onReelAudioChange?: ((state: VibeReelAudioState) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/lib/components/ReelFeed.vue.d.ts

@@ -1,5 +1,5 @@
-import type { ReelFeedProps } from '../core/feed';
-import type { VibeItemId } from '../types';
+import { type ReelFeedProps } from '../core/feed';
+import type { VibeItemId, VibeReelAudioState } from '../types';
 declare function loadIfNearBottom(): void;
 declare function changeActiveMedia(direction: -1 | 1): boolean;
 declare function moveActivePost(direction: -1 | 1): boolean;
@@ -21,6 +21,7 @@ declare const __VLS_export: import("vue").DefineComponent<ReelFeedProps, {
     loadMore: () => any;
     retryEnd: () => any;
     mediaChange: (postId: VibeItemId, mediaIndex: number) => any;
+    reelAudioChange: (state: VibeReelAudioState) => any;
     activeChange: (postId: VibeItemId) => any;
     retryForward: () => any;
 }, string, import("vue").PublicProps, Readonly<ReelFeedProps> & Readonly<{
@@ -29,6 +30,7 @@ declare const __VLS_export: import("vue").DefineComponent<ReelFeedProps, {
     onLoadMore?: (() => any) | undefined;
     onRetryEnd?: (() => any) | undefined;
     onMediaChange?: ((postId: VibeItemId, mediaIndex: number) => any) | undefined;
+    onReelAudioChange?: ((state: VibeReelAudioState) => any) | undefined;
     onActiveChange?: ((postId: VibeItemId) => any) | undefined;
     onRetryForward?: (() => any) | undefined;
 }>, {

package/lib/components/ReelLayout.vue.d.ts

@@ -1,5 +1,5 @@
 import type { ReelLayoutProps } from '../core/feed';
-import type { VibeItemId } from '../types';
+import type { VibeItemId, VibeReelAudioState } from '../types';
 declare function changeActiveMedia(direction: -1 | 1): boolean;
 declare function loadIfNearBottom(): void;
 declare function moveActivePost(direction: -1 | 1): boolean;
@@ -19,6 +19,7 @@ declare const __VLS_export: import("vue").DefineComponent<ReelLayoutProps, {
     loadMore: () => any;
     retryEnd: () => any;
     mediaChange: (postId: VibeItemId, mediaIndex: number) => any;
+    reelAudioChange: (state: VibeReelAudioState) => any;
     activeChange: (postId: VibeItemId) => any;
     retryForward: () => any;
     closeInfoSheet: () => any;
@@ -28,6 +29,7 @@ declare const __VLS_export: import("vue").DefineComponent<ReelLayoutProps, {
     onLoadMore?: (() => any) | undefined;
     onRetryEnd?: (() => any) | undefined;
     onMediaChange?: ((postId: VibeItemId, mediaIndex: number) => any) | undefined;
+    onReelAudioChange?: ((state: VibeReelAudioState) => any) | undefined;
     onActiveChange?: ((postId: VibeItemId) => any) | undefined;
     onRetryForward?: (() => any) | undefined;
     onCloseInfoSheet?: (() => any) | undefined;

package/lib/components/VibeSurface.vue.d.ts

@@ -1,6 +1,6 @@
 import type { VibeMasonryOptions } from '../core/masonryOptions';
 import { type VibeRuntimeState } from '../core/runtime';
-import type { VibeCardRegion, VibeFeedFooter, VibeFeedFooterActions, VibeItemId, VibeMediaCardOptions, VibeMediaLifecycleContext, VibeReelInfoSheetOptions, VibeReelItemTarget, VibeReelNavigationResult } from '../types';
+import type { VibeCardRegion, VibeFeedFooter, VibeFeedFooterActions, VibeItemId, VibeMediaCardOptions, VibeMediaLifecycleContext, VibeReelInfoSheetOptions, VibeReelAudioState, VibeReelItemTarget, VibeReelNavigationResult } from '../types';
 import type { VibeItemRemovalOptions } from '../core/itemRemovalOptions';
 type __VLS_Props = {
     canRetryEnd: boolean;
@@ -11,6 +11,7 @@ type __VLS_Props = {
     mediaCard?: VibeMediaCardOptions;
     masonry?: VibeMasonryOptions;
     reelInfoSheet?: VibeReelInfoSheetOptions;
+    reelAudioState: VibeReelAudioState;
     state: VibeRuntimeState;
 };
 declare function loadIfNearBottom(): Promise<void>;
@@ -31,6 +32,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     loadMore: () => any;
     retryEnd: () => any;
+    reelAudioChange: (state: VibeReelAudioState) => any;
     retryForward: () => any;
     activeReelChange: (postId: VibeItemId) => any;
     closeReel: () => any;
@@ -42,6 +44,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onLoadMore?: (() => any) | undefined;
     onRetryEnd?: (() => any) | undefined;
+    onReelAudioChange?: ((state: VibeReelAudioState) => any) | undefined;
     onRetryForward?: (() => any) | undefined;
     onActiveReelChange?: ((postId: VibeItemId) => any) | undefined;
     onCloseReel?: (() => any) | undefined;

package/lib/components/useFeedReplacementPreload.d.ts

@@ -0,0 +1,11 @@
+import type { VibeItem, VibeLayout, VibeMediaCardOptions, VibeMediaSource } from '../types';
+interface FeedReplacementPreloadOptions {
+    item: () => VibeItem;
+    layout: () => VibeLayout;
+    mediaCard: () => VibeMediaCardOptions | undefined;
+    mediaIndex: () => number;
+    mediaReady: () => boolean;
+    mediaSource: () => VibeMediaSource;
+}
+export declare function useFeedReplacementPreload(options: FeedReplacementPreloadOptions): void;
+export {};

package/lib/components/useMediaCardAudio.d.ts

@@ -0,0 +1,19 @@
+import { type Ref } from 'vue';
+import type { VibeLayout, VibeMediaCardOptions, VibeReelAudioState } from '../types';
+interface MediaCardAudioOptions {
+    active: () => boolean | undefined;
+    layout: () => VibeLayout;
+    mediaCard: () => VibeMediaCardOptions | undefined;
+    onChange: (state: VibeReelAudioState) => void;
+    reelAudioState: () => VibeReelAudioState | undefined;
+    videoElement: Ref<HTMLVideoElement | null>;
+}
+export declare function useMediaCardAudio(options: MediaCardAudioOptions): {
+    apply: () => void;
+    setVolume: (volume: number) => void;
+    sync: (video: HTMLVideoElement, syncMuted: boolean) => void;
+    toggleMute: () => void;
+    videoIsMuted: import("vue").ShallowRef<boolean, boolean>;
+    videoVolume: import("vue").ShallowRef<number, number>;
+};
+export {};

package/lib/components/useMediaLoading.d.ts

@@ -11,6 +11,6 @@ interface MediaLoadingOptions {
 export declare function useMediaLoading(options: MediaLoadingOptions): {
     imageLoading: import("vue").ComputedRef<"lazy" | "eager">;
     mediaIsTimed: import("vue").ComputedRef<boolean>;
-    videoPreload: import("vue").ComputedRef<"metadata" | "auto" | "none">;
+    videoPreload: import("vue").ComputedRef<"none" | "metadata" | "auto">;
 };
 export {};

package/lib/core/feed.d.ts

@@ -1,4 +1,4 @@
-import type { VibeCardRegion, VibeFeedFooter, VibeFeedFooterActions, VibeItem, VibeItemId, VibeMediaSource, VibeMediaCardOptions, VibeReelAutoAdvanceState, VibeReelForwardState, VibeReelInfoSheetOptions, VibeReelItemTarget, VibeReelNavigationResult, VibeReelOrigin, VibeState } from '../types';
+import type { VibeCardRegion, VibeFeedFooter, VibeFeedFooterActions, VibeItem, VibeItemId, VibeMediaSource, VibeMediaCardOptions, VibeReelAutoAdvanceState, VibeReelAudioState, VibeReelForwardState, VibeReelInfoSheetOptions, VibeReelItemTarget, VibeReelNavigationResult, VibeReelOrigin, VibeState } from '../types';
 import type { VibeItemRemovalOptions } from './itemRemovalOptions';
 import type { VibeMasonryOptions } from './masonryOptions';
 import type { MediaPreviewState } from './mediaPreview';
@@ -17,6 +17,7 @@ export interface FeedRendererProps {
     mediaIndices: ReadonlyMap<VibeItemId, number>;
     nextPageError: boolean;
     previewStates: ReadonlyMap<string, MediaPreviewState>;
+    reelAudioState?: VibeReelAudioState;
     state?: VibeState;
     total: number | null;
 }

package/lib/core/feedReplacementPreload.d.ts

@@ -0,0 +1,3 @@
+import type { VibeItem, VibeMediaSource, VibeMediaVariant } from '../types';
+export declare function replacementFeedVariant(item: VibeItem, mediaIndex: number, mediaSource: VibeMediaSource): VibeMediaVariant | null;
+export declare function preloadFeedVariant(variant: VibeMediaVariant): () => void;

package/lib/core/mediaCardOptions.d.ts

@@ -0,0 +1,18 @@
+import type { VibeMediaError } from './mediaPreview';
+export interface VibeCardChromeStyle {
+    background?: 'default' | 'transparent';
+    paddingX?: number;
+    paddingY?: number;
+}
+export interface VibeMediaCardOptions {
+    error?: VibeMediaError;
+    feedPreload?: 'none' | 'replacement';
+    footer?: VibeCardChromeStyle;
+    header?: VibeCardChromeStyle;
+    videoMuted?: boolean;
+}
+export interface VibeReelAudioState {
+    lastAudibleVolume: number;
+    muted: boolean;
+    volume: number;
+}

package/lib/core/reelAudio.d.ts

@@ -0,0 +1,3 @@
+import type { VibeReelAudioState } from '../types';
+export declare const DEFAULT_REEL_AUDIO_STATE: VibeReelAudioState;
+export declare function normalizeReelAudioState(state: Partial<VibeReelAudioState> | null | undefined, fallback?: VibeReelAudioState): VibeReelAudioState;

package/lib/core/reelAudioController.d.ts

@@ -0,0 +1,8 @@
+import type { CreateVibeOptions, VibeReelAudioState } from '../types';
+export declare class VibeReelAudioController {
+    private readonly options;
+    readonly state: VibeReelAudioState;
+    constructor(options: CreateVibeOptions);
+    get(): VibeReelAudioState;
+    set(state: VibeReelAudioState, notify?: boolean): void;
+}