octo/tooot
octo
/
tooot
mirror of https://github.com/tooot-app/app
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added gif preference 

https://github.com/mastodon/mastodon/pull/22706
This commit is contained in:
xmflsct 2023-01-24 00:36:51 +01:00
parent 47d5b02468
commit f1b162a020
12 changed files with 233 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/@types/mastodon.d.ts vendored
View File

@ -452,6 +452,7 @@ declare namespace Mastodon {
'posting:default:language'?: string
'reading:expand:media'?: 'default' | 'show_all' | 'hide_all'
'reading:expand:spoilers'?: boolean
'reading:autoplay:gifs'?: boolean
}
type PushSubscription = {

8
src/components/Menu/Container.tsx
View File

@ -1,17 +1,19 @@
import { StyleConstants } from '@utils/styles/constants'
import React from 'react'
import { View } from 'react-native'
import { View, ViewStyle } from 'react-native'
export interface Props {
style?: ViewStyle
children: React.ReactNode
}
const MenuContainer: React.FC<Props> = ({ children }) => {
const MenuContainer: React.FC<Props> = ({ style, children }) => {
return (
<View
style={{
paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
marginBottom: StyleConstants.Spacing.Global.PagePadding
marginBottom: StyleConstants.Spacing.Global.PagePadding,
...style
}}
>
{children}

5
src/components/Relationship/Outgoing.tsx
View File

@ -13,7 +13,6 @@ import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { View } from 'react-native'
export interface Props {
id: Mastodon.Account['id']
@ -127,7 +126,7 @@ const RelationshipOutgoing: React.FC<Props> = ({ id }: Props) => {
const isPageNotifications = name === 'Tab-Notifications-Root'
return (
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<>
{!isPageNotifications && canFollowNotify && query.data?.following ? (
<Button
type='icon'
@ -155,7 +154,7 @@ const RelationshipOutgoing: React.FC<Props> = ({ id }: Props) => {
loading={query.isLoading || mutation.isLoading}
disabled={query.isError || query.data?.blocked_by}
/>
</View>
</>
)
}

15
src/components/Timeline/Shared/Attachment/Video.tsx
View File

@ -1,6 +1,6 @@
import Button from '@components/Button'
import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
import { useGlobalStorage } from '@utils/storage/actions'
import { useAccountStorage, useGlobalStorage } from '@utils/storage/actions'
import { StyleConstants } from '@utils/styles/constants'
import { ResizeMode, Video, VideoFullscreenUpdate } from 'expo-av'
import { Platform } from 'expo-modules-core'
@ -28,6 +28,11 @@ const AttachmentVideo: React.FC<Props> = ({
}) => {
const { reduceMotionEnabled } = useAccessibility()
const [autoplayGifv] = 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 [videoLoading, setVideoLoading] = useState(false)
@ -63,7 +68,7 @@ const AttachmentVideo: React.FC<Props> = ({
resizeMode={videoResizeMode}
{...(gifv
? {
shouldPlay: reduceMotionEnabled || !autoplayGifv ? false : true,
shouldPlay: reduceMotionEnabled || !shouldAutoplayGifv ? false : true,
isMuted: true,
isLooping: true,
source: { uri: video.url }
@ -82,7 +87,7 @@ const AttachmentVideo: React.FC<Props> = ({
Platform.OS === 'android' &&
(await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT))
Platform.OS === 'android' && setVideoResizeMode(ResizeMode.COVER)
if (gifv && !reduceMotionEnabled && autoplayGifv) {
if (gifv && !reduceMotionEnabled && shouldAutoplayGifv) {
videoPlayer.current?.playAsync()
} else {
videoPlayer.current?.pauseAsync()
@ -116,7 +121,7 @@ const AttachmentVideo: React.FC<Props> = ({
video.blurhash ? (
<Blurhash blurhash={video.blurhash} style={{ width: '100%', height: '100%' }} />
) : null
) : !gifv || (gifv && (reduceMotionEnabled || !autoplayGifv)) ? (
) : !gifv || (gifv && (reduceMotionEnabled || !shouldAutoplayGifv)) ? (
<Button
round
overlay
@ -129,7 +134,7 @@ const AttachmentVideo: React.FC<Props> = ({
) : null}
<AttachmentAltText sensitiveShown={sensitiveShown} text={video.description} />
</Pressable>
{gifv && !autoplayGifv ? (
{gifv && !shouldAutoplayGifv ? (
<Button
style={{
position: 'absolute',

48
src/i18n/en/screens/tabs.json
View File

@ -69,6 +69,9 @@
"push": {
"name": "Push Notification"
},
"preferences": {
"name": "Preferences"
},
"profile": {
"name": "Edit Profile"
},
@ -84,9 +87,6 @@
"settings": {
"name": "App Settings"
},
"webSettings": {
"name": "More Account Settings"
},
"switch": {
"name": "Switch Account"
}
@ -125,6 +125,37 @@
"message": "This action is not recoverable."
}
},
"preferences": {
"visibility": {
"title": "Posting visibility",
"options": {
"public": "Public",
"unlisted": "Unlisted",
"private": "Followers only"
}
},
"sensitive": {
"title": "Posting media sensitive"
},
"media": {
"title": "Media display",
"options": {
"default": "Hide media marked as sensitive",
"show_all": "Always show media",
"hide_all": "Always hide media"
}
},
"spoilers": {
"title": "Auto expand toots with content warning",
},
"autoplay_gifs": {
"title": "Autoplay GIF in toots"
},
"web_only": {
"title": "Update settings",
"description": "Settings below can only be updated using the web UI"
}
},
"profile": {
"feedback": {
"succeed": "{{type}} updated",
@ -150,17 +181,6 @@
"total_one": "{{count}} field",
"total_other": "{{count}} fields"
},
"visibility": {
"title": "Posting Visibility",
"options": {
"public": "Public",
"unlisted": "Unlisted",
"private": "Followers only"
}
},
"sensitive": {
"title": "Posting Media Sensitive"
},
"lock": {
"title": "Lock Account",
"description": "Requires you to manually approve followers"

158
src/screens/Tabs/Me/Preferences.tsx Normal file
View File

@ -0,0 +1,158 @@
import { MenuContainer, MenuRow } from '@components/Menu'
import { Message } from '@components/Message'
import { useActionSheet } from '@expo/react-native-action-sheet'
import { androidActionSheetStyles } from '@utils/helpers/androidActionSheetStyles'
import browserPackage from '@utils/helpers/browserPackage'
import { TabMeProfileStackScreenProps } from '@utils/navigation/navigators'
import { usePreferencesQuery } from '@utils/queryHooks/preferences'
import { useProfileMutation } from '@utils/queryHooks/profile'
import { getAccountStorage } from '@utils/storage/actions'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import * as WebBrowser from 'expo-web-browser'
import React, { useRef } from 'react'
import { useTranslation } from 'react-i18next'
import FlashMessage from 'react-native-flash-message'
import { ScrollView } from 'react-native-gesture-handler'
const TabMePreferences: React.FC<TabMeProfileStackScreenProps<'Tab-Me-Profile-Root'>> = () => {
const { colors } = useTheme()
const { t } = useTranslation(['common', 'screenTabs'])
const { showActionSheetWithOptions } = useActionSheet()
const { mutateAsync } = useProfileMutation()
const { data, isFetching, refetch } = usePreferencesQuery()
const messageRef = useRef<FlashMessage>(null)
return (
<ScrollView>
<MenuContainer>
{data?.['posting:default:visibility'] !== 'direct' ? (
<MenuRow
title={t('screenTabs:me.preferences.visibility.title')}
content={
data?.['posting:default:visibility']
? t(
`screenTabs:me.preferences.visibility.options.${data['posting:default:visibility']}`
)
: undefined
}
loading={isFetching}
iconBack='ChevronRight'
onPress={() =>
showActionSheetWithOptions(
{
title: t('screenTabs:me.preferences.visibility.title'),
options: [
t('screenTabs:me.preferences.visibility.options.public'),
t('screenTabs:me.preferences.visibility.options.unlisted'),
t('screenTabs:me.preferences.visibility.options.private'),
t('common:buttons.cancel')
],
cancelButtonIndex: 3,
...androidActionSheetStyles(colors)
},
async buttonIndex => {
switch (buttonIndex) {
case 0:
case 1:
case 2:
const indexVisibilityMapping = ['public', 'unlisted', 'private'] as [
'public',
'unlisted',
'private'
]
if (
data?.['posting:default:visibility'] &&
data['posting:default:visibility'] !== indexVisibilityMapping[buttonIndex]
) {
mutateAsync({
messageRef,
message: {
text: 'me.profile.root.visibility.title',
succeed: false,
failed: true
},
type: 'source[privacy]',
data: indexVisibilityMapping[buttonIndex]
}).then(() => refetch())
}
break
}
}
)
}
/>
) : null}
<MenuRow
title={t('screenTabs:me.preferences.sensitive.title')}
switchValue={data?.['posting:default:sensitive']}
switchOnValueChange={() =>
mutateAsync({
messageRef,
message: {
text: 'me.profile.root.sensitive.title',
succeed: false,
failed: true
},
type: 'source[sensitive]',
data:
data?.['posting:default:sensitive'] === undefined
? true
: !data['posting:default:sensitive']
}).then(() => refetch())
}
loading={isFetching}
/>
</MenuContainer>
<MenuContainer style={{ marginTop: StyleConstants.Spacing.L }}>
<MenuRow
iconBack='ExternalLink'
title={t('screenTabs:me.preferences.web_only.title')}
description={t('screenTabs:me.preferences.web_only.description')}
onPress={async () =>
WebBrowser.openAuthSessionAsync(
`https://${getAccountStorage.string('auth.domain')}/settings/preferences`,
'tooot://tooot',
{
...(await browserPackage()),
dismissButtonStyle: 'done',
readerMode: false
}
).then(() => refetch())
}
/>
<MenuRow
title={t('screenTabs:me.preferences.media.title')}
content={
data?.['reading:expand:media']
? t(`screenTabs:me.preferences.media.options.${data['reading:expand:media']}`)
: undefined
}
loading={isFetching}
/>
<MenuRow
title={t('screenTabs:me.preferences.spoilers.title')}
switchValue={data?.['reading:expand:spoilers'] || false}
switchDisabled={true}
loading={isFetching}
/>
{data?.['reading:autoplay:gifs'] !== undefined ? (
<MenuRow
title={t('screenTabs:me.preferences.autoplay_gifs.title')}
switchValue={data['reading:autoplay:gifs'] || false}
switchDisabled={true}
loading={isFetching}
/>
) : null}
</MenuContainer>
<Message ref={messageRef} />
</ScrollView>
)
}
export default TabMePreferences

84
src/screens/Tabs/Me/Profile/Root.tsx
View File

@ -1,11 +1,6 @@
import { MenuContainer, MenuRow } from '@components/Menu'
import { useActionSheet } from '@expo/react-native-action-sheet'
import { androidActionSheetStyles } from '@utils/helpers/androidActionSheetStyles'
import { TabMeProfileStackScreenProps } from '@utils/navigation/navigators'
import { queryClient } from '@utils/queryHooks'
import { QueryKeyPreferences } from '@utils/queryHooks/preferences'
import { useProfileMutation, useProfileQuery } from '@utils/queryHooks/profile'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { RefObject } from 'react'
import { useTranslation } from 'react-i18next'
import FlashMessage from 'react-native-flash-message'
@ -17,19 +12,11 @@ const TabMeProfileRoot: React.FC<
messageRef: RefObject<FlashMessage>
}
> = ({ messageRef, navigation }) => {
const { colors } = useTheme()
const { t } = useTranslation(['common', 'screenTabs'])
const { showActionSheetWithOptions } = useActionSheet()
const { data, isFetching } = useProfileQuery()
const { mutateAsync } = useProfileMutation()
const refetchPreferences = () => {
const queryKeyPreferences: QueryKeyPreferences = ['Preferences']
queryClient.refetchQueries(queryKeyPreferences)
}
return (
<ScrollView>
<MenuContainer>
@ -77,77 +64,6 @@ const TabMeProfileRoot: React.FC<
}}
/>
</MenuContainer>
<MenuContainer>
{data?.source.privacy !== 'direct' ? (
<MenuRow
title={t('screenTabs:me.profile.root.visibility.title')}
content={
data?.source.privacy
? t(`screenTabs:me.profile.root.visibility.options.${data.source.privacy}`)
: undefined
}
loading={isFetching}
iconBack='ChevronRight'
onPress={() =>
showActionSheetWithOptions(
{
title: t('screenTabs:me.profile.root.visibility.title'),
options: [
t('screenTabs:me.profile.root.visibility.options.public'),
t('screenTabs:me.profile.root.visibility.options.unlisted'),
t('screenTabs:me.profile.root.visibility.options.private'),
t('common:buttons.cancel')
],
cancelButtonIndex: 3,
...androidActionSheetStyles(colors)
},
async buttonIndex => {
switch (buttonIndex) {
case 0:
case 1:
case 2:
const indexVisibilityMapping = ['public', 'unlisted', 'private'] as [
'public',
'unlisted',
'private'
]
if (data?.source.privacy !== indexVisibilityMapping[buttonIndex]) {
mutateAsync({
messageRef,
message: {
text: 'me.profile.root.visibility.title',
succeed: false,
failed: true
},
type: 'source[privacy]',
data: indexVisibilityMapping[buttonIndex]
}).then(() => refetchPreferences())
}
break
}
}
)
}
/>
) : null}
<MenuRow
title={t('screenTabs:me.profile.root.sensitive.title')}
switchValue={data?.source.sensitive}
switchOnValueChange={() =>
mutateAsync({
messageRef,
message: {
text: 'me.profile.root.sensitive.title',
succeed: false,
failed: true
},
type: 'source[sensitive]',
data: data?.source.sensitive === undefined ? true : !data.source.sensitive
}).then(() => refetchPreferences())
}
loading={isFetching}
/>
</MenuContainer>
<MenuContainer>
<MenuRow
title={t('screenTabs:me.profile.root.lock.title')}

23
src/screens/Tabs/Me/Root/Settings.tsx
View File

@ -1,8 +1,5 @@
import { MenuContainer, MenuRow } from '@components/Menu'
import { useNavigation } from '@react-navigation/native'
import browserPackage from '@utils/helpers/browserPackage'
import { getAccountStorage, useGlobalStorage } from '@utils/storage/actions'
import * as WebBrowser from 'expo-web-browser'
import React from 'react'
import { useTranslation } from 'react-i18next'
@ -10,8 +7,6 @@ const Settings: React.FC = () => {
const { t } = useTranslation('screenTabs')
const navigation = useNavigation<any>()
const [accountActive] = useGlobalStorage.string('account.active')
return (
<MenuContainer>
<MenuRow
@ -20,24 +15,6 @@ const Settings: React.FC = () => {
title={t('me.stacks.settings.name')}
onPress={() => navigation.navigate('Tab-Me-Settings')}
/>
{accountActive ? (
<MenuRow
iconFront='Sliders'
iconBack='ExternalLink'
title={t('me.stacks.webSettings.name')}
onPress={async () =>
WebBrowser.openAuthSessionAsync(
`https://${getAccountStorage.string('auth.domain')}/settings/preferences`,
'tooot://tooot',
{
...(await browserPackage()),
dismissButtonStyle: 'done',
readerMode: false
}
)
}
/>
) : null}
</MenuContainer>
)
}

15
src/screens/Tabs/Me/index.tsx
View File

@ -12,6 +12,7 @@ import TabMeList from './List'
import TabMeListAccounts from './List/Accounts'
import TabMeListEdit from './List/Edit'
import TabMeListList from './List/List'
import TabMePreferences from './Preferences'
import TabMeProfile from './Profile'
import TabMePush from './Push'
import TabMeRoot from './Root'
@ -100,13 +101,19 @@ const TabMe: React.FC = () => {
headerLeft: () => <HeaderLeft onPress={() => navigation.pop(1)} />
})}
/>
<Stack.Screen
name='Tab-Me-Preferences'
component={TabMePreferences}
options={({ navigation }: any) => ({
presentation: 'modal',
title: t('me.stacks.preferences.name'),
headerLeft: () => <HeaderLeft content='ChevronDown' onPress={() => navigation.pop(1)} />
})}
/>
<Stack.Screen
name='Tab-Me-Profile'
component={TabMeProfile}
options={{
headerShown: false,
presentation: 'modal'
}}
options={{ headerShown: false, presentation: 'modal' }}
/>
<Stack.Screen
name='Tab-Me-Push'

12
src/screens/Tabs/Shared/Account/Information/Actions.tsx
View File

@ -42,6 +42,14 @@ const AccountInformationActions: React.FC = () => {
content={t('me.stacks.profile.name')}
onPress={() => navigation.navigate('Tab-Me-Profile')}
/>
<Button
round
type='icon'
disabled={account === undefined}
content='Settings'
style={{ marginLeft: StyleConstants.Spacing.S }}
onPress={() => navigation.navigate('Tab-Me-Preferences')}
/>
</View>
)
}
@ -61,7 +69,7 @@ const AccountInformationActions: React.FC = () => {
round
type='icon'
content='AtSign'
style={{ marginRight: StyleConstants.Spacing.S }}
style={{ flex: 1, marginRight: StyleConstants.Spacing.S }}
onPress={() => {}}
/>
</DropdownMenu.Trigger>
@ -119,7 +127,7 @@ const styles = StyleSheet.create({
base: {
alignSelf: 'flex-end',
flexDirection: 'row',
alignItems: 'center'
alignItems: 'stretch'
}
})

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

@ -157,6 +157,7 @@ export type TabMeStackParamList = {
key: string // To update title after successful mutation
}
'Tab-Me-List-List': undefined
'Tab-Me-Preferences': undefined
'Tab-Me-Profile': undefined
'Tab-Me-Push': undefined
'Tab-Me-Settings': undefined

2
src/utils/queryHooks/preferences.ts
View File

@ -19,7 +19,7 @@ const usePreferencesQuery = (params?: {
...params?.options,
staleTime: Infinity,
cacheTime: Infinity,
initialData: getAccountStorage.object('preferences'),
placeholderData: getAccountStorage.object('preferences'),
onSuccess: data => setAccountStorage([{ key: 'preferences', value: data }])
})
}