octo/tooot
1
0
Fork 0
mirror of https://github.com/tooot-app/app synced 2025-06-05 22:19:13 +02:00
Code Issues Projects Releases Wiki Activity

Using proper image transformation

Browse Source
This commit is contained in:
Zhiyuan Zheng
2022-06-09 21:33:10 +02:00
parent bd5a0948cf
commit b5a5ce01a3
13 changed files with 104 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/Screens.tsx
View File

@ -178,11 +178,11 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
}
let text: string | undefined = undefined
let media: { path: string; mime: string }[] = []
let media: { uri: string; mime: string }[] = []
const typesImage = ['png', 'jpg', 'jpeg', 'gif']
const typesVideo = ['mp4', 'm4v', 'mov', 'webm', 'mpeg']
const filterMedia = ({ path, mime }: { path: string; mime: string }) => {
const filterMedia = ({ uri, mime }: { uri: string; mime: string }) => {
if (mime.startsWith('image/')) {
if (!typesImage.includes(mime.split('/')[1])) {
console.warn('Image type not supported:', mime.split('/')[1])
@ -195,7 +195,7 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
})
return
}
media.push({ path, mime })
media.push({ uri, mime })
} else if (mime.startsWith('video/')) {
if (!typesVideo.includes(mime.split('/')[1])) {
console.warn('Video type not supported:', mime.split('/')[1])
@ -208,17 +208,17 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
})
return
}
media.push({ path, mime })
media.push({ uri, mime })
} else {
if (typesImage.includes(path.split('.').pop() || '')) {
media.push({ path: path, mime: 'image/jpg' })
if (typesImage.includes(uri.split('.').pop() || '')) {
media.push({ uri, mime: 'image/jpg' })
return
}
if (typesVideo.includes(path.split('.').pop() || '')) {
media.push({ path: path, mime: 'video/mp4' })
if (typesVideo.includes(uri.split('.').pop() || '')) {
media.push({ uri, mime: 'video/mp4' })
return
}
text = !text ? path : text.concat(text, `\n${path}`)
text = !text ? uri : text.concat(text, `\n${uri}`)
}
}
@ -230,7 +230,7 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
for (const d of item.data) {
if (typeof d !== 'string') {
filterMedia({ path: d.data, mime: d.mimeType })
filterMedia({ uri: d.data, mime: d.mimeType })
}
}
break
@ -245,7 +245,7 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
tempData = item.data
}
for (const d of item.data) {
filterMedia({ path: d, mime: item.mimeType })
filterMedia({ uri: d, mime: item.mimeType })
}
break
}

47
src/components/mediaSelector.ts
View File

