Merge branch 'bluesky-social:main' into main

patches/expo-image-manipulator+13.0.5.patch

@@ -0,0 +1,48 @@
+diff --git a/node_modules/expo-image-manipulator/src/ImageManipulator.ts b/node_modules/expo-image-manipulator/src/ImageManipulator.ts
+index a80d9c8..babbb3b 100644
+--- a/node_modules/expo-image-manipulator/src/ImageManipulator.ts
++++ b/node_modules/expo-image-manipulator/src/ImageManipulator.ts
+@@ -43,7 +43,7 @@ export async function manipulateAsync(
+       context.extent(action.extent);
+     }
+   }
+-  const image = await context.renderAsync();
++  const image = await context.renderAsync(saveOptions.compress);
+   const result = await image.saveAsync({ format, ...rest });
+
+   // These shared objects will not be used anymore, so free up some memory.
+diff --git a/node_modules/expo-image-manipulator/src/ImageManipulatorContext.ts b/node_modules/expo-image-manipulator/src/ImageManipulatorContext.ts
+index 120d8d3..f8aa49c 100644
+--- a/node_modules/expo-image-manipulator/src/ImageManipulatorContext.ts
++++ b/node_modules/expo-image-manipulator/src/ImageManipulatorContext.ts
+@@ -52,7 +52,7 @@ export declare class ImageManipulatorContext extends SharedObject {
+   /**
+    * Awaits for all manipulation tasks to finish and resolves with a reference to the resulted native image.
+    */
+-  renderAsync(): Promise<ImageRef>;
++  renderAsync(compress?: number): Promise<ImageRef>;
+ }
+
+ export default ExpoImageManipulator.Context as typeof ImageManipulatorContext;
+diff --git a/node_modules/expo-image-manipulator/src/web/ImageManipulatorContext.web.ts b/node_modules/expo-image-manipulator/src/web/ImageManipulatorContext.web.ts
+index 428848c..363a57a 100644
+--- a/node_modules/expo-image-manipulator/src/web/ImageManipulatorContext.web.ts
++++ b/node_modules/expo-image-manipulator/src/web/ImageManipulatorContext.web.ts
+@@ -41,7 +41,7 @@ export default class ImageManipulatorContext extends SharedObject {
+     return this;
+   }
+
+-  async renderAsync(): Promise<ImageManipulatorImageRef> {
++  async renderAsync(compress?: number): Promise<ImageManipulatorImageRef> {
+     const canvas = await this.currentTask;
+
+     return new Promise((resolve) => {
+@@ -49,7 +49,7 @@ export default class ImageManipulatorContext extends SharedObject {
+         const url = blob ? URL.createObjectURL(blob) : canvas.toDataURL();
+
+         resolve(new ImageManipulatorImageRef(url, canvas.width, canvas.height));
+-      });
++      }, typeof compress === 'number' ? 'image/jpeg' : undefined, compress);
+     });
+   }
+

src/components/forms/TextField.tsx

