@lazycatcloud/vue-media-preview 0.0.0-stage → 0.1.1

package/dist/core/resources/initialImage.d.ts

@@ -0,0 +1,11 @@
+import type { PreviewAnchor } from "../types";
+export type InitialImage = {
+    kind: "empty";
+} | {
+    kind: "image";
+    image: HTMLImageElement;
+};
+export declare const emptyInitialImage: InitialImage;
+/** Reuse pixels already displayed by the host; never wait for an image request here. */
+export declare function initialImageFromAnchor(anchor: PreviewAnchor): InitialImage;
+export declare function openingPlaceholder(): HTMLCanvasElement;

package/dist/core/resources/usePreviewResources.d.ts

@@ -0,0 +1,13 @@
+import type { OriginalStatus } from "./imagePolicy";
+import type { PreviewMedia } from "../types";
+/** Resource state for the selected page, independent of transition and gesture ownership. */
+export declare function usePreviewResources(current: () => PreviewMedia, onOriginalState: (media: PreviewMedia, status: OriginalStatus, reason: string) => void): {
+    originalIds: import("vue").Ref<Set<string> & Omit<Set<string>, keyof Set<any>>>;
+    originalStatus: import("vue").Ref<OriginalStatus>;
+    originalReason: import("vue").Ref<string>;
+    originalRequest: import("vue").Ref<number>;
+    readyId: import("vue").Ref<string>;
+    reset: () => void;
+    requestOriginal: () => void;
+    updateOriginal: (status: OriginalStatus, reason: string) => void;
+};

package/dist/core/timeline/layout.d.ts

@@ -0,0 +1,28 @@
+import type { PreviewAnchor } from "../types";
+export interface VirtualTimelineHandle {
+    resolveAnchor(id: string): Promise<PreviewAnchor>;
+    readonly rendered: number;
+    readonly total: number;
+}
+export interface TimelineGroup<T> {
+    key: string;
+    items: T[];
+}
+export type TimelineRow = {
+    kind: "header" | "items";
+    group: number;
+    first: number;
+    count: number;
+    start: number;
+    end: number;
+};
+export declare function timelineLayout<T extends {
+    id: string;
+}>(groups: TimelineGroup<T>[], width: number, columns: number, gap?: number): {
+    rows: TimelineRow[];
+    locations: Map<string, number>;
+    height: number;
+    size: number;
+    total: number;
+};
+export declare function rowAt(rows: TimelineRow[], position: number): number;

package/dist/core/transition/anchor.d.ts

@@ -0,0 +1,12 @@
+import type { PreviewAnchor, PreviewSize } from "../types";
+import { type PictureFrame, type Rect } from "./geometry";
+export type TransitionAnchor = {
+    kind: "unavailable";
+} | {
+    kind: "element";
+    element: HTMLElement;
+    frame: PictureFrame;
+    viewport: Rect;
+};
+/** Clip only the thumbnail endpoint; the shared window grows into the full preview. */
+export declare function prepareTransitionAnchor(anchor: PreviewAnchor, media: PreviewSize, viewport: Rect): TransitionAnchor;

package/dist/core/transition/geometry.d.ts