@ -2,9 +2,10 @@ import analytics from '@components/analytics'
import { ActionSheetOptions } from '@expo/react-native-action-sheet'
import { store } from '@root/store'
import { getInstanceConfigurationStatusMaxAttachments } from '@utils/slices/instancesSlice'
import { manipulateAsync, SaveFormat } from 'expo-image-manipulator'
import * as ExpoImagePicker from 'expo-image-picker'
import i18next from 'i18next'
import { Alert, Linking } from 'react-native'
import { Alert, Linking, Platform } from 'react-native'
import ImagePicker, {
Image,
ImageOrVideo
@ -27,7 +28,7 @@ const mediaSelector = async ({
maximum,
indicateMaximum = false,
showActionSheetWithOptions
}: Props): Promise<ImageOrVideo[]> => {
}: Props): Promise<({ uri: string } & Omit<ImageOrVideo, 'path'>)[]> => {
const checkLibraryPermission = async (): Promise<boolean> => {
const { status } =
await ExpoImagePicker.requestMediaLibraryPermissionsAsync()
@ -110,17 +111,40 @@ const mediaSelector = async ({
multiple: true,
minFiles: 1,
maxFiles: _maximum,
loadingLabelText: '',
compressImageMaxWidth: 4096,
compressImageMaxHeight: 4096
smartAlbums: ['UserLibrary'],
writeTempFile: false,
loadingLabelText: ''
}).catch(() => {})
if (!images) {
return reject()
}
// react-native-image-crop-picker may return HEIC as JPG that causes upload failure
if (Platform.OS === 'ios') {
for (const [index, image] of images.entries()) {
if (image.mime === 'image/heic') {
const converted = await manipulateAsync(image.sourceURL!, [], {
base64: false,
compress: 0.8,
format: SaveFormat.JPEG
})
images[index] = {
...images[index],
sourceURL: converted.uri,
mime: 'image/jpeg'
}
}
}
}
if (!resize) {
return resolve(images)
return resolve(
images.map(image => ({
...image,
uri: image.sourceURL || `file://${image.path}`
}))
)
} else {
const croppedImages: Image[] = []
for (const image of images) {
@ -135,7 +159,12 @@ const mediaSelector = async ({
}).catch(() => {})
croppedImage && croppedImages.push(croppedImage)
}
return resolve(croppedImages)
return resolve(
croppedImages.map(image => ({
...image,
uri: `file://${image.path}`
}))
)
}
}
const selectVideo = async () => {
@ -146,7 +175,9 @@ const mediaSelector = async ({
}).catch(() => {})
if (video) {
return resolve([video])
return resolve([
{ ...video, uri: video.sourceURL || `file://${video.path}` }
])
} else {
return reject()
}

4
src/screens/Compose/EditAttachment/Image.tsx
View File

@ -128,8 +128,8 @@ const ComposeEditAttachmentImage: React.FC<Props> = ({ index }) => {
height: imageDimensionis.height
}}
source={{
uri: theAttachmentLocal?.path
? `file://${theAttachmentLocal?.path}`
uri: theAttachmentLocal?.uri
? theAttachmentLocal.uri
: theAttachmentRemote?.preview_url
}}
/>

2
src/screens/Compose/EditAttachment/Root.tsx
View File

@ -34,7 +34,7 @@ const ComposeEditAttachmentRoot: React.FC<Props> = ({ index }) => {
video={
video.local
? ({
url: `file://${video.local.path}`,
url: video.local.uri,
preview_url: video.local.local_thumbnail,
blurhash: video.remote?.blurhash
} as Mastodon.AttachmentVideo)

18
src/screens/Compose/Root/Footer/addAttachment.ts
View File

@ -22,28 +22,25 @@ export const uploadAttachment = async ({
media
}: {
composeDispatch: Dispatch<ComposeAction>
media: Pick<ImageOrVideo, 'path' | 'mime' | 'width' | 'height'>
media: { uri: string } & Pick<ImageOrVideo, 'mime' | 'width' | 'height'>
}) => {
const hash = await Crypto.digestStringAsync(
Crypto.CryptoDigestAlgorithm.SHA256,
media.path + Math.random()
media.uri + Math.random()
)
let attachmentType: string
switch (media.mime.split('/')[0]) {
case 'image':
attachmentType = `image/${media.path.split('.')[1]}`
composeDispatch({
type: 'attachment/upload/start',
payload: {
local: { ...media, type: 'image', local_thumbnail: media.path, hash },
local: { ...media, type: 'image', local_thumbnail: media.uri, hash },
uploading: true
}
})
break
case 'video':
attachmentType = `video/${media.path.split('.')[1]}`
VideoThumbnails.getThumbnailAsync(media.path)
VideoThumbnails.getThumbnailAsync(media.uri)
.then(({ uri, width, height }) =>
composeDispatch({
type: 'attachment/upload/start',
@ -71,7 +68,6 @@ export const uploadAttachment = async ({
)
break
default:
attachmentType = 'unknown'
composeDispatch({
type: 'attachment/upload/start',
payload: {
@ -105,9 +101,9 @@ export const uploadAttachment = async ({
const formData = new FormData()
formData.append('file', {
uri: `file://${media.path}`,
name: attachmentType,
type: attachmentType
uri: media.uri,
name: media.uri.match(new RegExp(/.*\/(.*)/))?.[1] || 'file.jpg',
type: media.mime
} as any)
return apiInstance<Mastodon.Attachment>({

2
src/screens/Compose/Root/Header/TextInput.tsx
View File

@ -90,7 +90,7 @@ const ComposeTextInput: React.FC = () => {
uploadAttachment({
composeDispatch,
media: {
path: file.uri,
uri: file.uri,
mime: file.type,
width: 100,
height: 100

2
src/screens/Compose/utils/reducer.ts
View File

@ -58,7 +58,7 @@ const composeReducer = (
attachments: {
...state.attachments,
uploads: state.attachments.uploads.map(upload =>
upload.local?.path === action.payload.local?.path
upload.local?.uri === action.payload.local?.uri
? { ...upload, remote: action.payload.remote, uploading: false }
: upload
)

12
src/screens/Compose/utils/types.d.ts vendored
View File

@ -2,11 +2,11 @@ import { ImageOrVideo } from 'react-native-image-crop-picker'
export type ExtendedAttachment = {
remote?: Mastodon.Attachment
local?: Pick<ImageOrVideo, 'path' | 'width' | 'height' | 'mime'> & {
type: 'image' | 'video' | 'unknown'
local_thumbnail?: string
hash?: string
}
local?: { uri: string } & Pick<ImageOrVideo, 'width' | 'height' | 'mime'> & {
type: 'image' | 'video' | 'unknown'
local_thumbnail?: string
hash?: string
}
uploading?: boolean
}
@ -123,7 +123,7 @@ export type ComposeAction =
type: 'attachment/upload/end'
payload: {
remote: Mastodon.Attachment
local: Pick<ImageOrVideo, 'path' | 'width' | 'height' | 'mime'>
local: { uri: string } & Pick<ImageOrVideo, 'width' | 'height' | 'mime'>
}
}
| {

2
src/screens/Tabs/Me/Profile/Root/AvatarHeader.tsx
View File

@ -46,7 +46,7 @@ const ProfileAvatarHeader: React.FC<Props> = ({ type, messageRef }) => {
failed: true
},
type,
data: image[0].path
data: image[0].uri
})
}}
/>

2
src/utils/navigation/navigators.ts
View File

@ -42,7 +42,7 @@ export type RootStackParamList = {
| {
type: 'share'
text?: string
media?: { path: string; mime: string }[]
media?: { uri: string; mime: string }[]
}
| undefined
'Screen-ImagesViewer': {