feat(private-room): add image grid and swipe gallery
Render unlocked albums as adaptive nine-image grids and open the selected source image in the Gallery. Add pointer-driven swipe thresholds, edge resistance, animated snapping, adjacent-image loading, reduced-motion support, and coverage for filtering and navigation.
This commit is contained in:
@@ -0,0 +1,72 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
import {
|
||||
getResistedGalleryDragDistance,
|
||||
resolveGallerySwipeDirection,
|
||||
} from "../private-album-gallery-motion";
|
||||
|
||||
describe("private album Gallery motion", () => {
|
||||
it("switches after crossing the viewport distance threshold", () => {
|
||||
expect(
|
||||
resolveGallerySwipeDirection({
|
||||
distance: -72,
|
||||
durationMs: 500,
|
||||
viewportWidth: 390,
|
||||
hasPrevious: true,
|
||||
hasNext: true,
|
||||
}),
|
||||
).toBe(1);
|
||||
expect(
|
||||
resolveGallerySwipeDirection({
|
||||
distance: 72,
|
||||
durationMs: 500,
|
||||
viewportWidth: 390,
|
||||
hasPrevious: true,
|
||||
hasNext: true,
|
||||
}),
|
||||
).toBe(-1);
|
||||
});
|
||||
|
||||
it("switches on a short fast swipe but not a slow short drag", () => {
|
||||
const baseInput = {
|
||||
distance: -30,
|
||||
viewportWidth: 390,
|
||||
hasPrevious: true,
|
||||
hasNext: true,
|
||||
};
|
||||
|
||||
expect(
|
||||
resolveGallerySwipeDirection({ ...baseInput, durationMs: 50 }),
|
||||
).toBe(1);
|
||||
expect(
|
||||
resolveGallerySwipeDirection({ ...baseInput, durationMs: 500 }),
|
||||
).toBe(0);
|
||||
});
|
||||
|
||||
it("does not move beyond the first or last image", () => {
|
||||
expect(
|
||||
resolveGallerySwipeDirection({
|
||||
distance: 100,
|
||||
durationMs: 100,
|
||||
viewportWidth: 390,
|
||||
hasPrevious: false,
|
||||
hasNext: true,
|
||||
}),
|
||||
).toBe(0);
|
||||
expect(
|
||||
resolveGallerySwipeDirection({
|
||||
distance: -100,
|
||||
durationMs: 100,
|
||||
viewportWidth: 390,
|
||||
hasPrevious: true,
|
||||
hasNext: false,
|
||||
}),
|
||||
).toBe(0);
|
||||
});
|
||||
|
||||
it("applies resistance only while pulling past an edge", () => {
|
||||
expect(getResistedGalleryDragDistance(100, false, true)).toBeCloseTo(28);
|
||||
expect(getResistedGalleryDragDistance(-100, true, false)).toBeCloseTo(-28);
|
||||
expect(getResistedGalleryDragDistance(-100, false, true)).toBe(-100);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user