mirror of https://github.com/tooot-app/app
Fixed #315
This commit is contained in:
parent
77deb3fdef
commit
e38a45ffb2
|
@ -29,6 +29,7 @@ export interface Props {
|
|||
|
||||
strokeWidth?: number
|
||||
size?: 'S' | 'M' | 'L'
|
||||
fontBold?: boolean
|
||||
spacing?: 'XS' | 'S' | 'M' | 'L'
|
||||
round?: boolean
|
||||
overlay?: boolean
|
||||
|
@ -48,6 +49,7 @@ const Button: React.FC<Props> = ({
|
|||
disabled = false,
|
||||
strokeWidth,
|
||||
size = 'M',
|
||||
fontBold = false,
|
||||
spacing = 'S',
|
||||
round = false,
|
||||
overlay = false,
|
||||
|
@ -122,6 +124,7 @@ const Button: React.FC<Props> = ({
|
|||
StyleConstants.Font.Size[size] * (size === 'L' ? 1.25 : 1),
|
||||
opacity: loading ? 0 : 1
|
||||
}}
|
||||
fontWeight={fontBold ? 'Bold' : 'Normal'}
|
||||
children={content}
|
||||
testID='text'
|
||||
/>
|
||||
|
|
|
@ -0,0 +1,38 @@
|
|||
import Button from '@components/Button'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import { StackNavigationProp } from '@react-navigation/stack'
|
||||
import { RootStackParamList } from '@utils/navigation/navigators'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
|
||||
export interface Props {
|
||||
sensitiveShown: boolean
|
||||
text?: string
|
||||
}
|
||||
|
||||
const AttachmentAltText: React.FC<Props> = ({ sensitiveShown, text }) => {
|
||||
if (!text) {
|
||||
return null
|
||||
}
|
||||
|
||||
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
|
||||
|
||||
return !sensitiveShown ? (
|
||||
<Button
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: StyleConstants.Spacing.S,
|
||||
bottom: StyleConstants.Spacing.S
|
||||
}}
|
||||
overlay
|
||||
size='S'
|
||||
type='text'
|
||||
content='ALT'
|
||||
fontBold
|
||||
onPress={() => {
|
||||
navigation.navigate('Screen-Actions', { type: 'alt_text', text })
|
||||
}}
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
|
||||
export default AttachmentAltText
|
|
@ -8,6 +8,7 @@ import { Audio } from 'expo-av'
|
|||
import React, { useCallback, useState } from 'react'
|
||||
import { StyleSheet, View } from 'react-native'
|
||||
import { Blurhash } from 'react-native-blurhash'
|
||||
import AttachmentAltText from './AltText'
|
||||
import attachmentAspectRatio from './aspectRatio'
|
||||
|
||||
export interface Props {
|
||||
|
@ -127,6 +128,10 @@ const AttachmentAudio: React.FC<Props> = ({
|
|||
/>
|
||||
</View>
|
||||
) : null}
|
||||
<AttachmentAltText
|
||||
sensitiveShown={sensitiveShown}
|
||||
text={audio.description}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -3,6 +3,7 @@ import GracefullyImage from '@components/GracefullyImage'
|
|||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import React from 'react'
|
||||
import { View } from 'react-native'
|
||||
import AttachmentAltText from './AltText'
|
||||
import attachmentAspectRatio from './aspectRatio'
|
||||
|
||||
export interface Props {
|
||||
|
@ -34,7 +35,9 @@ const AttachmentImage = ({
|
|||
uri={{ original: image.preview_url, remote: image.remote_url }}
|
||||
blurhash={image.blurhash}
|
||||
onPress={() => {
|
||||
analytics('timeline_shared_attachment_image_press', { id: image.id })
|
||||
analytics('timeline_shared_attachment_image_press', {
|
||||
id: image.id
|
||||
})
|
||||
navigateToImagesViewer(image.id)
|
||||
}}
|
||||
style={{
|
||||
|
@ -48,6 +51,10 @@ const AttachmentImage = ({
|
|||
: image.meta.original.width / image.meta.original.height
|
||||
}}
|
||||
/>
|
||||
<AttachmentAltText
|
||||
sensitiveShown={sensitiveShown}
|
||||
text={image.description}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -8,6 +8,7 @@ import React from 'react'
|
|||
import { useTranslation } from 'react-i18next'
|
||||
import { View } from 'react-native'
|
||||
import { Blurhash } from 'react-native-blurhash'
|
||||
import AttachmentAltText from './AltText'
|
||||
import attachmentAspectRatio from './aspectRatio'
|
||||
|
||||
export interface Props {
|
||||
|
@ -75,6 +76,10 @@ const AttachmentUnsupported: React.FC<Props> = ({
|
|||
) : null}
|
||||
</>
|
||||
) : null}
|
||||
<AttachmentAltText
|
||||
sensitiveShown={sensitiveShown}
|
||||
text={attachment.description}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -2,16 +2,11 @@ import Button from '@components/Button'
|
|||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { ResizeMode, Video, VideoFullscreenUpdate } from 'expo-av'
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import {
|
||||
AppState,
|
||||
AppStateStatus,
|
||||
Pressable,
|
||||
StyleSheet,
|
||||
View
|
||||
} from 'react-native'
|
||||
import { AppState, AppStateStatus, Pressable, View } from 'react-native'
|
||||
import { Blurhash } from 'react-native-blurhash'
|
||||
import attachmentAspectRatio from './aspectRatio'
|
||||
import analytics from '@components/analytics'
|
||||
import AttachmentAltText from './AltText'
|
||||
|
||||
export interface Props {
|
||||
total: number
|
||||
|
@ -88,10 +83,12 @@ const AttachmentVideo: React.FC<Props> = ({
|
|||
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
styles.base,
|
||||
{ aspectRatio: attachmentAspectRatio({ total, index }) }
|
||||
]}
|
||||
style={{
|
||||
flex: 1,
|
||||
flexBasis: '50%',
|
||||
padding: StyleConstants.Spacing.XS / 2,
|
||||
aspectRatio: attachmentAspectRatio({ total, index })
|
||||
}}
|
||||
>
|
||||
<Video
|
||||
accessibilityLabel={video.description}
|
||||
|
@ -127,7 +124,17 @@ const AttachmentVideo: React.FC<Props> = ({
|
|||
}
|
||||
}}
|
||||
/>
|
||||
<Pressable style={styles.overlay} onPress={gifv ? playOnPress : null}>
|
||||
<Pressable
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
onPress={gifv ? playOnPress : null}
|
||||
>
|
||||
{sensitiveShown ? (
|
||||
video.blurhash ? (
|
||||
<Blurhash
|
||||
|
@ -149,25 +156,13 @@ const AttachmentVideo: React.FC<Props> = ({
|
|||
loading={videoLoading}
|
||||
/>
|
||||
) : null}
|
||||
<AttachmentAltText
|
||||
sensitiveShown={sensitiveShown}
|
||||
text={video.description}
|
||||
/>
|
||||
</Pressable>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
base: {
|
||||
flex: 1,
|
||||
flexBasis: '50%',
|
||||
padding: StyleConstants.Spacing.XS / 2
|
||||
},
|
||||
overlay: {
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
}
|
||||
})
|
||||
|
||||
export default AttachmentVideo
|
||||
|
|
|
@ -1,8 +1,7 @@
|
|||
{
|
||||
"content": {
|
||||
"button": {
|
||||
"apply": "$t(common:buttons.apply)",
|
||||
"cancel": "$t(common:buttons.cancel)"
|
||||
"altText": {
|
||||
"heading": "Alternative Text"
|
||||
},
|
||||
"notificationsFilter": {
|
||||
"heading": "Show notification types",
|
||||
|
|
|
@ -7,7 +7,7 @@ import {
|
|||
} from '@utils/slices/instancesSlice'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React, { useCallback, useEffect, useMemo } from 'react'
|
||||
import React, { useCallback, useEffect } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Dimensions, StyleSheet, View } from 'react-native'
|
||||
import {
|
||||
|
@ -30,6 +30,7 @@ import {
|
|||
} from 'react-native-safe-area-context'
|
||||
import { useSelector } from 'react-redux'
|
||||
import ActionsAccount from './Actions/Account'
|
||||
import ActionsAltText from './Actions/AltText'
|
||||
import ActionsDomain from './Actions/Domain'
|
||||
import ActionsNotificationsFilter from './Actions/NotificationsFilter'
|
||||
import ActionsShare from './Actions/Share'
|
||||
|
@ -173,6 +174,8 @@ const ScreenActions = ({
|
|||
)
|
||||
case 'notifications_filter':
|
||||
return <ActionsNotificationsFilter />
|
||||
case 'alt_text':
|
||||
return <ActionsAltText text={params.text} />
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -0,0 +1,44 @@
|
|||
import Button from '@components/Button'
|
||||
import MenuContainer from '@components/Menu/Container'
|
||||
import MenuHeader from '@components/Menu/Header'
|
||||
import CustomText from '@components/Text'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import { useTheme } from '@utils/styles/ThemeManager'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Dimensions } from 'react-native'
|
||||
import { ScrollView } from 'react-native-gesture-handler'
|
||||
|
||||
export interface Props {
|
||||
text: string
|
||||
}
|
||||
|
||||
const ActionsAltText: React.FC<Props> = ({ text }) => {
|
||||
const navigation = useNavigation()
|
||||
const { t } = useTranslation('screenActions')
|
||||
const { colors } = useTheme()
|
||||
|
||||
return (
|
||||
<>
|
||||
<MenuContainer>
|
||||
<MenuHeader heading={t(`content.altText.heading`)} />
|
||||
<ScrollView style={{ maxHeight: Dimensions.get('window').height / 2 }}>
|
||||
<CustomText style={{ color: colors.primaryDefault }}>
|
||||
{text}
|
||||
</CustomText>
|
||||
</ScrollView>
|
||||
</MenuContainer>
|
||||
<Button
|
||||
type='text'
|
||||
content={t('common:buttons.OK')}
|
||||
onPress={() => navigation.goBack()}
|
||||
style={{
|
||||
marginHorizontal: StyleConstants.Spacing.Global.PagePadding * 2
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ActionsAltText
|
|
@ -10,7 +10,6 @@ import {
|
|||
} from '@utils/slices/instancesSlice'
|
||||
import { StyleConstants } from '@utils/styles/constants'
|
||||
import React, { useMemo } from 'react'
|
||||
import { StyleSheet } from 'react-native'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useSelector } from 'react-redux'
|
||||
import { useQueryClient } from 'react-query'
|
||||
|
@ -100,20 +99,16 @@ const ActionsNotificationsFilter: React.FC = () => {
|
|||
</MenuContainer>
|
||||
<Button
|
||||
type='text'
|
||||
content={t('content.button.apply')}
|
||||
content={t('common:buttons.apply')}
|
||||
onPress={() => {
|
||||
queryClient.resetQueries(queryKey)
|
||||
}}
|
||||
style={styles.button}
|
||||
style={{
|
||||
marginHorizontal: StyleConstants.Spacing.Global.PagePadding * 2
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
button: {
|
||||
marginHorizontal: StyleConstants.Spacing.Global.PagePadding * 2
|
||||
}
|
||||
})
|
||||
|
||||
export default ActionsNotificationsFilter
|
||||
|
|
|
@ -20,6 +20,10 @@ export type RootStackParamList = {
|
|||
| {
|
||||
type: 'notifications_filter'
|
||||
}
|
||||
| {
|
||||
type: 'alt_text'
|
||||
text: string
|
||||
}
|
||||
'Screen-Announcements': { showAll: boolean }
|
||||
'Screen-Compose':
|
||||
| {
|
||||
|
|
Loading…
Reference in New Issue