@@ -0,0 +1,27 @@
+import type { PreviewSize } from "../types";
+export interface Rect {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+export interface PictureFrame {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotation: number;
+    clip: Rect;
+    radius: number;
+}
+export declare function fitFrame(media: PreviewSize, rect: Rect, fit: "cover" | "contain"): PictureFrame;
+export declare function interpolateFrame(a: PictureFrame, b: PictureFrame, t: number): PictureFrame;
+/** Fixed layout bounds: both crop and picture animate through compositor transforms. */
+export declare function transitionKeyframes(from: PictureFrame, to: PictureFrame, viewport: Rect, canvasSize: PreviewSize, entering: boolean): {
+    pictures: Keyframe[];
+    masks: Keyframe[];
+    maskSize: {
+        width: number;
+        height: number;
+    };
+};

package/dist/core/transition/rect.d.ts

@@ -0,0 +1,2 @@
+import type { Rect } from "./geometry";
+export declare function intersectRects(a: Rect, b: Rect): Rect;

package/dist/core/transition/sharedTransition.d.ts

@@ -0,0 +1,12 @@
+import type { PictureFrame, Rect } from "./geometry";
+/** Hold one texture throughout motion; resource upgrades belong to the settled page. */
+export declare function createSharedTransition(): {
+    play: (canvas: HTMLCanvasElement, mask: HTMLElement, image: CanvasImageSource, from: PictureFrame, to: PictureFrame, viewport: Rect, backdrop: HTMLElement, entering: boolean, startOpacity?: number, durationMs?: number) => Promise<void>;
+    cancel: () => void;
+    reverseOpening: () => {
+        kind: "inactive";
+    } | {
+        kind: "reversing";
+        finished: Promise<void>;
+    };
+};

package/dist/core/transition/sourceViewport.d.ts

@@ -0,0 +1,3 @@
+import type { Rect } from "./geometry";
+/** Resolve the visible list region used to clip the thumbnail endpoint. */
+export declare function sourceViewport(element: HTMLElement, viewport: Rect): Rect;

package/dist/core/types.d.ts

@@ -0,0 +1,69 @@
+import type { CSSProperties, ComputedRef, Ref, ShallowRef } from "vue";
+export type PreviewMediaType = "image" | "video" | "live-photo";
+export type LivePhotoStatus = "loading" | "idle" | "playing" | "error";
+export interface PreviewMedia {
+    id: string;
+    type: PreviewMediaType;
+    title: string;
+    src: string;
+    /** Uncropped, screen-sized resource. Keep its aspect ratio identical to src. */
+    previewSrc: string;
+    poster?: string;
+    videoSrc?: string;
+    width: number;
+    height: number;
+    thumbnail: string;
+}
+export type PreviewAnchor = {
+    kind: "element";
+    element: HTMLElement;
+} | {
+    kind: "unavailable";
+};
+export type PreviewPhase = "closed" | "opening" | "open" | "closing";
+export interface PreviewPoint {
+    x: number;
+    y: number;
+}
+export interface PreviewSize {
+    width: number;
+    height: number;
+}
+export type PreviewRotation = 0 | 90 | 180 | 270;
+export type PreviewDirection = "" | "vertical" | "horizontal";
+export interface PreviewViewportState {
+    level: number;
+    offsetX: number;
+    offsetY: number;
+    rotation: PreviewRotation;
+    zooming: boolean;
+    draggingDown: boolean;
+    downOffsetX: number;
+    downOffsetY: number;
+    downScale: number;
+}
+export interface PreviewViewportCore {
+    state: PreviewViewportState;
+    /** Resource upgrades wait until pointer interaction and transform animation settle. */
+    motionActive: ComputedRef<boolean>;
+    containerRef: Ref<HTMLElement | undefined>;
+    canvasRef: Ref<HTMLCanvasElement | undefined>;
+    mediaRef: ShallowRef<HTMLImageElement | HTMLVideoElement | undefined>;
+    viewportSize: Ref<PreviewSize>;
+    mediaSize: Ref<PreviewSize>;
+    visualMediaSize: ComputedRef<PreviewSize>;
+    displaySize: ComputedRef<PreviewSize>;
+    displayScale: ComputedRef<number>;
+    downDragStyle: ComputedRef<CSSProperties>;
+    setMediaElement: (el: HTMLImageElement | HTMLVideoElement) => void;
+    setMediaSize: (size: PreviewSize) => void;
+    clearMedia: () => void;
+    renderNow: () => void;
+    requestRender: () => void;
+    registerRenderHandler: (handler: () => void) => () => void;
+    zoomTo: (level: number, center?: PreviewPoint, animate?: boolean) => void;
+    setRotation: (rotation: PreviewRotation, reset?: boolean) => void;
+    rotateBy: (delta?: number) => void;
+    resetTransform: (duration?: number) => void;
+    cancelGesture: (preserveVisual?: boolean) => void;
+}

package/dist/core/usePreviewPager.d.ts

@@ -0,0 +1,26 @@
+interface PagerOptions {
+    readOffset: () => number;
+    flushLayout: () => void;
+}
+export declare function usePreviewPager(count: () => number, width: () => number, change: (index: number) => void, options?: Partial<PagerOptions>): {
+    index: import("vue").Ref<number>;
+    state: {
+        offset: number;
+        dragging: boolean;
+        settling: boolean;
+        preparing: boolean;
+        grabbed: boolean;
+        duration: number;
+    };
+    slots: import("vue").ComputedRef<number[]>;
+    stride: () => number;
+    drag: (offset: number) => void;
+    release: (_offset: number, velocity: number) => void;
+    go: (delta: number) => void;
+    grab: () => void;
+    resume: () => void;
+    reset: (next: number) => void;
+    rebase: (next: number) => void;
+    cancel: () => void;
+};
+export {};

package/dist/core/usePreviewViewport.d.ts

@@ -0,0 +1,29 @@
+import type { PreviewViewportCore } from "./types";
+interface Options {
+    motionActive?: () => boolean;
+    onTap?: () => void;
+    onDoubleTap?: () => void;
+    onScale?: (level: number) => void;
+    onSwipeDownProgress?: (progress: number) => void;
+    onSwipeDownClose?: () => void;
+    onSwipeLeft?: () => void;
+    onSwipeRight?: () => void;
+    onPageDrag?: (offset: number) => void;
+    onPageRelease?: (offset: number, velocity: number) => void;
+    interactive?: () => boolean;
+    zoomable?: () => boolean;
+    doubleTapZoom?: () => number;
+    zoomLimit?: () => number;
+    holdable?: () => boolean;
+    onHoldStart?: () => void;
+    onHoldEnd?: () => void;
+}
+export declare function usePreviewViewport(options?: Options): {
+    core: PreviewViewportCore;
+    onPointerDown: (event: PointerEvent, origin?: DOMRect) => boolean;
+    onPointerMove: (event: PointerEvent) => void;
+    onPointerUp: (event: PointerEvent) => void;
+    onPointerCancel: (event: PointerEvent) => void;
+    onWheel: (event: WheelEvent) => void;
+};
+export {};

package/dist/core/video/captureVideoFrame.d.ts

@@ -0,0 +1,3 @@
+import type { PreviewSize } from "../types";
+/** Snapshot the native player's object-fit:contain pixels before pausing or detaching it. */
+export declare function captureVideoFrame(video: HTMLVideoElement, size: PreviewSize): HTMLCanvasElement;

package/dist/core/video/useVideoPlayback.d.ts

@@ -0,0 +1,46 @@
+export declare function formatVideoTime(seconds: number): string;
+/** Playback owns media state; the preview still owns navigation and transitions. */
+export declare function useVideoPlayback(video: () => HTMLVideoElement, reportError: (error: Error) => void): {
+    state: {
+        playing: boolean;
+        buffering: boolean;
+        duration: number;
+        time: number;
+        buffered: number;
+        muted: boolean;
+        ended: boolean;
+        scrubbing: boolean;
+        scrubTime: number;
+        status: "loading" | "ready" | "error";
+    };
+    seekable: import("vue").ComputedRef<boolean>;
+    displayTime: import("vue").ComputedRef<number>;
+    progress: import("vue").ComputedRef<number>;
+    bufferedProgress: import("vue").ComputedRef<number>;
+    events: {
+        loadedmetadata: () => void;
+        durationchange: () => void;
+        timeupdate: () => void;
+        progress: () => void;
+        loadeddata: () => void;
+        canplay: () => void;
+        play: () => void;
+        playing: () => void;
+        pause: () => void;
+        ended: () => void;
+        waiting: () => void;
+        seeking: () => void;
+        seeked: () => void;
+        volumechange: () => void;
+        error: () => void;
+    };
+    play: () => Promise<void>;
+    pause: () => void;
+    toggle: () => void;
+    beginScrub: () => void;
+    scrub: (time: number) => void;
+    endScrub: (commit?: boolean) => void;
+    toggleMuted: () => void;
+    retry: () => void;
+    dispose: () => void;
+};

package/dist/core/video/useVideoSource.d.ts

@@ -0,0 +1,5 @@
+import type { PreviewMedia } from "../types";
+/** A host can attach its own streaming transport without coupling the renderer to it. */
+export type VideoSourceLoader = (video: HTMLVideoElement, media: PreviewMedia, reportError: (error: Error) => void) => () => void;
+export declare const nativeVideoSource: VideoSourceLoader;
+export declare function useVideoSource(video: () => HTMLVideoElement, media: () => PreviewMedia, enabled: () => boolean, loader: () => VideoSourceLoader, reportError: (error: Error) => void): () => number;

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import "./styles/album.css";
+export { default as MediaPreview } from "./components/MediaPreview.vue";
+export { default as PreviewStage } from "./components/PreviewStage.vue";
+export { default as ImageCanvasRenderer } from "./renderers/ImageCanvasRenderer.vue";
+export { default as VideoDomRenderer } from "./renderers/VideoDomRenderer.vue";
+export { default as LivePhotoRenderer } from "./renderers/LivePhotoRenderer.vue";
+export { usePreviewViewport } from "./core/usePreviewViewport";
+export { formatVideoTime } from "./core/video/useVideoPlayback";
+export type { PreviewAnchor, PreviewPhase, PreviewMedia, PreviewMediaType, PreviewViewportCore, LivePhotoStatus, } from "./core/types";
+export type { InitialImage } from "./core/resources/initialImage";
+export { default as VirtualTimeline } from "./components/VirtualTimeline.vue";
+export { defaultImagePolicy, defaultImageSource } from "./core/resources/imagePolicy";
+export type { ImagePolicy, ImageSourceResolver, ImageQuality, OriginalStatus, } from "./core/resources/imagePolicy";
+export { previewImageStore, ImageStore } from "./core/resources/imageStore";
+export type { TimelineGroup, VirtualTimelineHandle } from "./core/timeline/layout";
+export { nativeVideoSource } from "./core/video/useVideoSource";
+export type { VideoSourceLoader } from "./core/video/useVideoSource";

package/dist/renderers/ImageCanvasRenderer.vue.d.ts

@@ -0,0 +1,71 @@
+import type { InitialImage } from "../core/resources/initialImage";
+import type { ImagePolicy, ImageQuality, ImageSourceResolver, OriginalStatus } from "../core/resources/imagePolicy";
+import type { PreviewMedia, PreviewViewportCore } from "../core/types";
+type __VLS_Props = {
+    media: PreviewMedia;
+    core: PreviewViewportCore;
+    quality?: ImageQuality;
+    rendering?: boolean;
+    requestVersion?: number;
+    loadEnabled?: boolean;
+    priority?: number;
+    resourcePolicy?: ImagePolicy;
+    resolveSource?: ImageSourceResolver;
+    initialImage?: InitialImage;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    quality: string;
+    initialImage: () => InitialImage;
+    rendering: boolean;
+    loadEnabled: boolean;
+    requestVersion: number;
+    priority: number;
+    resourcePolicy: () => ImagePolicy;
+    resolveSource: ImageSourceResolver;
+}>, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (error: Error) => void;
+    ready: (quality: "thumbnail" | "screen" | "full") => void;
+    originalState: (status: OriginalStatus, reason: string) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    quality: string;
+    initialImage: () => InitialImage;
+    rendering: boolean;
+    loadEnabled: boolean;
+    requestVersion: number;
+    priority: number;
+    resourcePolicy: () => ImagePolicy;
+    resolveSource: ImageSourceResolver;
+}>>> & {
+    onError?: ((error: Error) => any) | undefined;
+    onReady?: ((quality: "thumbnail" | "screen" | "full") => any) | undefined;
+    onOriginalState?: ((status: OriginalStatus, reason: string) => any) | undefined;
+}, {
+    quality: ImageQuality;
+    rendering: boolean;
+    requestVersion: number;
+    loadEnabled: boolean;
+    priority: number;
+    resourcePolicy: ImagePolicy;
+    resolveSource: ImageSourceResolver;
+    initialImage: InitialImage;
+}, {}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<Required<T>[K]>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/renderers/LivePhotoRenderer.vue.d.ts

