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
|
strokeWidth?: number
|
||||||
size?: 'S' | 'M' | 'L'
|
size?: 'S' | 'M' | 'L'
|
||||||
|
fontBold?: boolean
|
||||||
spacing?: 'XS' | 'S' | 'M' | 'L'
|
spacing?: 'XS' | 'S' | 'M' | 'L'
|
||||||
round?: boolean
|
round?: boolean
|
||||||
overlay?: boolean
|
overlay?: boolean
|
||||||
|
@ -48,6 +49,7 @@ const Button: React.FC<Props> = ({
|
||||||
disabled = false,
|
disabled = false,
|
||||||
strokeWidth,
|
strokeWidth,
|
||||||
size = 'M',
|
size = 'M',
|
||||||
|
fontBold = false,
|
||||||
spacing = 'S',
|
spacing = 'S',
|
||||||
round = false,
|
round = false,
|
||||||
overlay = false,
|
overlay = false,
|
||||||
|
@ -122,6 +124,7 @@ const Button: React.FC<Props> = ({
|
||||||
StyleConstants.Font.Size[size] * (size === 'L' ? 1.25 : 1),
|
StyleConstants.Font.Size[size] * (size === 'L' ? 1.25 : 1),
|
||||||
opacity: loading ? 0 : 1
|
opacity: loading ? 0 : 1
|
||||||
}}
|
}}
|
||||||
|
fontWeight={fontBold ? 'Bold' : 'Normal'}
|
||||||
children={content}
|
children={content}
|
||||||
testID='text'
|
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 React, { useCallback, useState } from 'react'
|
||||||
import { StyleSheet, View } from 'react-native'
|
import { StyleSheet, View } from 'react-native'
|
||||||
import { Blurhash } from 'react-native-blurhash'
|
import { Blurhash } from 'react-native-blurhash'
|
||||||
|
import AttachmentAltText from './AltText'
|
||||||
import attachmentAspectRatio from './aspectRatio'
|
import attachmentAspectRatio from './aspectRatio'
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
|
@ -127,6 +128,10 @@ const AttachmentAudio: React.FC<Props> = ({
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
) : null}
|
) : null}
|
||||||
|
<AttachmentAltText
|
||||||
|
sensitiveShown={sensitiveShown}
|
||||||
|
text={audio.description}
|
||||||
|
/>
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,6 +3,7 @@ import GracefullyImage from '@components/GracefullyImage'
|
||||||
import { StyleConstants } from '@utils/styles/constants'
|
import { StyleConstants } from '@utils/styles/constants'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { View } from 'react-native'
|
import { View } from 'react-native'
|
||||||
|
import AttachmentAltText from './AltText'
|
||||||
import attachmentAspectRatio from './aspectRatio'
|
import attachmentAspectRatio from './aspectRatio'
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
|
@ -34,7 +35,9 @@ const AttachmentImage = ({
|
||||||
uri={{ original: image.preview_url, remote: image.remote_url }}
|
uri={{ original: image.preview_url, remote: image.remote_url }}
|
||||||
blurhash={image.blurhash}
|
blurhash={image.blurhash}
|
||||||
onPress={() => {
|
onPress={() => {
|
||||||
analytics('timeline_shared_attachment_image_press', { id: image.id })
|
analytics('timeline_shared_attachment_image_press', {
|
||||||
|
id: image.id
|
||||||
|
})
|
||||||
navigateToImagesViewer(image.id)
|
navigateToImagesViewer(image.id)
|
||||||
}}
|
}}
|
||||||
style={{
|
style={{
|
||||||
|
@ -48,6 +51,10 @@ const AttachmentImage = ({
|
||||||
: image.meta.original.width / image.meta.original.height
|
: image.meta.original.width / image.meta.original.height
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
<AttachmentAltText
|
||||||
|
sensitiveShown={sensitiveShown}
|
||||||
|
text={image.description}
|
||||||
|
/>
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,6 +8,7 @@ import React from 'react'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import { View } from 'react-native'
|
import { View } from 'react-native'
|
||||||
import { Blurhash } from 'react-native-blurhash'
|
import { Blurhash } from 'react-native-blurhash'
|
||||||
|
import AttachmentAltText from './AltText'
|
||||||
import attachmentAspectRatio from './aspectRatio'
|
import attachmentAspectRatio from './aspectRatio'
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
|
@ -75,6 +76,10 @@ const AttachmentUnsupported: React.FC<Props> = ({
|
||||||
) : null}
|
) : null}
|
||||||
</>
|
</>
|
||||||
) : null}
|
) : null}
|
||||||
|
<AttachmentAltText
|
||||||
|
sensitiveShown={sensitiveShown}
|
||||||
|
text={attachment.description}
|
||||||
|
/>
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,16 +2,11 @@ import Button from '@components/Button'
|
||||||
import { StyleConstants } from '@utils/styles/constants'
|
import { StyleConstants } from '@utils/styles/constants'
|
||||||
import { ResizeMode, Video, VideoFullscreenUpdate } from 'expo-av'
|
import { ResizeMode, Video, VideoFullscreenUpdate } from 'expo-av'
|
||||||
import React, { useCallback, useEffect, useRef, useState } from 'react'
|
import React, { useCallback, useEffect, useRef, useState } from 'react'
|
||||||
import {
|
import { AppState, AppStateStatus, Pressable, View } from 'react-native'
|
||||||
AppState,
|
|
||||||
AppStateStatus,
|
|
||||||
Pressable,
|
|
||||||
StyleSheet,
|
|
||||||
View
|
|
||||||
} from 'react-native'
|
|
||||||
import { Blurhash } from 'react-native-blurhash'
|
import { Blurhash } from 'react-native-blurhash'
|
||||||
import attachmentAspectRatio from './aspectRatio'
|
import attachmentAspectRatio from './aspectRatio'
|
||||||
import analytics from '@components/analytics'
|
import analytics from '@components/analytics'
|
||||||
|
import AttachmentAltText from './AltText'
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
total: number
|
total: number
|
||||||
|
@ -88,10 +83,12 @@ const AttachmentVideo: React.FC<Props> = ({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View
|
<View
|
||||||
style={[
|
style={{
|
||||||
styles.base,
|
flex: 1,
|
||||||
{ aspectRatio: attachmentAspectRatio({ total, index }) }
|
flexBasis: '50%',
|
||||||
]}
|
padding: StyleConstants.Spacing.XS / 2,
|
||||||
|
aspectRatio: attachmentAspectRatio({ total, index })
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<Video
|
<Video
|
||||||
accessibilityLabel={video.description}
|
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 ? (
|
{sensitiveShown ? (
|
||||||
video.blurhash ? (
|
video.blurhash ? (
|
||||||
<Blurhash
|
<Blurhash
|
||||||
|
@ -149,25 +156,13 @@ const AttachmentVideo: React.FC<Props> = ({
|
||||||
loading={videoLoading}
|
loading={videoLoading}
|
||||||
/>
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
|
<AttachmentAltText
|
||||||
|
sensitiveShown={sensitiveShown}
|
||||||
|
text={video.description}
|
||||||
|
/>
|
||||||
</Pressable>
|
</Pressable>
|
||||||
</View>
|
</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
|
export default AttachmentVideo
|
||||||
|
|
|
@ -1,8 +1,7 @@
|
||||||
{
|
{
|
||||||
"content": {
|
"content": {
|
||||||
"button": {
|
"altText": {
|
||||||
"apply": "$t(common:buttons.apply)",
|
"heading": "Alternative Text"
|
||||||
"cancel": "$t(common:buttons.cancel)"
|
|
||||||
},
|
},
|
||||||
"notificationsFilter": {
|
"notificationsFilter": {
|
||||||
"heading": "Show notification types",
|
"heading": "Show notification types",
|
||||||
|
|
|
@ -7,7 +7,7 @@ import {
|
||||||
} from '@utils/slices/instancesSlice'
|
} from '@utils/slices/instancesSlice'
|
||||||
import { StyleConstants } from '@utils/styles/constants'
|
import { StyleConstants } from '@utils/styles/constants'
|
||||||
import { useTheme } from '@utils/styles/ThemeManager'
|
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 { useTranslation } from 'react-i18next'
|
||||||
import { Dimensions, StyleSheet, View } from 'react-native'
|
import { Dimensions, StyleSheet, View } from 'react-native'
|
||||||
import {
|
import {
|
||||||
|
@ -30,6 +30,7 @@ import {
|
||||||
} from 'react-native-safe-area-context'
|
} from 'react-native-safe-area-context'
|
||||||
import { useSelector } from 'react-redux'
|
import { useSelector } from 'react-redux'
|
||||||
import ActionsAccount from './Actions/Account'
|
import ActionsAccount from './Actions/Account'
|
||||||
|
import ActionsAltText from './Actions/AltText'
|
||||||
import ActionsDomain from './Actions/Domain'
|
import ActionsDomain from './Actions/Domain'
|
||||||
import ActionsNotificationsFilter from './Actions/NotificationsFilter'
|
import ActionsNotificationsFilter from './Actions/NotificationsFilter'
|
||||||
import ActionsShare from './Actions/Share'
|
import ActionsShare from './Actions/Share'
|
||||||
|
@ -173,6 +174,8 @@ const ScreenActions = ({
|
||||||
)
|
)
|
||||||
case 'notifications_filter':
|
case 'notifications_filter':
|
||||||
return <ActionsNotificationsFilter />
|
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'
|
} from '@utils/slices/instancesSlice'
|
||||||
import { StyleConstants } from '@utils/styles/constants'
|
import { StyleConstants } from '@utils/styles/constants'
|
||||||
import React, { useMemo } from 'react'
|
import React, { useMemo } from 'react'
|
||||||
import { StyleSheet } from 'react-native'
|
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import { useSelector } from 'react-redux'
|
import { useSelector } from 'react-redux'
|
||||||
import { useQueryClient } from 'react-query'
|
import { useQueryClient } from 'react-query'
|
||||||
|
@ -100,20 +99,16 @@ const ActionsNotificationsFilter: React.FC = () => {
|
||||||
</MenuContainer>
|
</MenuContainer>
|
||||||
<Button
|
<Button
|
||||||
type='text'
|
type='text'
|
||||||
content={t('content.button.apply')}
|
content={t('common:buttons.apply')}
|
||||||
onPress={() => {
|
onPress={() => {
|
||||||
queryClient.resetQueries(queryKey)
|
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
|
export default ActionsNotificationsFilter
|
||||||
|
|
|
@ -20,6 +20,10 @@ export type RootStackParamList = {
|
||||||
| {
|
| {
|
||||||
type: 'notifications_filter'
|
type: 'notifications_filter'
|
||||||
}
|
}
|
||||||
|
| {
|
||||||
|
type: 'alt_text'
|
||||||
|
text: string
|
||||||
|
}
|
||||||
'Screen-Announcements': { showAll: boolean }
|
'Screen-Announcements': { showAll: boolean }
|
||||||
'Screen-Compose':
|
'Screen-Compose':
|
||||||
| {
|
| {
|
||||||
|
|
Loading…
Reference in New Issue