@@ -11,7 +11,15 @@ import {
 
 import {HITSLOP_20} from '#/lib/constants'
 import {mergeRefs} from '#/lib/merge-refs'
-import {android, atoms as a, TextStyleProp, useTheme, web} from '#/alf'
+import {
+  android,
+  applyFonts,
+  atoms as a,
+  TextStyleProp,
+  useAlf,
+  useTheme,
+  web,
+} from '#/alf'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {Props as SVGIconProps} from '#/components/icons/common'
 import {Text} from '#/components/Typography'
@@ -148,6 +156,7 @@ export function createInput(Component: typeof TextInput) {
     ...rest
   }: InputProps) {
     const t = useTheme()
+    const {fonts} = useAlf()
     const ctx = React.useContext(Context)
     const withinRoot = Boolean(ctx.inputRef)
 
@@ -171,6 +180,48 @@ export function createInput(Component: typeof TextInput) {
 
     const refs = mergeRefs([ctx.inputRef, inputRef!].filter(Boolean))
 
+    const flattened = StyleSheet.flatten([
+      a.relative,
+      a.z_20,
+      a.flex_1,
+      a.text_md,
+      t.atoms.text,
+      a.px_xs,
+      {
+        // paddingVertical doesn't work w/multiline - esb
+        paddingTop: 12,
+        paddingBottom: 13,
+        lineHeight: a.text_md.fontSize * 1.1875,
+        textAlignVertical: rest.multiline ? 'top' : undefined,
+        minHeight: rest.multiline ? 80 : undefined,
+        minWidth: 0,
+      },
+      // fix for autofill styles covering border
+      web({
+        paddingTop: 10,
+        paddingBottom: 11,
+        marginTop: 2,
+        marginBottom: 2,
+      }),
+      android({
+        paddingTop: 8,
+        paddingBottom: 8,
+      }),
+      style,
+    ])
+
+    applyFonts(flattened, fonts.family)
+
+    // should always be defined on `typography`
+    // @ts-ignore
+    if (flattened.fontSize) {
+      // @ts-ignore
+      flattened.fontSize = Math.round(
+        // @ts-ignore
+        flattened.fontSize * fonts.scaleMultiplier,
+      )
+    }
+
     return (
       <>
         <Component
@@ -192,35 +243,7 @@ export function createInput(Component: typeof TextInput) {
           placeholderTextColor={t.palette.contrast_500}
           keyboardAppearance={t.name === 'light' ? 'light' : 'dark'}
           hitSlop={HITSLOP_20}
-          style={[
-            a.relative,
-            a.z_20,
-            a.flex_1,
-            a.text_md,
-            t.atoms.text,
-            a.px_xs,
-            {
-              // paddingVertical doesn't work w/multiline - esb
-              paddingTop: 12,
-              paddingBottom: 13,
-              lineHeight: a.text_md.fontSize * 1.1875,
-              textAlignVertical: rest.multiline ? 'top' : undefined,
-              minHeight: rest.multiline ? 80 : undefined,
-              minWidth: 0,
-            },
-            // fix for autofill styles covering border
-            web({
-              paddingTop: 10,
-              paddingBottom: 11,
-              marginTop: 2,
-              marginBottom: 2,
-            }),
-            android({
-              paddingTop: 8,
-              paddingBottom: 8,
-            }),
-            style,
-          ]}
+          style={flattened}
         />
 
         <View

src/lib/api/upload-blob.web.ts

@@ -11,7 +11,10 @@ export async function uploadBlob(
   input: string | Blob,
   encoding?: string,
 ): Promise<ComAtprotoRepoUploadBlob.Response> {
-  if (typeof input === 'string' && input.startsWith('data:')) {
+  if (
+    typeof input === 'string' &&
+    (input.startsWith('data:') || input.startsWith('blob:'))
+  ) {
     const blob = await fetch(input).then(r => r.blob())
     return agent.uploadBlob(blob, {encoding})
   }

src/screens/Profile/ProfileFeed/index.tsx

@@ -34,9 +34,12 @@ import {FAB} from '#/view/com/util/fab/FAB'
 import {Button} from '#/view/com/util/forms/Button'
 import {ListRef} from '#/view/com/util/List'
 import {LoadLatestBtn} from '#/view/com/util/load-latest/LoadLatestBtn'
-import {LoadingScreen} from '#/view/com/util/LoadingScreen'
+import {PostFeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {Text} from '#/view/com/util/text/Text'
-import {ProfileFeedHeader} from '#/screens/Profile/components/ProfileFeedHeader'
+import {
+  ProfileFeedHeader,
+  ProfileFeedHeaderSkeleton,
+} from '#/screens/Profile/components/ProfileFeedHeader'
 import * as Layout from '#/components/Layout'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFeed'>
@@ -92,12 +95,15 @@ export function ProfileFeedScreen(props: Props) {
   }
 
   return resolvedUri ? (
-    <Layout.Screen noInsetTop>
+    <Layout.Screen>
       <ProfileFeedScreenIntermediate feedUri={resolvedUri.uri} />
     </Layout.Screen>
   ) : (
     <Layout.Screen>
-      <LoadingScreen />
+      <Layout.Content>
+        <ProfileFeedHeaderSkeleton />
+        <PostFeedLoadingPlaceholder />
+      </Layout.Content>
     </Layout.Screen>
   )
 }
@@ -107,7 +113,12 @@ function ProfileFeedScreenIntermediate({feedUri}: {feedUri: string}) {
   const {data: info} = useFeedSourceInfoQuery({uri: feedUri})
 
   if (!preferences || !info) {
-    return <LoadingScreen />
+    return (
+      <Layout.Content>
+        <ProfileFeedHeaderSkeleton />
+        <PostFeedLoadingPlaceholder />
+      </Layout.Content>
+    )
   }
 
   return (

src/screens/Profile/components/ProfileFeedHeader.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import {View} from 'react-native'
-import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {AtUri} from '@atproto/api'
 import {msg, Plural, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -46,18 +45,53 @@ import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash'
 import * as Layout from '#/components/Layout'
 import {InlineLinkText} from '#/components/Link'
-import {Loader} from '#/components/Loader'
 import * as Menu from '#/components/Menu'
 import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog'
 import {RichText} from '#/components/RichText'
 import {Text} from '#/components/Typography'
 
+export function ProfileFeedHeaderSkeleton() {
+  const t = useTheme()
+
+  return (
+    <Layout.Header.Outer>
+      <Layout.Header.BackButton />
+      <Layout.Header.Content>
+        <View
+          style={[
+            a.w_full,
+            a.rounded_sm,
+            t.atoms.bg_contrast_25,
+            {
+              height: 44,
+            },
+          ]}
+        />
+      </Layout.Header.Content>
+      <Layout.Header.Slot>
+        <View
+          style={[
+            a.justify_center,
+            a.align_center,
+            a.rounded_full,
+            t.atoms.bg_contrast_25,
+            {
+              height: 34,
+              width: 34,
+            },
+          ]}>
+          <Pin size="lg" fill={t.atoms.text_contrast_low.color} />
+        </View>
+      </Layout.Header.Slot>
+    </Layout.Header.Outer>
+  )
+}
+
 export function ProfileFeedHeader({info}: {info: FeedSourceFeedInfo}) {
   const t = useTheme()
   const {_, i18n} = useLingui()
   const {hasSession} = useSession()
   const {gtPhone, gtMobile} = useBreakpoints()
-  const {top} = useSafeAreaInsets()
   const infoControl = Dialog.useDialogControl()
   const playHaptic = useHaptics()
 
@@ -148,12 +182,7 @@ export function ProfileFeedHeader({info}: {info: FeedSourceFeedInfo}) {
   return (
     <>
       <Layout.Center
-        style={[
-          t.atoms.bg,
-          a.z_10,
-          {paddingTop: top},
-          web([a.sticky, a.z_10, {top: 0}]),
-        ]}>
+        style={[t.atoms.bg, a.z_10, web([a.sticky, a.z_10, {top: 0}])]}>
         <Layout.Header.Outer>
           <Layout.Header.BackButton />
           <Layout.Header.Content align="left">
@@ -356,7 +385,7 @@ function DialogInner({
   const playHaptic = useHaptics()
   const control = Dialog.useDialogContext()
   const reportDialogControl = useReportDialogControl()
-  const [rt, loading] = useRichText(info.description.text)
+  const [rt] = useRichText(info.description.text)
   const {mutateAsync: likeFeed, isPending: isLikePending} = useLikeMutation()
   const {mutateAsync: unlikeFeed, isPending: isUnlikePending} =
     useUnlikeMutation()
@@ -396,9 +425,7 @@ function DialogInner({
     reportDialogControl.open()
   }, [reportDialogControl])
 
-  return loading ? (
-    <Loader size="xl" />
-  ) : (
+  return (
     <View style={[a.gap_md]}>
       <View style={[a.flex_row, a.align_center, a.gap_md]}>
         <UserAvatar type="algo" size={48} avatar={info.avatar} />