From 752d33d5b3b801f7818ebbb50eb380126340ac2a Mon Sep 17 00:00:00 2001
From: xmflsct <me@xmflsct.com>
Date: Sun, 29 Jan 2023 17:28:49 +0100
Subject: [PATCH] Dimming images for dark mode

---
 src/components/Account.tsx                         |  1 +
 src/components/GracefullyImage.tsx                 | 14 ++++++++++++--
 src/components/Timeline/Conversation.tsx           |  1 +
 .../Timeline/Shared/Attachment/Audio.tsx           |  6 ++----
 .../Timeline/Shared/Attachment/Image.tsx           |  1 +
 src/components/Timeline/Shared/Avatar.tsx          |  4 ++--
 src/components/Timeline/Shared/Card.tsx            |  1 +
 src/screens/Tabs/Shared/Account/Attachments.tsx    |  1 +
 src/screens/Tabs/Shared/Account/Header.tsx         |  1 +
 .../Tabs/Shared/Account/Information/Avatar.tsx     |  1 +
 src/screens/Tabs/index.tsx                         |  5 -----
 11 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/components/Account.tsx b/src/components/Account.tsx
index a59b51f1..da062c03 100644
--- a/src/components/Account.tsx
+++ b/src/components/Account.tsx
@@ -45,6 +45,7 @@ const ComponentAccount: React.FC<PropsWithChildren & Props> = ({ account, props,
                 borderRadius: 8,
                 marginRight: StyleConstants.Spacing.S
               }}
+              dim
             />
             <View style={{ flex: 1 }}>
               <CustomText numberOfLines={1}>
diff --git a/src/components/GracefullyImage.tsx b/src/components/GracefullyImage.tsx
index 9a708980..30aec804 100644
--- a/src/components/GracefullyImage.tsx
+++ b/src/components/GracefullyImage.tsx
@@ -38,6 +38,7 @@ export interface Props {
       height: number
     }>
   >
+  dim?: boolean
 }
 
 const GracefullyImage = ({
@@ -50,10 +51,11 @@ const GracefullyImage = ({
   onPress,
   style,
   imageStyle,
-  setImageDimensions
+  setImageDimensions,
+  dim
 }: Props) => {
   const { reduceMotionEnabled } = useAccessibility()
-  const { colors } = useTheme()
+  const { colors, theme } = useTheme()
   const [imageLoaded, setImageLoaded] = useState(false)
 
   const [currentUri, setCurrentUri] = useState<string | undefined>(uri.original || uri.remote)
@@ -111,6 +113,14 @@ const GracefullyImage = ({
         }}
       />
       {blurhashView()}
+      {dim && theme !== 'light' ? (
+        <View
+          style={[
+            styles.placeholder,
+            { backgroundColor: 'black', opacity: theme === 'dark_lighter' ? 0.18 : 0.36 }
+          ]}
+        />
+      ) : null}
     </Pressable>
   )
 }
diff --git a/src/components/Timeline/Conversation.tsx b/src/components/Timeline/Conversation.tsx
index 3f492e49..182fde47 100644
--- a/src/components/Timeline/Conversation.tsx
+++ b/src/components/Timeline/Conversation.tsx
@@ -88,6 +88,7 @@ const TimelineConversation: React.FC<Props> = ({ conversation, queryKey, highlig
                       : StyleConstants.Avatar.M
                 }}
                 style={{ flex: 1, flexBasis: '50%' }}
+                dim
               />
             ))}
           </View>
