Skip to content

Commit

Permalink
Added gif preference
Browse files Browse the repository at this point in the history
  • Loading branch information
xmflsct committed Jan 23, 2023
1 parent 47d5b02 commit f1b162a
Show file tree
Hide file tree
Showing 12 changed files with 233 additions and 139 deletions.
1 change: 1 addition & 0 deletions src/@types/mastodon.d.ts
Expand Up @@ -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 = {
Expand Down
8 changes: 5 additions & 3 deletions src/components/Menu/Container.tsx
@@ -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}
Expand Down
5 changes: 2 additions & 3 deletions src/components/Relationship/Outgoing.tsx
Expand Up @@ -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']
Expand Down Expand Up @@ -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'
Expand Down Expand Up @@ -155,7 +154,7 @@ const RelationshipOutgoing: React.FC<Props> = ({ id }: Props) => {
loading={query.isLoading || mutation.isLoading}
disabled={query.isError || query.data?.blocked_by}
/>
</View>
</>
)
}

Expand Down
15 changes: 10 additions & 5 deletions src/components/Timeline/Shared/Attachment/Video.tsx
@@ -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'
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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 }
Expand All @@ -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()
Expand Down Expand Up @@ -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
Expand All @@ -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',
Expand Down
48 changes: 34 additions & 14 deletions src/i18n/en/screens/tabs.json
Expand Up @@ -69,6 +69,9 @@
"push": {
"name": "Push Notification"
},
"preferences": {
"name": "Preferences"
},
"profile": {
"name": "Edit Profile"
},
Expand All @@ -84,9 +87,6 @@
"settings": {
"name": "App Settings"
},
"webSettings": {
"name": "More Account Settings"
},
"switch": {
"name": "Switch Account"
}
Expand Down Expand Up @@ -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",
Expand All @@ -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"
Expand Down
158 changes: 158 additions & 0 deletions src/screens/Tabs/Me/Preferences.tsx
@@ -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

0 comments on commit f1b162a

Please sign in to comment.