@lazycatcloud/vue-media-preview 0.1.3 → 0.1.5

package/README.md

@@ -22,6 +22,7 @@ Demo 内置 48 个日期分组条目，复用 16 份图片、视频和实况素
 
 - **容器展开 / 共享元素转场**：图片从卡片的位置、裁切和圆角连续展开到完整预览；关闭时收回当前图片对应的卡片。
 - **Canvas 图片**：当前画面优先，再预取邻页；下载可取消并有并发、流量和像素保护，原图状态以真实解码结果为准。
+- **GIF 动画**：按文件头识别 GIF，在当前页使用原生图片层播放，沿用缩放、平移和旋转；切页与转场期间保留静态 Canvas，播放地址随缓存资源释放。
 - **三页翻页轨道**：当前项及相邻两项，拖动跟手，松手根据距离和速度翻页或回弹，首尾有阻尼。
 - **海量列表**：日期分组虚拟时间线、分页事件、按 ID 定位收回；列表追加/重排保留当前媒体，删除当前项切到邻项。
 - **手势**：单击工具栏、双击缩放、双指缩放（适屏大小的 1–16 倍，越界阻尼与松手回弹）、放大后平移、越过水平边缘切页并同步缩回 1 倍、适配比例下拉关闭；图片和内联视频均支持缩放。

package/dist/components/MediaPreview.vue.d.ts

