diff --git a/__tests__/lib/images.test.ts b/__tests__/lib/images.test.ts index ad8556ef..38b722e2 100644 --- a/__tests__/lib/images.test.ts +++ b/__tests__/lib/images.test.ts @@ -1,4 +1,7 @@ -import {downloadAndResize, DownloadAndResizeOpts} from '../../src/lib/images' +import { + downloadAndResize, + DownloadAndResizeOpts, +} from '../../src/lib/media/manip' import ImageResizer from '@bam.tech/react-native-image-resizer' import RNFetchBlob from 'rn-fetch-blob' diff --git a/src/lib/api/index.ts b/src/lib/api/index.ts index d800c376..ae156928 100644 --- a/src/lib/api/index.ts +++ b/src/lib/api/index.ts @@ -1,11 +1,16 @@ -import {AppBskyEmbedImages, AppBskyEmbedExternal} from '@atproto/api' +import { + AppBskyEmbedImages, + AppBskyEmbedExternal, + ComAtprotoBlobUpload, +} from '@atproto/api' import {AtUri} from '../../third-party/uri' import {RootStoreModel} from 'state/models/root-store' import {extractEntities} from 'lib/strings/rich-text-detection' import {isNetworkError} from 'lib/strings/errors' import {LinkMeta} from '../link-meta/link-meta' -import {Image} from '../images' +import {Image} from '../media/manip' import {RichText} from '../strings/rich-text' +import {isWeb} from 'platform/detection' export interface ExternalEmbedDraft { uri: string @@ -27,6 +32,25 @@ export async function resolveName(store: RootStoreModel, didOrHandle: string) { return res.data.did } +export async function uploadBlob( + store: RootStoreModel, + blob: string, + encoding: string, +): Promise { + if (isWeb) { + // `blob` should be a data uri + return store.api.com.atproto.blob.upload(convertDataURIToUint8Array(blob), { + encoding, + }) + } else { + // `blob` should be a path to a file in the local FS + return store.api.com.atproto.blob.upload( + blob, // this will be special-cased by the fetch monkeypatch in /src/state/lib/api.ts + {encoding}, + ) + } +} + export async function post( store: RootStoreModel, rawText: string, @@ -61,10 +85,7 @@ export async function post( let i = 1 for (const image of images) { onStateChange?.(`Uploading image #${i++}...`) - const res = await store.api.com.atproto.blob.upload( - image, // this will be special-cased by the fetch monkeypatch in /src/state/lib/api.ts - {encoding: 'image/jpeg'}, - ) + const res = await uploadBlob(store, image, 'image/jpeg') embed.images.push({ image: { cid: res.data.cid, @@ -94,9 +115,10 @@ export async function post( ) } if (encoding) { - const thumbUploadRes = await store.api.com.atproto.blob.upload( - extLink.localThumb.path, // this will be special-cased by the fetch monkeypatch in /src/state/lib/api.ts - {encoding}, + const thumbUploadRes = await uploadBlob( + store, + extLink.localThumb.path, + encoding, ) thumb = { cid: thumbUploadRes.data.cid, @@ -199,3 +221,15 @@ export async function unfollow(store: RootStoreModel, followUri: string) { rkey: followUrip.rkey, }) } + +// helpers +// = + +function convertDataURIToUint8Array(uri: string): Uint8Array { + var raw = window.atob(uri.substring(uri.indexOf(';base64,') + 8)) + var binary = new Uint8Array(new ArrayBuffer(raw.length)) + for (let i = 0; i < raw.length; i++) { + binary[i] = raw.charCodeAt(i) + } + return binary +} diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 2a3043c0..72cba0b6 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -63,3 +63,7 @@ export const STAGING_SUGGESTED_FOLLOWS = ['arcalinea', 'paul', 'paul2'].map( export const DEV_SUGGESTED_FOLLOWS = ['alice', 'bob', 'carla'].map( handle => `${handle}.test`, ) + +export const POST_IMG_MAX_WIDTH = 2000 +export const POST_IMG_MAX_HEIGHT = 2000 +export const POST_IMG_MAX_SIZE = 1000000 diff --git a/src/lib/images.ts b/src/lib/media/manip.ts similarity index 90% rename from src/lib/images.ts rename to src/lib/media/manip.ts index 609e03bd..e44ee390 100644 --- a/src/lib/images.ts +++ b/src/lib/media/manip.ts @@ -1,6 +1,6 @@ import RNFetchBlob from 'rn-fetch-blob' import ImageResizer from '@bam.tech/react-native-image-resizer' -import {Share} from 'react-native' +import {Image as RNImage, Share} from 'react-native' import RNFS from 'react-native-fs' import uuid from 'react-native-uuid' import * as Toast from 'view/com/util/Toast' @@ -135,7 +135,7 @@ export function scaleDownDimensions(dim: Dim, max: Dim): Dim { return {width: dim.width * hScale, height: dim.height * hScale} } -export const saveImageModal = async ({uri}: {uri: string}) => { +export async function saveImageModal({uri}: {uri: string}) { const downloadResponse = await RNFetchBlob.config({ fileCache: true, }).fetch('GET', uri) @@ -153,7 +153,7 @@ export const saveImageModal = async ({uri}: {uri: string}) => { RNFS.unlink(imagePath) } -export const moveToPremanantPath = async (path: string) => { +export async function moveToPremanantPath(path: string) { /* Since this package stores images in a temp directory, we need to move the file to a permanent location. Relevant: IOS bug when trying to open a second time: @@ -164,3 +164,15 @@ export const moveToPremanantPath = async (path: string) => { RNFS.moveFile(path, destinationPath) return destinationPath } + +export function getImageDim(path: string): Promise { + return new Promise((resolve, reject) => { + RNImage.getSize( + path, + (width, height) => { + resolve({width, height}) + }, + reject, + ) + }) +} diff --git a/src/lib/images.web.ts b/src/lib/media/manip.web.ts similarity index 67% rename from src/lib/images.web.ts rename to src/lib/media/manip.web.ts index 4b6d93af..e617d01a 100644 --- a/src/lib/images.web.ts +++ b/src/lib/media/manip.web.ts @@ -39,11 +39,16 @@ export async function resize( } export async function compressIfNeeded( - _img: Image, - _maxSize: number, + img: Image, + maxSize: number, ): Promise { - // TODO - throw new Error('TODO') + if (img.size > maxSize) { + // TODO + throw new Error( + "This image is too large and we haven't implemented compression yet -- sorry!", + ) + } + return img } export interface Dim { @@ -62,7 +67,22 @@ export function scaleDownDimensions(dim: Dim, max: Dim): Dim { return {width: dim.width * hScale, height: dim.height * hScale} } -export const saveImageModal = async (_opts: {uri: string}) => { +export async function saveImageModal(_opts: {uri: string}) { // TODO throw new Error('TODO') } + +export async function moveToPremanantPath(path: string) { + return path +} + +export async function getImageDim(path: string): Promise { + var img = document.createElement('img') + const promise = new Promise((resolve, reject) => { + img.onload = resolve + img.onerror = reject + }) + img.src = path + await promise + return {width: img.width, height: img.height} +} diff --git a/src/view/com/util/images/image-crop-picker/ImageCropPicker.tsx b/src/lib/media/picker.tsx similarity index 67% rename from src/view/com/util/images/image-crop-picker/ImageCropPicker.tsx rename to src/lib/media/picker.tsx index d723fef9..94036603 100644 --- a/src/view/com/util/images/image-crop-picker/ImageCropPicker.tsx +++ b/src/lib/media/picker.tsx @@ -6,6 +6,12 @@ import { } from 'react-native-image-crop-picker' import {RootStoreModel} from 'state/index' import {PickerOpts, CameraOpts, CropperOpts, PickedMedia} from './types' +import { + scaleDownDimensions, + Dim, + compressIfNeeded, + moveToPremanantPath, +} from 'lib/media/manip' export type {PickedMedia} from './types' /** @@ -90,3 +96,46 @@ export async function openCropper( height: item.height, } } + +export async function pickImagesFlow( + store: RootStoreModel, + maxFiles: number, + maxDim: Dim, + maxSize: number, +) { + const items = await openPicker(store, { + multiple: true, + maxFiles, + mediaType: 'photo', + }) + const result = [] + for (const image of items) { + result.push( + await cropAndCompressFlow(store, image.path, image, maxDim, maxSize), + ) + } + return result +} + +export async function cropAndCompressFlow( + store: RootStoreModel, + path: string, + imgDim: Dim, + maxDim: Dim, + maxSize: number, +) { + // choose target dimensions based on the original + // this causes the photo cropper to start with the full image "selected" + const {width, height} = scaleDownDimensions(imgDim, maxDim) + const cropperRes = await openCropper(store, { + mediaType: 'photo', + path, + freeStyleCropEnabled: true, + width, + height, + }) + + const img = await compressIfNeeded(cropperRes, maxSize) + const permanentPath = await moveToPremanantPath(img.path) + return permanentPath +} diff --git a/src/view/com/util/images/image-crop-picker/ImageCropPicker.web.tsx b/src/lib/media/picker.web.tsx similarity index 51% rename from src/view/com/util/images/image-crop-picker/ImageCropPicker.web.tsx rename to src/lib/media/picker.web.tsx index d632590d..aaa08463 100644 --- a/src/view/com/util/images/image-crop-picker/ImageCropPicker.web.tsx +++ b/src/lib/media/picker.web.tsx @@ -4,6 +4,13 @@ import {CropImageModal} from 'state/models/shell-ui' import {PickerOpts, CameraOpts, CropperOpts, PickedMedia} from './types' export type {PickedMedia} from './types' import {RootStoreModel} from 'state/index' +import { + scaleDownDimensions, + getImageDim, + Dim, + compressIfNeeded, + moveToPremanantPath, +} from 'lib/media/manip' interface PickedFile { uri: string @@ -12,21 +19,22 @@ interface PickedFile { } export async function openPicker( - store: RootStoreModel, + _store: RootStoreModel, opts: PickerOpts, -): Promise { +): Promise { const res = await selectFile(opts) - return new Promise((resolve, reject) => { - store.shell.openModal( - new CropImageModal(res.uri, (img?: PickedMedia) => { - if (img) { - resolve(img) - } else { - reject(new Error('Canceled')) - } - }), - ) - }) + const dim = await getImageDim(res.uri) + const mime = extractDataUriMime(res.uri) + return [ + { + mediaType: 'photo', + path: res.uri, + mime, + size: res.size, + width: dim.width, + height: dim.height, + }, + ] } export async function openCamera( @@ -38,13 +46,69 @@ export async function openCamera( } export async function openCropper( - _store: RootStoreModel, - _opts: CropperOpts, + store: RootStoreModel, + opts: CropperOpts, ): Promise { - // const mediaType = opts.mediaType || 'photo' TODO - throw new Error('TODO') + // TODO handle more opts + return new Promise((resolve, reject) => { + store.shell.openModal( + new CropImageModal(opts.path, (img?: PickedMedia) => { + if (img) { + resolve(img) + } else { + reject(new Error('Canceled')) + } + }), + ) + }) } +export async function pickImagesFlow( + store: RootStoreModel, + maxFiles: number, + maxDim: Dim, + maxSize: number, +) { + const items = await openPicker(store, { + multiple: true, + maxFiles, + mediaType: 'photo', + }) + const result = [] + for (const image of items) { + result.push( + await cropAndCompressFlow(store, image.path, image, maxDim, maxSize), + ) + } + return result +} + +export async function cropAndCompressFlow( + store: RootStoreModel, + path: string, + imgDim: Dim, + maxDim: Dim, + maxSize: number, +) { + // choose target dimensions based on the original + // this causes the photo cropper to start with the full image "selected" + const {width, height} = scaleDownDimensions(imgDim, maxDim) + const cropperRes = await openCropper(store, { + mediaType: 'photo', + path, + freeStyleCropEnabled: true, + width, + height, + }) + + const img = await compressIfNeeded(cropperRes, maxSize) + const permanentPath = await moveToPremanantPath(img.path) + return permanentPath +} + +// helpers +// = + function selectFile(opts: PickerOpts): Promise { return new Promise((resolve, reject) => { var input = document.createElement('input') @@ -73,3 +137,7 @@ function selectFile(opts: PickerOpts): Promise { input.click() }) } + +function extractDataUriMime(uri: string): string { + return uri.substring(uri.indexOf(':') + 1, uri.indexOf(';')) +} diff --git a/src/view/com/util/images/image-crop-picker/types.ts b/src/lib/media/types.ts similarity index 100% rename from src/view/com/util/images/image-crop-picker/types.ts rename to src/lib/media/types.ts diff --git a/src/state/models/profile-view.ts b/src/state/models/profile-view.ts index 8630eae5..0988367b 100644 --- a/src/state/models/profile-view.ts +++ b/src/state/models/profile-view.ts @@ -1,5 +1,5 @@ import {makeAutoObservable, runInAction} from 'mobx' -import {PickedMedia} from 'view/com/util/images/image-crop-picker/ImageCropPicker' +import {PickedMedia} from 'lib/media/picker' import { AppBskyActorGetProfile as GetProfile, AppBskyActorProfile as Profile, @@ -137,11 +137,10 @@ export class ProfileViewModel { newUserBanner: PickedMedia | undefined, ) { if (newUserAvatar) { - const res = await this.rootStore.api.com.atproto.blob.upload( - newUserAvatar.path, // this will be special-cased by the fetch monkeypatch in /src/state/lib/api.ts - { - encoding: newUserAvatar.mime, - }, + const res = await apilib.uploadBlob( + this.rootStore, + newUserAvatar.path, + newUserAvatar.mime, ) updates.avatar = { cid: res.data.cid, @@ -149,11 +148,10 @@ export class ProfileViewModel { } } if (newUserBanner) { - const res = await this.rootStore.api.com.atproto.blob.upload( - newUserBanner.path, // this will be special-cased by the fetch monkeypatch in /src/state/lib/api.ts - { - encoding: newUserBanner.mime, - }, + const res = await apilib.uploadBlob( + this.rootStore, + newUserBanner.path, + newUserBanner.mime, ) updates.banner = { cid: res.data.cid, diff --git a/src/view/com/composer/ComposePost.tsx b/src/view/com/composer/ComposePost.tsx index 6431a11a..6f8fe460 100644 --- a/src/view/com/composer/ComposePost.tsx +++ b/src/view/com/composer/ComposePost.tsx @@ -36,11 +36,18 @@ import {s, colors, gradients} from 'lib/styles' import {cleanError} from 'lib/strings/errors' import {detectLinkables, extractEntities} from 'lib/strings/rich-text-detection' import {getLinkMeta} from 'lib/link-meta/link-meta' -import {downloadAndResize} from 'lib/images' -import {PhotoCarouselPicker, cropPhoto} from './photos/PhotoCarouselPicker' +import {getImageDim, downloadAndResize} from 'lib/media/manip' +import {PhotoCarouselPicker} from './photos/PhotoCarouselPicker' +import {cropAndCompressFlow, pickImagesFlow} from '../../../lib/media/picker' import {getMentionAt, insertMentionAt} from 'lib/strings/mention-manip' import {SelectedPhoto} from './SelectedPhoto' import {usePalette} from 'lib/hooks/usePalette' +import { + POST_IMG_MAX_WIDTH, + POST_IMG_MAX_HEIGHT, + POST_IMG_MAX_SIZE, +} from 'lib/constants' +import {isWeb} from 'platform/detection' const MAX_TEXT_LENGTH = 256 const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10} @@ -61,7 +68,7 @@ export const ComposePost = observer(function ComposePost({ onPost?: ComposerOpts['onPost'] onClose: () => void }) { - const {track, screen} = useAnalytics() + const {track} = useAnalytics() const pal = usePalette('default') const store = useStores() const textInput = useRef(null) @@ -174,12 +181,24 @@ export const ComposePost = observer(function ComposePost({ const onPressContainer = () => { textInput.current?.focus() } - const onPressSelectPhotos = () => { + const onPressSelectPhotos = async () => { track('ComposePost:SelectPhotos') - if (isSelectingPhotos) { - setIsSelectingPhotos(false) - } else if (selectedPhotos.length < 4) { - setIsSelectingPhotos(true) + if (isWeb) { + if (selectedPhotos.length < 4) { + const images = await pickImagesFlow( + store, + 4 - selectedPhotos.length, + {width: POST_IMG_MAX_WIDTH, height: POST_IMG_MAX_HEIGHT}, + POST_IMG_MAX_SIZE, + ) + setSelectedPhotos([...selectedPhotos, ...images]) + } + } else { + if (isSelectingPhotos) { + setIsSelectingPhotos(false) + } else if (selectedPhotos.length < 4) { + setIsSelectingPhotos(true) + } } } const onSelectPhotos = (photos: string[]) => { @@ -220,7 +239,19 @@ export const ComposePost = observer(function ComposePost({ } const imgUri = uris.find(uri => /\.(jpe?g|png)$/.test(uri)) if (imgUri) { - const finalImgPath = await cropPhoto(store, imgUri) + let imgDim + try { + imgDim = await getImageDim(imgUri) + } catch (e) { + imgDim = {width: POST_IMG_MAX_WIDTH, height: POST_IMG_MAX_HEIGHT} + } + const finalImgPath = await cropAndCompressFlow( + store, + imgUri, + imgDim, + {width: POST_IMG_MAX_WIDTH, height: POST_IMG_MAX_HEIGHT}, + POST_IMG_MAX_SIZE, + ) onSelectPhotos([...selectedPhotos, finalImgPath]) } } diff --git a/src/view/com/composer/photos/PhotoCarouselPicker.tsx b/src/view/com/composer/photos/PhotoCarouselPicker.tsx index 406f8b04..ab2fdc47 100644 --- a/src/view/com/composer/photos/PhotoCarouselPicker.tsx +++ b/src/view/com/composer/photos/PhotoCarouselPicker.tsx @@ -9,57 +9,24 @@ import { openPicker, openCamera, openCropper, -} from '../../util/images/image-crop-picker/ImageCropPicker' + cropAndCompressFlow, +} from '../../../../lib/media/picker' import { UserLocalPhotosModel, PhotoIdentifier, } from 'state/models/user-local-photos' -import { - compressIfNeeded, - moveToPremanantPath, - scaleDownDimensions, -} from 'lib/images' +import {compressIfNeeded} from 'lib/media/manip' import {usePalette} from 'lib/hooks/usePalette' -import {useStores, RootStoreModel} from 'state/index' +import {useStores} from 'state/index' import { requestPhotoAccessIfNeeded, requestCameraAccessIfNeeded, } from 'lib/permissions' - -const MAX_WIDTH = 2000 -const MAX_HEIGHT = 2000 -const MAX_SIZE = 1000000 - -const IMAGE_PARAMS = { - width: 2000, - height: 2000, - freeStyleCropEnabled: true, -} - -export async function cropPhoto( - store: RootStoreModel, - path: string, - imgWidth = MAX_WIDTH, - imgHeight = MAX_HEIGHT, -) { - // choose target dimensions based on the original - // this causes the photo cropper to start with the full image "selected" - const {width, height} = scaleDownDimensions( - {width: imgWidth, height: imgHeight}, - {width: MAX_WIDTH, height: MAX_HEIGHT}, - ) - const cropperRes = await openCropper(store, { - mediaType: 'photo', - path, - freeStyleCropEnabled: true, - width, - height, - }) - - const img = await compressIfNeeded(cropperRes, MAX_SIZE) - const permanentPath = await moveToPremanantPath(img.path) - return permanentPath -} +import { + POST_IMG_MAX_WIDTH, + POST_IMG_MAX_HEIGHT, + POST_IMG_MAX_SIZE, +} from 'lib/constants' export const PhotoCarouselPicker = ({ selectedPhotos, @@ -92,9 +59,11 @@ export const PhotoCarouselPicker = ({ } const cameraRes = await openCamera(store, { mediaType: 'photo', - ...IMAGE_PARAMS, + width: POST_IMG_MAX_WIDTH, + height: POST_IMG_MAX_HEIGHT, + freeStyleCropEnabled: true, }) - const img = await compressIfNeeded(cameraRes, MAX_SIZE) + const img = await compressIfNeeded(cameraRes, POST_IMG_MAX_SIZE) onSelectPhotos([...selectedPhotos, img.path]) } catch (err: any) { // ignore @@ -106,11 +75,15 @@ export const PhotoCarouselPicker = ({ async (item: PhotoIdentifier) => { track('PhotoCarouselPicker:PhotoSelected') try { - const imgPath = await cropPhoto( + const imgPath = await cropAndCompressFlow( store, item.node.image.uri, - item.node.image.width, - item.node.image.height, + { + width: item.node.image.width, + height: item.node.image.height, + }, + {width: POST_IMG_MAX_WIDTH, height: POST_IMG_MAX_HEIGHT}, + POST_IMG_MAX_SIZE, ) onSelectPhotos([...selectedPhotos, imgPath]) } catch (err: any) { @@ -132,24 +105,16 @@ export const PhotoCarouselPicker = ({ mediaType: 'photo', }) const result = [] - for (const image of items) { - // choose target dimensions based on the original - // this causes the photo cropper to start with the full image "selected" - const {width, height} = scaleDownDimensions( - {width: image.width, height: image.height}, - {width: MAX_WIDTH, height: MAX_HEIGHT}, + result.push( + await cropAndCompressFlow( + store, + image.path, + image, + {width: POST_IMG_MAX_WIDTH, height: POST_IMG_MAX_HEIGHT}, + POST_IMG_MAX_SIZE, + ), ) - const cropperRes = await openCropper(store, { - mediaType: 'photo', - path: image.path, - ...IMAGE_PARAMS, - width, - height, - }) - const finalImg = await compressIfNeeded(cropperRes, MAX_SIZE) - const permanentPath = await moveToPremanantPath(finalImg.path) - result.push(permanentPath) } onSelectPhotos([...selectedPhotos, ...result]) }, [track, store, selectedPhotos, onSelectPhotos]) diff --git a/src/view/com/composer/photos/PhotoCarouselPicker.web.tsx b/src/view/com/composer/photos/PhotoCarouselPicker.web.tsx index 607f8e72..ff4350b0 100644 --- a/src/view/com/composer/photos/PhotoCarouselPicker.web.tsx +++ b/src/view/com/composer/photos/PhotoCarouselPicker.web.tsx @@ -1,158 +1,10 @@ -import React, {useCallback} from 'react' -import {StyleSheet, TouchableOpacity, ScrollView} from 'react-native' -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import { - openPicker, - openCamera, - openCropper, -} from '../../util/images/image-crop-picker/ImageCropPicker' -import {compressIfNeeded, scaleDownDimensions} from 'lib/images' -import {usePalette} from 'lib/hooks/usePalette' -import {useStores, RootStoreModel} from 'state/index' +import React from 'react' -const MAX_WIDTH = 1000 -const MAX_HEIGHT = 1000 -const MAX_SIZE = 300000 +// Not used on Web -const IMAGE_PARAMS = { - width: 1000, - height: 1000, - freeStyleCropEnabled: true, -} - -export async function cropPhoto( - store: RootStoreModel, - path: string, - imgWidth = MAX_WIDTH, - imgHeight = MAX_HEIGHT, -) { - // choose target dimensions based on the original - // this causes the photo cropper to start with the full image "selected" - const {width, height} = scaleDownDimensions( - {width: imgWidth, height: imgHeight}, - {width: MAX_WIDTH, height: MAX_HEIGHT}, - ) - const cropperRes = await openCropper(store, { - mediaType: 'photo', - path, - freeStyleCropEnabled: true, - width, - height, - }) - const img = await compressIfNeeded(cropperRes, MAX_SIZE) - return img.path -} - -export const PhotoCarouselPicker = ({ - selectedPhotos, - onSelectPhotos, -}: { +export const PhotoCarouselPicker = (_opts: { selectedPhotos: string[] onSelectPhotos: (v: string[]) => void }) => { - const pal = usePalette('default') - const store = useStores() - - const handleOpenCamera = useCallback(async () => { - try { - const cameraRes = await openCamera(store, { - mediaType: 'photo', - ...IMAGE_PARAMS, - }) - const img = await compressIfNeeded(cameraRes, MAX_SIZE) - onSelectPhotos([...selectedPhotos, img.path]) - } catch (err: any) { - // ignore - store.log.warn('Error using camera', err) - } - }, [store, selectedPhotos, onSelectPhotos]) - - const handleOpenGallery = useCallback(() => { - openPicker(store, { - multiple: true, - maxFiles: 4 - selectedPhotos.length, - mediaType: 'photo', - }).then(async items => { - const result = [] - - for (const image of items) { - // choose target dimensions based on the original - // this causes the photo cropper to start with the full image "selected" - const {width, height} = scaleDownDimensions( - {width: image.width, height: image.height}, - {width: MAX_WIDTH, height: MAX_HEIGHT}, - ) - const cropperRes = await openCropper(store, { - mediaType: 'photo', - path: image.path, - freeStyleCropEnabled: true, - width, - height, - }) - const finalImg = await compressIfNeeded(cropperRes, MAX_SIZE) - result.push(finalImg.path) - } - onSelectPhotos([...selectedPhotos, ...result]) - }) - }, [store, selectedPhotos, onSelectPhotos]) - - return ( - - - - - - - - - ) + return <> } - -const styles = StyleSheet.create({ - photosContainer: { - width: '100%', - maxHeight: 96, - padding: 8, - overflow: 'hidden', - }, - galleryButton: { - borderWidth: 1, - alignItems: 'center', - justifyContent: 'center', - }, - photoButton: { - width: 75, - height: 75, - marginRight: 8, - borderWidth: 1, - borderRadius: 16, - }, - photo: { - width: 75, - height: 75, - marginRight: 8, - borderRadius: 16, - }, -}) diff --git a/src/view/com/lightbox/Lightbox.tsx b/src/view/com/lightbox/Lightbox.tsx index 894c6b11..7509e07c 100644 --- a/src/view/com/lightbox/Lightbox.tsx +++ b/src/view/com/lightbox/Lightbox.tsx @@ -4,7 +4,7 @@ import {observer} from 'mobx-react-lite' import ImageView from './ImageViewing' import {useStores} from 'state/index' import * as models from 'state/models/shell-ui' -import {saveImageModal} from 'lib/images' +import {saveImageModal} from 'lib/media/manip' import {ImageSource} from './ImageViewing/@types' export const Lightbox = observer(function Lightbox() { diff --git a/src/view/com/modals/EditProfile.tsx b/src/view/com/modals/EditProfile.tsx index add75e89..f822fcfd 100644 --- a/src/view/com/modals/EditProfile.tsx +++ b/src/view/com/modals/EditProfile.tsx @@ -8,7 +8,7 @@ import { } from 'react-native' import LinearGradient from 'react-native-linear-gradient' import {ScrollView, TextInput} from './util' -import {PickedMedia} from '../util/images/image-crop-picker/ImageCropPicker' +import {PickedMedia} from '../../../lib/media/picker' import {Text} from '../util/text/Text' import {ErrorMessage} from '../util/error/ErrorMessage' import {useStores} from 'state/index' @@ -16,7 +16,7 @@ import {ProfileViewModel} from 'state/models/profile-view' import {s, colors, gradients} from 'lib/styles' import {enforceLen} from 'lib/strings/helpers' import {MAX_DISPLAY_NAME, MAX_DESCRIPTION} from 'lib/constants' -import {compressIfNeeded} from 'lib/images' +import {compressIfNeeded} from 'lib/media/manip' import {UserBanner} from '../util/UserBanner' import {UserAvatar} from '../util/UserAvatar' import {usePalette} from 'lib/hooks/usePalette' diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx index 3c655109..2af02695 100644 --- a/src/view/com/modals/Modal.web.tsx +++ b/src/view/com/modals/Modal.web.tsx @@ -21,7 +21,10 @@ export const Modal = observer(function Modal() { return null } - const onClose = () => { + const onPressMask = () => { + if (store.shell.activeModal?.name === 'crop-image') { + return // dont close on mask presses during crop + } store.shell.closeModal() } const onInnerPress = () => { @@ -70,7 +73,7 @@ export const Modal = observer(function Modal() { } return ( - + {element} diff --git a/src/view/com/modals/crop-image/CropImage.web.tsx b/src/view/com/modals/crop-image/CropImage.web.tsx index e43f3739..c774b94e 100644 --- a/src/view/com/modals/crop-image/CropImage.web.tsx +++ b/src/view/com/modals/crop-image/CropImage.web.tsx @@ -38,6 +38,7 @@ export function Component({ const pal = usePalette('default') const [as, setAs] = React.useState(AspectRatio.Square) const [scale, setScale] = React.useState(1) + const editorRef = React.useRef(null) const doSetAs = (v: AspectRatio) => () => setAs(v) @@ -46,8 +47,20 @@ export function Component({ store.shell.closeModal() } const onPressDone = () => { - console.log('TODO') - onSelect(undefined) // TODO + const canvas = editorRef.current?.getImageScaledToCanvas() + if (canvas) { + const dataUri = canvas.toDataURL('image/jpeg') + onSelect({ + mediaType: 'photo', + path: dataUri, + mime: 'image/jpeg', + size: Math.round((dataUri.length * 3) / 4), // very rough estimate + width: DIMS[as].width, + height: DIMS[as].height, + }) + } else { + onSelect(undefined) + } store.shell.closeModal() } @@ -61,13 +74,15 @@ export function Component({ } return ( - + @@ -126,6 +141,9 @@ const styles = StyleSheet.create({ cropper: { marginLeft: 'auto', marginRight: 'auto', + borderWidth: 1, + borderRadius: 4, + overflow: 'hidden', }, cropperSquare: { width: 400, diff --git a/src/view/com/util/PostEmbeds/index.tsx b/src/view/com/util/PostEmbeds/index.tsx index 031f01e8..d2186b60 100644 --- a/src/view/com/util/PostEmbeds/index.tsx +++ b/src/view/com/util/PostEmbeds/index.tsx @@ -13,7 +13,7 @@ import {ImageLayoutGrid} from '../images/ImageLayoutGrid' import {ImagesLightbox} from 'state/models/shell-ui' import {useStores} from 'state/index' import {usePalette} from 'lib/hooks/usePalette' -import {saveImageModal} from 'lib/images' +import {saveImageModal} from 'lib/media/manip' import YoutubeEmbed from './YoutubeEmbed' import ExternalLinkEmbed from './ExternalLinkEmbed' import {getYoutubeVideoId} from 'lib/strings/url-helpers' diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx index 9b8dd3de..0c5c9d25 100644 --- a/src/view/com/util/UserAvatar.tsx +++ b/src/view/com/util/UserAvatar.tsx @@ -9,7 +9,7 @@ import { openCropper, openPicker, PickedMedia, -} from './images/image-crop-picker/ImageCropPicker' +} from '../../../lib/media/picker' import { requestPhotoAccessIfNeeded, requestCameraAccessIfNeeded, diff --git a/src/view/com/util/UserBanner.tsx b/src/view/com/util/UserBanner.tsx index dc140b03..c17294f3 100644 --- a/src/view/com/util/UserBanner.tsx +++ b/src/view/com/util/UserBanner.tsx @@ -10,7 +10,7 @@ import { openCropper, openPicker, PickedMedia, -} from './images/image-crop-picker/ImageCropPicker' +} from '../../../lib/media/picker' import {useStores} from 'state/index' import { requestPhotoAccessIfNeeded,