mirror of https://github.com/tooot-app/app
Use the new gap option
This commit is contained in:
parent
b679c0760f
commit
242c75079a
|
@ -499,9 +499,9 @@ PODS:
|
||||||
- React
|
- React
|
||||||
- RNSVG (13.8.0):
|
- RNSVG (13.8.0):
|
||||||
- React-Core
|
- React-Core
|
||||||
- SDWebImage (5.15.0):
|
- SDWebImage (5.15.2):
|
||||||
- SDWebImage/Core (= 5.15.0)
|
- SDWebImage/Core (= 5.15.2)
|
||||||
- SDWebImage/Core (5.15.0)
|
- SDWebImage/Core (5.15.2)
|
||||||
- SDWebImageAVIFCoder (0.9.5):
|
- SDWebImageAVIFCoder (0.9.5):
|
||||||
- libavif (>= 0.9.1)
|
- libavif (>= 0.9.1)
|
||||||
- SDWebImage (~> 5.10)
|
- SDWebImage (~> 5.10)
|
||||||
|
@ -769,7 +769,7 @@ EXTERNAL SOURCES:
|
||||||
:path: "../node_modules/react-native/ReactCommon/yoga"
|
:path: "../node_modules/react-native/ReactCommon/yoga"
|
||||||
|
|
||||||
SPEC CHECKSUMS:
|
SPEC CHECKSUMS:
|
||||||
boost: a7c83b31436843459a1961bfd74b96033dc77234
|
boost: 57d2868c099736d80fcd648bf211b4431e51a558
|
||||||
DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
|
DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
|
||||||
EXApplication: d8f53a7eee90a870a75656280e8d4b85726ea903
|
EXApplication: d8f53a7eee90a870a75656280e8d4b85726ea903
|
||||||
EXAV: f1f69397ecdcf44cfacd4ff5d338cd1b96891e87
|
EXAV: f1f69397ecdcf44cfacd4ff5d338cd1b96891e87
|
||||||
|
@ -805,7 +805,7 @@ SPEC CHECKSUMS:
|
||||||
libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef
|
libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef
|
||||||
MMKV: 7f34558bbb5a33b0eaefae2de4b6a20a2ffdad6f
|
MMKV: 7f34558bbb5a33b0eaefae2de4b6a20a2ffdad6f
|
||||||
MMKVCore: ddf41b9d9262f058419f9ba7598719af56c02cd3
|
MMKVCore: ddf41b9d9262f058419f9ba7598719af56c02cd3
|
||||||
RCT-Folly: 0080d0a6ebf2577475bda044aa59e2ca1f909cda
|
RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
|
||||||
RCTRequired: c154ebcfbf41d6fef86c52674fc1aa08837ff538
|
RCTRequired: c154ebcfbf41d6fef86c52674fc1aa08837ff538
|
||||||
RCTTypeSafety: 3063e5a1e5b1dc2cbeda5c8f8926c0ad1a6b0871
|
RCTTypeSafety: 3063e5a1e5b1dc2cbeda5c8f8926c0ad1a6b0871
|
||||||
React: 0a1a36e8e81cfaac244ed88b97f23ab56e5434f0
|
React: 0a1a36e8e81cfaac244ed88b97f23ab56e5434f0
|
||||||
|
@ -853,7 +853,7 @@ SPEC CHECKSUMS:
|
||||||
RNSentry: 7e90aec2633d2fdad8aeb839c9915e4376fd27d1
|
RNSentry: 7e90aec2633d2fdad8aeb839c9915e4376fd27d1
|
||||||
RNShareMenu: cb9dac548c8bf147d06f0bf07296ad51ea9f5fc3
|
RNShareMenu: cb9dac548c8bf147d06f0bf07296ad51ea9f5fc3
|
||||||
RNSVG: c1e76b81c76cdcd34b4e1188852892dc280eb902
|
RNSVG: c1e76b81c76cdcd34b4e1188852892dc280eb902
|
||||||
SDWebImage: 9bec4c5cdd9579e1f57104735ee0c37df274d593
|
SDWebImage: 8ab87d4b3e5cc4927bd47f78db6ceb0b94442577
|
||||||
SDWebImageAVIFCoder: d759e21cf4efb640cc97250566aa556ad8bb877c
|
SDWebImageAVIFCoder: d759e21cf4efb640cc97250566aa556ad8bb877c
|
||||||
SDWebImageSVGCoder: 6fc109f9c2a82ab44510fff410b88b1a6c271ee8
|
SDWebImageSVGCoder: 6fc109f9c2a82ab44510fff410b88b1a6c271ee8
|
||||||
SDWebImageWebPCoder: 18503de6621dd2c420d680e33d46bf8e1d5169b0
|
SDWebImageWebPCoder: 18503de6621dd2c420d680e33d46bf8e1d5169b0
|
||||||
|
|
|
@ -60,15 +60,23 @@ const AttachmentAudio: React.FC<Props> = ({ total, index, sensitiveShown, audio
|
||||||
return (
|
return (
|
||||||
<View
|
<View
|
||||||
accessibilityLabel={audio.description}
|
accessibilityLabel={audio.description}
|
||||||
style={[
|
style={{
|
||||||
styles.base,
|
flex: 1,
|
||||||
{
|
flexDirection: 'row',
|
||||||
backgroundColor: colors.disabled,
|
backgroundColor: colors.disabled,
|
||||||
aspectRatio: aspectRatio({ total, index, ...audio.meta?.original })
|
aspectRatio: aspectRatio({ total, index, ...audio.meta?.original })
|
||||||
}
|
}}
|
||||||
]}
|
|
||||||
>
|
>
|
||||||
<View style={styles.overlay}>
|
<View
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
flex: 1,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center'
|
||||||
|
}}
|
||||||
|
>
|
||||||
{sensitiveShown ? (
|
{sensitiveShown ? (
|
||||||
audio.blurhash ? (
|
audio.blurhash ? (
|
||||||
<GracefullyImage
|
<GracefullyImage
|
||||||
|
@ -88,7 +96,7 @@ const AttachmentAudio: React.FC<Props> = ({ total, index, sensitiveShown, audio
|
||||||
default: { uri: audio.preview_url },
|
default: { uri: audio.preview_url },
|
||||||
remote: { uri: audio.preview_remote_url }
|
remote: { uri: audio.preview_remote_url }
|
||||||
}}
|
}}
|
||||||
style={styles.background}
|
style={{ position: 'absolute', width: '100%', height: '100%' }}
|
||||||
dim
|
dim
|
||||||
/>
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
|
@ -139,22 +147,4 @@ const AttachmentAudio: React.FC<Props> = ({ total, index, sensitiveShown, audio
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
base: {
|
|
||||||
flex: 1,
|
|
||||||
flexBasis: '50%',
|
|
||||||
padding: StyleConstants.Spacing.XS / 2,
|
|
||||||
flexDirection: 'row'
|
|
||||||
},
|
|
||||||
background: { position: 'absolute', width: '100%', height: '100%' },
|
|
||||||
overlay: {
|
|
||||||
position: 'absolute',
|
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
flex: 1,
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
export default AttachmentAudio
|
export default AttachmentAudio
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import GracefullyImage from '@components/GracefullyImage'
|
import GracefullyImage from '@components/GracefullyImage'
|
||||||
import { StyleConstants } from '@utils/styles/constants'
|
|
||||||
import { useTheme } from '@utils/styles/ThemeManager'
|
import { useTheme } from '@utils/styles/ThemeManager'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { View } from 'react-native'
|
import { View } from 'react-native'
|
||||||
|
@ -24,27 +23,19 @@ const AttachmentImage = ({
|
||||||
const { colors } = useTheme()
|
const { colors } = useTheme()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View
|
<View style={{ flex: 1, backgroundColor: colors.shimmerDefault, alignContent: 'center', justifyContent: 'center' }}>
|
||||||
style={{
|
<GracefullyImage
|
||||||
flex: 1,
|
accessibilityLabel={image.description}
|
||||||
flexBasis: '50%',
|
hidden={sensitiveShown}
|
||||||
padding: StyleConstants.Spacing.XS / 2
|
sources={{
|
||||||
}}
|
default: { uri: image.preview_url },
|
||||||
>
|
remote: { uri: image.remote_url },
|
||||||
<View style={{ flex: 1, backgroundColor: colors.shimmerDefault }}>
|
blurhash: image.blurhash
|
||||||
<GracefullyImage
|
}}
|
||||||
accessibilityLabel={image.description}
|
onPress={() => navigateToImagesViewer(image.id)}
|
||||||
hidden={sensitiveShown}
|
style={{ aspectRatio: aspectRatio({ total, index, ...image.meta?.original }) }}
|
||||||
sources={{
|
dim
|
||||||
default: { uri: image.preview_url },
|
/>
|
||||||
remote: { uri: image.remote_url },
|
|
||||||
blurhash: image.blurhash
|
|
||||||
}}
|
|
||||||
onPress={() => navigateToImagesViewer(image.id)}
|
|
||||||
style={{ aspectRatio: aspectRatio({ total, index, ...image.meta?.original }) }}
|
|
||||||
dim
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
<AttachmentAltText sensitiveShown={sensitiveShown} text={image.description} />
|
<AttachmentAltText sensitiveShown={sensitiveShown} text={image.description} />
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
|
|
|
@ -25,21 +25,15 @@ const AttachmentUnsupported: React.FC<Props> = ({ total, index, sensitiveShown,
|
||||||
<View
|
<View
|
||||||
style={{
|
style={{
|
||||||
flex: 1,
|
flex: 1,
|
||||||
flexBasis: '50%',
|
aspectRatio: aspectRatio({ total, index, ...attachment.meta?.original }),
|
||||||
padding: StyleConstants.Spacing.XS / 2,
|
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
alignItems: 'center',
|
alignItems: 'center'
|
||||||
aspectRatio: aspectRatio({ total, index, ...attachment.meta?.original })
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{attachment.blurhash ? (
|
{attachment.blurhash ? (
|
||||||
<GracefullyImage
|
<GracefullyImage
|
||||||
sources={{ blurhash: attachment.blurhash }}
|
sources={{ blurhash: attachment.blurhash }}
|
||||||
style={{
|
style={{ position: 'absolute', width: '100%', height: '100%' }}
|
||||||
position: 'absolute',
|
|
||||||
width: '100%',
|
|
||||||
height: '100%'
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
{!sensitiveShown ? (
|
{!sensitiveShown ? (
|
||||||
|
|
|
@ -2,8 +2,9 @@ import Button from '@components/Button'
|
||||||
import GracefullyImage from '@components/GracefullyImage'
|
import GracefullyImage from '@components/GracefullyImage'
|
||||||
import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
|
import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
|
||||||
import { connectMedia } from '@utils/api/helpers/connect'
|
import { connectMedia } from '@utils/api/helpers/connect'
|
||||||
import { useAccountStorage, useGlobalStorage } from '@utils/storage/actions'
|
import { useGlobalStorage } from '@utils/storage/actions'
|
||||||
import { StyleConstants } from '@utils/styles/constants'
|
import { StyleConstants } from '@utils/styles/constants'
|
||||||
|
import { useTheme } from '@utils/styles/ThemeManager'
|
||||||
import { ResizeMode, Video, VideoFullscreenUpdate } from 'expo-av'
|
import { ResizeMode, Video, VideoFullscreenUpdate } from 'expo-av'
|
||||||
import { Platform } from 'expo-modules-core'
|
import { Platform } from 'expo-modules-core'
|
||||||
import * as ScreenOrientation from 'expo-screen-orientation'
|
import * as ScreenOrientation from 'expo-screen-orientation'
|
||||||
|
@ -27,13 +28,9 @@ const AttachmentVideo: React.FC<Props> = ({
|
||||||
video,
|
video,
|
||||||
gifv = false
|
gifv = false
|
||||||
}) => {
|
}) => {
|
||||||
|
const { colors } = useTheme()
|
||||||
const { reduceMotionEnabled } = useAccessibility()
|
const { reduceMotionEnabled } = useAccessibility()
|
||||||
const [autoplayGifv] = useGlobalStorage.boolean('app.auto_play_gifv')
|
const [shouldAutoplayGifv] = useGlobalStorage.boolean('app.auto_play_gifv')
|
||||||
const [preferences] = useAccountStorage.object('preferences')
|
|
||||||
const shouldAutoplayGifv =
|
|
||||||
preferences?.['reading:autoplay:gifs'] !== undefined
|
|
||||||
? preferences['reading:autoplay:gifs']
|
|
||||||
: autoplayGifv
|
|
||||||
|
|
||||||
const videoPlayer = useRef<Video>(null)
|
const videoPlayer = useRef<Video>(null)
|
||||||
const [videoLoading, setVideoLoading] = useState(false)
|
const [videoLoading, setVideoLoading] = useState(false)
|
||||||
|
@ -56,9 +53,10 @@ const AttachmentVideo: React.FC<Props> = ({
|
||||||
<View
|
<View
|
||||||
style={{
|
style={{
|
||||||
flex: 1,
|
flex: 1,
|
||||||
flexBasis: '50%',
|
backgroundColor: colors.shimmerDefault,
|
||||||
padding: StyleConstants.Spacing.XS / 2,
|
aspectRatio: aspectRatio({ total, index, ...video.meta?.original }),
|
||||||
aspectRatio: aspectRatio({ total, index, ...video.meta?.original })
|
alignContent: 'center',
|
||||||
|
justifyContent: 'center'
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Video
|
<Video
|
||||||
|
|
|
@ -9,10 +9,11 @@ import { StackNavigationProp } from '@react-navigation/stack'
|
||||||
import { RootStackParamList } from '@utils/navigation/navigators'
|
import { RootStackParamList } from '@utils/navigation/navigators'
|
||||||
import { usePreferencesQuery } from '@utils/queryHooks/preferences'
|
import { usePreferencesQuery } from '@utils/queryHooks/preferences'
|
||||||
import { StyleConstants } from '@utils/styles/constants'
|
import { StyleConstants } from '@utils/styles/constants'
|
||||||
|
import { chunk } from 'lodash'
|
||||||
import React, { useContext, useState } from 'react'
|
import React, { useContext, useState } from 'react'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import { Pressable, View } from 'react-native'
|
import { Pressable, View } from 'react-native'
|
||||||
import StatusContext from './Context'
|
import StatusContext from '../Context'
|
||||||
|
|
||||||
const TimelineAttachment = () => {
|
const TimelineAttachment = () => {
|
||||||
const { status, disableDetails } = useContext(StatusContext)
|
const { status, disableDetails } = useContext(StatusContext)
|
||||||
|
@ -96,98 +97,105 @@ const TimelineAttachment = () => {
|
||||||
navigation.navigate('Screen-ImagesViewer', { imageUrls, id })
|
navigation.navigate('Screen-ImagesViewer', { imageUrls, id })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const mapAttachmentType = (attachment: Mastodon.Attachment, index: number) => {
|
||||||
|
switch (attachment.type) {
|
||||||
|
case 'image':
|
||||||
|
return (
|
||||||
|
<AttachmentImage
|
||||||
|
total={status.media_attachments.length}
|
||||||
|
index={index}
|
||||||
|
sensitiveShown={sensitiveShown}
|
||||||
|
image={attachment}
|
||||||
|
navigateToImagesViewer={navigateToImagesViewer}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
case 'video':
|
||||||
|
return (
|
||||||
|
<AttachmentVideo
|
||||||
|
total={status.media_attachments.length}
|
||||||
|
index={index}
|
||||||
|
sensitiveShown={sensitiveShown}
|
||||||
|
video={attachment}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
case 'gifv':
|
||||||
|
return (
|
||||||
|
<AttachmentVideo
|
||||||
|
total={status.media_attachments.length}
|
||||||
|
index={index}
|
||||||
|
sensitiveShown={sensitiveShown}
|
||||||
|
video={attachment}
|
||||||
|
gifv
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
case 'audio':
|
||||||
|
return (
|
||||||
|
<AttachmentAudio
|
||||||
|
total={status.media_attachments.length}
|
||||||
|
index={index}
|
||||||
|
sensitiveShown={sensitiveShown}
|
||||||
|
audio={attachment}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
default:
|
||||||
|
if (
|
||||||
|
// https://docs.expo.dev/versions/unversioned/sdk/image/#supported-image-formats
|
||||||
|
attachment.preview_url?.match(/.(?:a?png|jpe?g|webp|avif|heic|gif|svg|ico|icns)$/i) ||
|
||||||
|
attachment.remote_url?.match(/.(?:a?png|jpe?g|webp|avif|heic|gif|svg|ico|icns)$/i)
|
||||||
|
) {
|
||||||
|
return (
|
||||||
|
<AttachmentImage
|
||||||
|
total={status.media_attachments.length}
|
||||||
|
index={index}
|
||||||
|
sensitiveShown={sensitiveShown}
|
||||||
|
image={attachment as unknown as Mastodon.AttachmentImage}
|
||||||
|
navigateToImagesViewer={navigateToImagesViewer}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
} else if (attachment.remote_url?.match(/.(?:mp4|mkv)$/i)) {
|
||||||
|
return (
|
||||||
|
<AttachmentVideo
|
||||||
|
total={status.media_attachments.length}
|
||||||
|
index={index}
|
||||||
|
sensitiveShown={sensitiveShown}
|
||||||
|
video={attachment as unknown as Mastodon.AttachmentVideo}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<AttachmentUnsupported
|
||||||
|
total={status.media_attachments.length}
|
||||||
|
index={index}
|
||||||
|
sensitiveShown={sensitiveShown}
|
||||||
|
attachment={attachment}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View>
|
<View
|
||||||
<View
|
style={{
|
||||||
style={{
|
marginTop: StyleConstants.Spacing.M,
|
||||||
marginTop: StyleConstants.Spacing.S,
|
flex: 1,
|
||||||
flex: 1,
|
gap: StyleConstants.Spacing.XS
|
||||||
flexDirection: 'row',
|
}}
|
||||||
flexWrap: 'wrap',
|
>
|
||||||
justifyContent: 'center',
|
{chunk(status.media_attachments, 2).map((chunk, chunkIndex) => (
|
||||||
alignContent: 'stretch'
|
<View
|
||||||
}}
|
style={{
|
||||||
>
|
flex: 1,
|
||||||
{status.media_attachments.map((attachment, index) => {
|
flexDirection: 'row',
|
||||||
switch (attachment.type) {
|
flexWrap: 'wrap',
|
||||||
case 'image':
|
justifyContent: 'center',
|
||||||
return (
|
alignContent: 'stretch',
|
||||||
<AttachmentImage
|
gap: StyleConstants.Spacing.XS
|
||||||
key={index}
|
}}
|
||||||
total={status.media_attachments.length}
|
>
|
||||||
index={index}
|
{chunk.map((a, aIndex) => mapAttachmentType(a, chunkIndex * 2 + aIndex))}
|
||||||
sensitiveShown={sensitiveShown}
|
</View>
|
||||||
image={attachment}
|
))}
|
||||||
navigateToImagesViewer={navigateToImagesViewer}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
case 'video':
|
|
||||||
return (
|
|
||||||
<AttachmentVideo
|
|
||||||
key={index}
|
|
||||||
total={status.media_attachments.length}
|
|
||||||
index={index}
|
|
||||||
sensitiveShown={sensitiveShown}
|
|
||||||
video={attachment}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
case 'gifv':
|
|
||||||
return (
|
|
||||||
<AttachmentVideo
|
|
||||||
key={index}
|
|
||||||
total={status.media_attachments.length}
|
|
||||||
index={index}
|
|
||||||
sensitiveShown={sensitiveShown}
|
|
||||||
video={attachment}
|
|
||||||
gifv
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
case 'audio':
|
|
||||||
return (
|
|
||||||
<AttachmentAudio
|
|
||||||
key={index}
|
|
||||||
total={status.media_attachments.length}
|
|
||||||
index={index}
|
|
||||||
sensitiveShown={sensitiveShown}
|
|
||||||
audio={attachment}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
default:
|
|
||||||
if (
|
|
||||||
attachment.preview_url?.endsWith('.jpg') ||
|
|
||||||
attachment.preview_url?.endsWith('.jpeg') ||
|
|
||||||
attachment.preview_url?.endsWith('.png') ||
|
|
||||||
attachment.preview_url?.endsWith('.gif') ||
|
|
||||||
attachment.remote_url?.endsWith('.jpg') ||
|
|
||||||
attachment.remote_url?.endsWith('.jpeg') ||
|
|
||||||
attachment.remote_url?.endsWith('.png') ||
|
|
||||||
attachment.remote_url?.endsWith('.gif')
|
|
||||||
) {
|
|
||||||
return (
|
|
||||||
<AttachmentImage
|
|
||||||
key={index}
|
|
||||||
total={status.media_attachments.length}
|
|
||||||
index={index}
|
|
||||||
sensitiveShown={sensitiveShown}
|
|
||||||
// @ts-ignore
|
|
||||||
image={attachment}
|
|
||||||
navigateToImagesViewer={navigateToImagesViewer}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
return (
|
|
||||||
<AttachmentUnsupported
|
|
||||||
key={index}
|
|
||||||
total={status.media_attachments.length}
|
|
||||||
index={index}
|
|
||||||
sensitiveShown={sensitiveShown}
|
|
||||||
attachment={attachment}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})}
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{defaultSensitive() &&
|
{defaultSensitive() &&
|
||||||
(sensitiveShown ? (
|
(sensitiveShown ? (
|
Loading…
Reference in New Issue