diff --git a/src/components/Timeline/Shared/Attachment/Audio.tsx b/src/components/Timeline/Shared/Attachment/Audio.tsx
index 3c3cd5ee..94cbdde0 100644
--- a/src/components/Timeline/Shared/Attachment/Audio.tsx
+++ b/src/components/Timeline/Shared/Attachment/Audio.tsx
@@ -83,11 +83,9 @@ const AttachmentAudio: React.FC<Props> = ({ total, index, sensitiveShown, audio
           <>
             {audio.preview_url ? (
               <GracefullyImage
-                uri={{
-                  original: audio.preview_url,
-                  remote: audio.preview_remote_url
-                }}
+                uri={{ original: audio.preview_url, remote: audio.preview_remote_url }}
                 style={styles.background}
+                dim
               />
             ) : null}
             <Button
diff --git a/src/components/Timeline/Shared/Attachment/Image.tsx b/src/components/Timeline/Shared/Attachment/Image.tsx
index 1069a36a..902bfcce 100644
--- a/src/components/Timeline/Shared/Attachment/Image.tsx
+++ b/src/components/Timeline/Shared/Attachment/Image.tsx
@@ -39,6 +39,7 @@ const AttachmentImage = ({
           blurhash={image.blurhash}
           onPress={() => navigateToImagesViewer(image.id)}
           style={{ aspectRatio: aspectRatio({ total, index, ...image.meta?.original }) }}
+          dim
         />
       </View>
       <AttachmentAltText sensitiveShown={sensitiveShown} text={image.description} />
diff --git a/src/components/Timeline/Shared/Avatar.tsx b/src/components/Timeline/Shared/Avatar.tsx
index b1f6a57c..2357fa40 100644
--- a/src/components/Timeline/Shared/Avatar.tsx
+++ b/src/components/Timeline/Shared/Avatar.tsx
@@ -31,8 +31,7 @@ const TimelineAvatar: React.FC<Props> = ({ account }) => {
         })
       })}
       onPress={() =>
-        !disableOnPress &&
-        navigation.push('Tab-Shared-Account', { account: actualAccount })
+        !disableOnPress && navigation.push('Tab-Shared-Account', { account: actualAccount })
       }
       uri={{ original: actualAccount.avatar, static: actualAccount.avatar_static }}
       dimension={
@@ -51,6 +50,7 @@ const TimelineAvatar: React.FC<Props> = ({ account }) => {
         overflow: 'hidden',
         marginRight: StyleConstants.Spacing.S
       }}
+      dim
     />
   )
 }
diff --git a/src/components/Timeline/Shared/Card.tsx b/src/components/Timeline/Shared/Card.tsx
index 0ce1df8f..55f7285a 100644
--- a/src/components/Timeline/Shared/Card.tsx
+++ b/src/components/Timeline/Shared/Card.tsx
@@ -86,6 +86,7 @@ const TimelineCard: React.FC = () => {
             blurhash={status.card.blurhash}
             style={{ flexBasis: StyleConstants.Font.LineHeight.M * 5 }}
             imageStyle={{ borderTopLeftRadius: 6, borderBottomLeftRadius: 6 }}
+            dim
           />
         ) : null}
         <View style={{ flex: 1, padding: StyleConstants.Spacing.S }}>
diff --git a/src/screens/Tabs/Shared/Account/Attachments.tsx b/src/screens/Tabs/Shared/Account/Attachments.tsx
index 42313cda..e374a1ef 100644
--- a/src/screens/Tabs/Shared/Account/Attachments.tsx
+++ b/src/screens/Tabs/Shared/Account/Attachments.tsx
@@ -93,6 +93,7 @@ const AccountAttachments: React.FC = () => {
                 dimension={{ width: width, height: width }}
                 style={{ marginLeft: StyleConstants.Spacing.Global.PagePadding }}
                 onPress={() => navigation.push('Tab-Shared-Toot', { toot: item })}
+                dim
               />
             )
           }
diff --git a/src/screens/Tabs/Shared/Account/Header.tsx b/src/screens/Tabs/Shared/Account/Header.tsx
index c8bc1c1e..f2ba64c6 100644
--- a/src/screens/Tabs/Shared/Account/Header.tsx
+++ b/src/screens/Tabs/Shared/Account/Header.tsx
@@ -28,6 +28,7 @@ const AccountHeader: React.FC = () => {
           )
         }
       }}
+      dim
     />
   )
 }
diff --git a/src/screens/Tabs/Shared/Account/Information/Avatar.tsx b/src/screens/Tabs/Shared/Account/Information/Avatar.tsx
index 8865f8a1..265368d8 100644
--- a/src/screens/Tabs/Shared/Account/Information/Avatar.tsx
+++ b/src/screens/Tabs/Shared/Account/Information/Avatar.tsx
@@ -42,6 +42,7 @@ const AccountInformationAvatar: React.FC = () => {
           }
         }
       }}
+      dim
     />
   )
 }
diff --git a/src/screens/Tabs/index.tsx b/src/screens/Tabs/index.tsx
index 4d15445d..f703ee06 100644
--- a/src/screens/Tabs/index.tsx
+++ b/src/screens/Tabs/index.tsx
@@ -89,11 +89,6 @@ const ScreenTabs = () => {
         name='Tab-Me'
         component={TabMe}
         listeners={({ navigation }) => ({
-          tabPress: () => {
-            if (navigation.isFocused()) {
-              navigation.navigate('Tab-Me', { screen: 'Tab-Me-Switch' })
-            }
-          },
           tabLongPress: () => {
             haptics('Light')
             navigation.navigate('Tab-Me', { screen: 'Tab-Me-Root' })