@wyxos/vibe 5.7.1 → 5.8.0

package/README.md

@@ -121,6 +121,14 @@ 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.
 
+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/MasonryFeed.vue.d.ts

@@ -6,16 +6,16 @@ declare const __VLS_export: import("vue").DefineComponent<MasonryFeedProps, {
     getScrollElement: typeof getScrollElement;
     loadIfNearBottom: typeof loadIfNearBottom;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    error: (postId: VibeItemId, mediaIndex: number) => any;
     ready: (postId: VibeItemId, mediaIndex: number) => any;
+    error: (postId: VibeItemId, mediaIndex: number) => any;
     loadMore: () => any;
     retryEnd: () => any;
     activate: (postId: VibeItemId, input: "keyboard" | "pointer") => any;
     mediaChange: (postId: VibeItemId, mediaIndex: number) => any;
     visible: (postId: VibeItemId, mediaIndex: number) => any;
 }, string, import("vue").PublicProps, Readonly<MasonryFeedProps> & Readonly<{
-    onError?: ((postId: VibeItemId, mediaIndex: number) => any) | undefined;
     onReady?: ((postId: VibeItemId, mediaIndex: number) => any) | undefined;
+    onError?: ((postId: VibeItemId, mediaIndex: number) => any) | undefined;
     onLoadMore?: (() => any) | undefined;
     onRetryEnd?: (() => any) | undefined;
     onActivate?: ((postId: VibeItemId, input: "keyboard" | "pointer") => any) | undefined;

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,21 +20,24 @@ type __VLS_Props = {
     mediaSource?: VibeMediaSource;
     previewState: MediaPreviewState;
     reelControlsTarget?: HTMLElement | null;
+    reelAudioState?: VibeReelAudioState;
     stationaryReelControls?: boolean;
     total: number | null;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    error: (mediaIndex: number) => any;
     ready: (mediaIndex: number) => any;
+    error: (mediaIndex: number) => any;
     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<{
-    onError?: ((mediaIndex: number) => any) | undefined;
     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/MediaError.vue.d.ts

@@ -0,0 +1,14 @@
+import type { Component } from 'vue';
+type __VLS_Props = {
+    component?: Component;
+    label: string;
+    retrying: boolean;
+    status: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    retry: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRetry?: (() => 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;
@@ -16,19 +16,21 @@ declare const __VLS_export: import("vue").DefineComponent<ReelFeedProps, {
     transitionActiveMedia: typeof transitionActiveMedia;
     transitionActivePost: typeof transitionActivePost;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    error: (postId: VibeItemId, mediaIndex: number) => any;
     ready: (postId: VibeItemId, mediaIndex: number) => any;
+    error: (postId: VibeItemId, mediaIndex: number) => any;
     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<{
-    onError?: ((postId: VibeItemId, mediaIndex: number) => any) | undefined;
     onReady?: ((postId: VibeItemId, mediaIndex: number) => any) | undefined;
+    onError?: ((postId: VibeItemId, mediaIndex: number) => any) | undefined;
     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;
@@ -14,20 +14,22 @@ declare const __VLS_export: import("vue").DefineComponent<ReelLayoutProps, {
     transitionActiveMedia: typeof transitionActiveMedia;
     transitionActivePost: typeof transitionActivePost;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    error: (postId: VibeItemId, mediaIndex: number) => any;
     ready: (postId: VibeItemId, mediaIndex: number) => any;
+    error: (postId: VibeItemId, mediaIndex: number) => any;
     loadMore: () => any;
     retryEnd: () => any;
     mediaChange: (postId: VibeItemId, mediaIndex: number) => any;
+    reelAudioChange: (state: VibeReelAudioState) => any;
     activeChange: (postId: VibeItemId) => any;
     retryForward: () => any;
     closeInfoSheet: () => any;
 }, string, import("vue").PublicProps, Readonly<ReelLayoutProps> & Readonly<{
-    onError?: ((postId: VibeItemId, mediaIndex: number) => any) | undefined;
     onReady?: ((postId: VibeItemId, mediaIndex: number) => any) | undefined;
+    onError?: ((postId: VibeItemId, mediaIndex: number) => any) | undefined;
     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/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/useMediaReadiness.d.ts

@@ -13,6 +13,7 @@ export declare function useMediaReadiness(options: MediaReadinessOptions): {
     markSourceReady: (event?: Event) => void;
     noteSourceActivity: (event: Event) => void;
     retrySource: () => void;
+    retrying: import("vue").ShallowRef<boolean, boolean>;
     sourceGeneration: import("vue").ShallowRef<number, number>;
     videoElement: import("vue").ShallowRef<HTMLVideoElement | null, HTMLVideoElement | null>;
 };

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/mediaCardOptions.d.ts

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

package/lib/core/mediaPreview.d.ts

@@ -1,3 +1,13 @@
+import type { Component } from 'vue';
 export type MediaPreviewState = 'loading' | 'ready' | 'error';
+export interface VibeMediaError {
+    component: Component;
+}
+export interface VibeMediaErrorProps {
+    label: string;
+    retry: () => void;
+    retrying: boolean;
+    status: string;
+}
 export declare function mediaErrorStatus(src: string): string;
 export declare function mediaErrorLabel(src: string): string;

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