@@ -0,0 +1,94 @@
+import type { ImagePolicy, ImageQuality, ImageSourceResolver, OriginalStatus } from "../core/resources/imagePolicy";
+import type { InitialImage } from "../core/resources/initialImage";
+import type { LivePhotoStatus, PreviewMedia, PreviewViewportCore } from "../core/types";
+type __VLS_Props = {
+    media: PreviewMedia;
+    core: PreviewViewportCore;
+    playing?: boolean;
+    active?: boolean;
+    enabled?: boolean;
+    requestVersion?: number;
+    loadEnabled?: boolean;
+    priority?: number;
+    resourcePolicy?: ImagePolicy;
+    resolveSource?: ImageSourceResolver;
+    rendering?: boolean;
+    initialImage?: InitialImage;
+    quality?: ImageQuality;
+};
+/** Freeze the actual cover/video blend and scale before the closing phase stops playback. */
+declare function captureFrame(): {
+    image: HTMLCanvasElement;
+    scale: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    playing: boolean;
+    active: boolean;
+    enabled: boolean;
+    quality: string;
+    initialImage: () => InitialImage;
+    rendering: boolean;
+    loadEnabled: boolean;
+    requestVersion: number;
+    priority: number;
+    resourcePolicy: () => ImagePolicy;
+    resolveSource: ImageSourceResolver;
+}>, {
+    captureFrame: typeof captureFrame;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (error: Error) => void;
+    ready: (quality: "thumbnail" | "screen" | "full") => void;
+    originalState: (status: OriginalStatus, reason: string) => void;
+    liveState: (status: LivePhotoStatus) => void;
+    liveEnded: () => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    playing: boolean;
+    active: boolean;
+    enabled: boolean;
+    quality: string;
+    initialImage: () => InitialImage;
+    rendering: boolean;
+    loadEnabled: boolean;
+    requestVersion: number;
+    priority: number;
+    resourcePolicy: () => ImagePolicy;
+    resolveSource: ImageSourceResolver;
+}>>> & {
+    onError?: ((error: Error) => any) | undefined;
+    onReady?: ((quality: "thumbnail" | "screen" | "full") => any) | undefined;
+    onOriginalState?: ((status: OriginalStatus, reason: string) => any) | undefined;
+    onLiveState?: ((status: LivePhotoStatus) => any) | undefined;
+    onLiveEnded?: (() => any) | undefined;
+}, {
+    playing: boolean;
+    active: boolean;
+    quality: ImageQuality;
+    rendering: boolean;
+    requestVersion: number;
+    loadEnabled: boolean;
+    priority: number;
+    resourcePolicy: ImagePolicy;
+    resolveSource: ImageSourceResolver;
+    initialImage: InitialImage;
+    enabled: boolean;
+}, {}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<Required<T>[K]>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/renderers/VideoDomRenderer.vue.d.ts