@@ -117,10 +117,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_WithDefaults<__VLS
         kind: "unavailable";
     };
 }>>> & {
+    onChange?: ((index: number) => any) | undefined;
     onError?: ((error: Error, media: PreviewMedia) => any) | undefined;
     onReady?: ((index: number, quality: "full" | "thumbnail" | "screen") => any) | undefined;
     onOriginalState?: ((media: PreviewMedia, status: OriginalStatus, reason: string) => any) | undefined;
-    onChange?: ((index: number) => any) | undefined;
     onClose?: (() => any) | undefined;
     onOpen?: ((index: number) => any) | undefined;
     onClosing?: (() => any) | undefined;

package/dist/components/video/VideoControls.vue.d.ts

@@ -1,8 +1,11 @@
+import type { VideoQualityState } from "../../core/video/source/types";
 import type { useVideoPlayback } from "../../core/video/useVideoPlayback";
 type __VLS_Props = {
     playback: ReturnType<typeof useVideoPlayback>;
     fullscreen: boolean;
     canFullscreen: boolean;
+    quality: VideoQualityState;
+    visible: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     fullscreen: () => void;

package/dist/components/video/VideoQualityMenu.vue.d.ts

@@ -0,0 +1,17 @@
+import type { VideoQualityState } from "../../core/video/source/types";
+type __VLS_Props = {
+    quality: Exclude<VideoQualityState, {
+        kind: "unavailable";
+    }>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>>, {}, {}>;
+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;
+    };
+};

package/dist/core/resources/image/gif.d.ts

@@ -0,0 +1,4 @@
+import type { AnimatedImageResource } from "./types";
+/** Asset URLs and response MIME types do not reliably identify the file format. */
+export declare function isGif(signature: Uint8Array): boolean;
+export declare function prepareGifResource(image: HTMLImageElement, blob: Blob, signal: AbortSignal): Promise<AnimatedImageResource>;

package/dist/core/resources/image/types.d.ts

@@ -0,0 +1,16 @@
+/** Geometry and still pixels also serve snapshots and shared-element transitions. */
+export interface StaticImageResource {
+    image: HTMLImageElement;
+    source: HTMLImageElement | ImageBitmap;
+    motionSource: HTMLImageElement | ImageBitmap;
+    bytes: number;
+    dispose: () => void;
+}
+export interface AnimatedImageResource extends StaticImageResource {
+    animation: {
+        kind: "gif";
+        url: string;
+    };
+}
+/** Custom static loaders keep their existing contract. */
+export type ImageResource = StaticImageResource | AnimatedImageResource;

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

@@ -1,11 +1,5 @@
-/** The DOM image supplies geometry and the public media handle; Canvas uses the prepared pixel source. */
-export interface ImageResource {
-    image: HTMLImageElement;
-    source: HTMLImageElement | ImageBitmap;
-    motionSource: HTMLImageElement | ImageBitmap;
-    bytes: number;
-    dispose: () => void;
-}
-export declare function imageElementResource(image: HTMLImageElement): ImageResource;
+import type { ImageResource, StaticImageResource } from "./image/types";
+export type { ImageResource } from "./image/types";
+export declare function imageElementResource(image: HTMLImageElement): StaticImageResource;
 /** Blob decoding avoids Chromium's scale-dependent lazy JPEG decode during drawImage. */
 export declare function prepareImageResource(image: HTMLImageElement, blob: Blob, signal: AbortSignal): Promise<ImageResource>;

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

@@ -1,3 +1,5 @@
 import type { PreviewSize } from "../types";
-/** Snapshot the native player's object-fit:contain pixels before pausing or detaching it. */
+/** Copy object-fit:contain pixels without changing playback. */
+export declare function drawVideoFrame(video: HTMLVideoElement, canvas: HTMLCanvasElement, size: PreviewSize): void;
+/** Snapshot before pausing for the preview's closing transition. */
 export declare function captureVideoFrame(video: HTMLVideoElement, size: PreviewSize): HTMLCanvasElement;

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

@@ -0,0 +1,8 @@
+import type { PreviewSize } from "../types";
+/** Keep the last visible frame across source replacement, without pausing playback. */
+export declare function createVideoFrameTransition(video: () => HTMLVideoElement, canvas: () => HTMLCanvasElement, size: () => PreviewSize): {
+    active: import("vue").Ref<boolean>;
+    run: (change: () => void) => void;
+    clear: () => void;
+    snapshot: () => HTMLCanvasElement;
+};

package/dist/core/video/source/types.d.ts

@@ -1,8 +1,26 @@
 import type { PreviewMedia } from "../../types";
+export interface VideoQualityOption {
+    id: string;
+    label: string;
+}
+/** Empty activeId means that the selected quality option has not taken effect yet. */
+export type VideoQualityState = {
+    kind: "unavailable";
+} | {
+    kind: "fixed";
+    label: string;
+} | {
+    kind: "available";
+    options: readonly VideoQualityOption[];
+    selectedId: string;
+    activeId: string;
+    select: (id: string) => void;
+};
 /** Hosts own transport; the component owns playback and the effective timeline. */
-export type VideoSourceLoader = (video: HTMLVideoElement, media: PreviewMedia, reportError: (error: Error) => void, reportDuration: (seconds: number) => void) => () => void;
+export type VideoSourceLoader = (video: HTMLVideoElement, media: PreviewMedia, reportError: (error: Error) => void, reportDuration: (seconds: number) => void, reportQuality: (quality: VideoQualityState) => void) => () => void;
 export interface VideoSourceObserver {
     error: (error: Error) => void;
     duration: (seconds: number) => void;
+    quality: (quality: VideoQualityState) => void;
     reset: () => void;
 }

package/dist/index.d.ts

@@ -17,3 +17,4 @@ export type { ImageResource } from "./core/resources/imageResource";
 export type { TimelineGroup, VirtualTimelineHandle } from "./core/timeline/layout";
 export { nativeVideoSource } from "./core/video/useVideoSource";
 export type { VideoSourceLoader } from "./core/video/useVideoSource";
+export type { VideoQualityOption, VideoQualityState } from "./core/video/source/types";

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

@@ -4,6 +4,7 @@ import type { RetainedPreviewFrame, PreviewMedia, PreviewViewportCore } from "..
 type __VLS_Props = {
     media: PreviewMedia;
     core: PreviewViewportCore;
+    active?: boolean;
     quality?: ImageQuality;
     rendering?: boolean;
     requestVersion?: number;
@@ -20,6 +21,7 @@ declare function captureFrame(): {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
     quality: string;
+    active: boolean;
     initialImage: () => InitialImage;
     rendering: boolean;
     loadEnabled: boolean;
@@ -37,6 +39,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_WithDefaults<__V
     originalState: (status: OriginalStatus, reason: string) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
     quality: string;
+    active: boolean;
     initialImage: () => InitialImage;
     rendering: boolean;
     loadEnabled: boolean;
@@ -50,6 +53,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_WithDefaults<__V
     onReady?: ((quality: "full" | "thumbnail" | "screen") => any) | undefined;
     onOriginalState?: ((status: OriginalStatus, reason: string) => any) | undefined;
 }, {
+    active: boolean;
     quality: ImageQuality;
     rendering: boolean;
     requestVersion: number;

package/dist/renderers/image/AnimatedImageLayer.vue.d.ts

@@ -0,0 +1,17 @@
+import type { PreviewViewportCore } from "../../core/types";
+type __VLS_Props = {
+    core: PreviewViewportCore;
+    src: string;
+    title: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_TypePropsToOption<__VLS_Props>, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>>, {}, {}>;
+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;
+    };
+};