diff --git a/src/state/gallery.ts b/src/state/gallery.ts index a376ae641a..ed0c5d8229 100644 --- a/src/state/gallery.ts +++ b/src/state/gallery.ts @@ -15,6 +15,7 @@ import { manipulateAsync, SaveFormat, } from 'expo-image-manipulator' +import {nanoid} from 'nanoid/non-secure' import {POST_IMG_MAX} from '#/lib/constants' import {getImageDim} from '#/lib/media/manip' @@ -26,13 +27,17 @@ export type ImageTransformation = Partial< ActionCrop & ActionExtent & ActionFlip & ActionResize & ActionRotate > -export type ImageSource = { +export type ImageMeta = { path: string width: number height: number mime: string } +export type ImageSource = ImageMeta & { + id: string +} + type ComposerImageBase = { alt: string source: ImageSource @@ -41,7 +46,7 @@ type ComposerImageWithoutTransformation = ComposerImageBase & { transformed?: undefined } type ComposerImageWithTransformation = ComposerImageBase & { - transformed: ImageSource + transformed: ImageMeta transformations?: ImageTransformation } @@ -54,11 +59,12 @@ const imageCacheDirectory = isNative : null export async function createComposerImage( - raw: ImageSource, + raw: ImageMeta, ): Promise { return { alt: '', source: { + id: nanoid(), path: await moveIfNecessary(raw.path), width: raw.width, height: raw.height, @@ -78,6 +84,7 @@ export function createInitialImages( return { alt: '', source: { + id: nanoid(), path: uri, width: width, height: height, @@ -96,6 +103,7 @@ export async function pasteImage( return { alt: '', source: { + id: nanoid(), path: uri, width: width, height: height, @@ -199,7 +207,7 @@ export function resetImageManipulation( return img } -export async function compressImage(img: ComposerImage): Promise { +export async function compressImage(img: ComposerImage): Promise { const source = img.transformed || img.source const [w, h] = containImageRes(source.width, source.height, POST_IMG_MAX) diff --git a/src/view/com/composer/photos/Gallery.tsx b/src/view/com/composer/photos/Gallery.tsx index 250b549258..3840e77ee1 100644 --- a/src/view/com/composer/photos/Gallery.tsx +++ b/src/view/com/composer/photos/Gallery.tsx @@ -91,7 +91,7 @@ const GalleryInner = ({images, containerInfo, onChange}: GalleryInnerProps) => { {images.map((image, index) => { return (