@@ -0,0 +1,166 @@
+import type { InitialImage } from "../core/resources/initialImage";
+import type { ImagePolicy, ImageSourceResolver, OriginalStatus } from "../core/resources/imagePolicy";
+import type { VideoSourceLoader } from "../core/video/useVideoSource";
+import type { ImageQuality } from "../core/resources/imagePolicy";
+import type { PreviewMedia, PreviewViewportCore } from "../core/types";
+type __VLS_Props = {
+    initialImage?: InitialImage;
+    rendering?: boolean;
+    quality?: ImageQuality;
+    requestVersion?: number;
+    priority?: number;
+    resourcePolicy?: ImagePolicy;
+    resolveSource?: ImageSourceResolver;
+    media: PreviewMedia;
+    videoLoader?: VideoSourceLoader;
+    core: PreviewViewportCore;
+    active?: boolean;
+    enabled?: boolean;
+    autoplay?: boolean;
+    loadEnabled?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    controls?: boolean;
+    controlsVisible?: boolean;
+    teleportControls?: boolean;
+    controlsTarget?: string;
+};
+declare function toggleFullscreen(): Promise<void>;
+declare function captureFrame(): {
+    image: HTMLCanvasElement | HTMLImageElement | HTMLVideoElement;
+    scale: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    initialImage: () => InitialImage;
+    rendering: boolean;
+    quality: string;
+    requestVersion: number;
+    priority: number;
+    resourcePolicy: () => ImagePolicy;
+    resolveSource: ImageSourceResolver;
+    videoLoader: VideoSourceLoader;
+    active: boolean;
+    enabled: boolean;
+    autoplay: boolean;
+    loadEnabled: boolean;
+    muted: boolean;
+    loop: boolean;
+    controls: boolean;
+    controlsVisible: boolean;
+    teleportControls: boolean;
+    controlsTarget: string;
+}>, {
+    togglePlayback: () => void;
+    toggleFullscreen: typeof toggleFullscreen;
+    playback: {
+        state: {
+            playing: boolean;
+            buffering: boolean;
+            duration: number;
+            time: number;
+            buffered: number;
+            muted: boolean;
+            ended: boolean;
+            scrubbing: boolean;
+            scrubTime: number;
+            status: "loading" | "ready" | "error";
+        };
+        seekable: import("vue").ComputedRef<boolean>;
+        displayTime: import("vue").ComputedRef<number>;
+        progress: import("vue").ComputedRef<number>;
+        bufferedProgress: import("vue").ComputedRef<number>;
+        events: {
+            loadedmetadata: () => void;
+            durationchange: () => void;
+            timeupdate: () => void;
+            progress: () => void;
+            loadeddata: () => void;
+            canplay: () => void;
+            play: () => void;
+            playing: () => void;
+            pause: () => void;
+            ended: () => void;
+            waiting: () => void;
+            seeking: () => void;
+            seeked: () => void;
+            volumechange: () => void;
+            error: () => void;
+        };
+        play: () => Promise<void>;
+        pause: () => void;
+        toggle: () => void;
+        beginScrub: () => void;
+        scrub: (time: number) => void;
+        endScrub: (commit?: boolean) => void;
+        toggleMuted: () => void;
+        retry: () => void;
+        dispose: () => void;
+    };
+    captureFrame: typeof captureFrame;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (error: Error) => void;
+    ready: (quality: "thumbnail" | "screen" | "full") => void;
+    originalState: (status: OriginalStatus, reason: string) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    initialImage: () => InitialImage;
+    rendering: boolean;
+    quality: string;
+    requestVersion: number;
+    priority: number;
+    resourcePolicy: () => ImagePolicy;
+    resolveSource: ImageSourceResolver;
+    videoLoader: VideoSourceLoader;
+    active: boolean;
+    enabled: boolean;
+    autoplay: boolean;
+    loadEnabled: boolean;
+    muted: boolean;
+    loop: boolean;
+    controls: boolean;
+    controlsVisible: boolean;
+    teleportControls: boolean;
+    controlsTarget: string;
+}>>> & {
+    onError?: ((error: Error) => any) | undefined;
+    onReady?: ((quality: "thumbnail" | "screen" | "full") => any) | undefined;
+    onOriginalState?: ((status: OriginalStatus, reason: string) => any) | undefined;
+}, {
+    active: boolean;
+    quality: ImageQuality;
+    rendering: boolean;
+    requestVersion: number;
+    loadEnabled: boolean;
+    priority: number;
+    resourcePolicy: ImagePolicy;
+    resolveSource: ImageSourceResolver;
+    initialImage: InitialImage;
+    muted: boolean;
+    enabled: boolean;
+    videoLoader: VideoSourceLoader;
+    autoplay: boolean;
+    loop: boolean;
+    controls: boolean;
+    controlsVisible: boolean;
+    teleportControls: boolean;
+    controlsTarget: string;
+}, {}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<Required<T>[K]>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};