move aspect ratio to atom

bskyembed/src/components/embed.tsx

@@ -330,7 +330,7 @@ function ExternalEmbed({
       {content.external.thumb && (
         <img
           src={content.external.thumb}
-          className="aspect-[1.91/1] object-cover"
+          className="aspect-[1200/630] object-cover"
         />
       )}
       <div className="py-3 px-4">
@@ -435,7 +435,7 @@ function StarterPackEmbed({
     <Link
       href={starterPackHref}
       className="w-full rounded-xl overflow-hidden border dark:border-slate-600 flex flex-col items-stretch">
-      <img src={imageUri} className="aspect-[1.91/1] object-cover" />
+      <img src={imageUri} className="aspect-[1200/630] object-cover" />
       <div className="py-3 px-4">
         <div className="flex space-x-2 items-center">
           <img src={starterPackIcon} className="w-10 h-10" />

src/alf/atoms.ts

@@ -1,6 +1,7 @@
 import {type StyleProp, type ViewStyle} from 'react-native'
 import {atoms as baseAtoms} from '@bsky.app/alf'
 
+import {CARD_ASPECT_RATIO} from '#/lib/constants'
 import {native, platform, web} from '#/alf/util/platform'
 import * as Layout from '#/components/Layout'
 
@@ -31,6 +32,16 @@ export const atoms = {
     backgroundColor: 'transparent',
   },
 
+  /**
+   * Aspect ratios
+   */
+  aspect_square: {
+    aspectRatio: 1,
+  },
+  aspect_card: {
+    aspectRatio: CARD_ASPECT_RATIO,
+  },
+
   /*
    * Transition
    */
@@ -67,7 +78,7 @@ export const atoms = {
   }),
 
   /*
-   * Animaations
+   * Animations
    */
   fade_in: web({
     animation: 'fadeIn ease-out 0.15s',

src/components/InterestTabs.tsx

@@ -258,7 +258,7 @@ export function InterestTabs({
               t.atoms.border_contrast_low,
               t.atoms.bg,
               a.h_full,
-              {aspectRatio: 1},
+              a.aspect_square,
               a.rounded_full,
             ]}>
             <ButtonIcon icon={ArrowLeft} />
@@ -292,7 +292,7 @@ export function InterestTabs({
               t.atoms.border_contrast_low,
               t.atoms.bg,
               a.h_full,
-              {aspectRatio: 1},
+              a.aspect_square,
               a.rounded_full,
             ]}>
             <ButtonIcon icon={ArrowRight} />

src/components/MediaPreview.tsx

@@ -87,7 +87,7 @@ export function ImageItem({
 }) {
   const t = useTheme()
   return (
-    <View style={[a.relative, a.flex_1, {aspectRatio: 1, maxWidth: 100}]}>
+    <View style={[a.relative, a.flex_1, a.aspect_square, {maxWidth: 100}]}>
       <Image
         key={thumbnail}
         source={{uri: thumbnail}}
@@ -131,7 +131,8 @@ export function VideoItem({
         style={[
           {backgroundColor: 'black'},
           a.flex_1,
-          {aspectRatio: 1, maxWidth: 100},
+          a.aspect_square,
+          {maxWidth: 100},
           a.justify_center,
           a.align_center,
         ]}>

src/components/Post/Embed/ExternalEmbed/index.tsx

@@ -97,9 +97,7 @@ export const ExternalEmbed = ({
           ]}>
           {imageUri && !embedPlayerParams ? (
             <Image
-              style={{
+              style={[a.aspect_card]}
-                aspectRatio: 1.91,
-              }}
               source={{uri: imageUri}}
               accessibilityIgnoresInvertColors
             />

src/components/StarterPack/ShareDialog.tsx

@@ -91,8 +91,8 @@ function ShareDialogInner({
               source={{uri: imageUrl}}
               style={[
                 a.rounded_sm,
+                a.aspect_card,
                 {
-                  aspectRatio: 1200 / 630,
                   transform: [{scale: gtMobile ? 0.85 : 1}],
                   marginTop: gtMobile ? -20 : 0,
                 },

src/components/StarterPack/StarterPackCard.tsx

@@ -191,7 +191,7 @@ export function Embed({
       <Link starterPack={starterPack}>
         <Image
           source={imageUri}
-          style={[a.w_full, {aspectRatio: 1.91}]}
+          style={[a.w_full, a.aspect_card]}
           accessibilityIgnoresInvertColors={true}
         />
         <View style={[a.px_sm, a.py_md]}>

src/components/dialogs/GifSelect.tsx

@@ -300,7 +300,8 @@ export function GifPreview({
             a.flex_1,
             a.mb_sm,
             a.rounded_sm,
-            {aspectRatio: 1, opacity: pressed ? 0.8 : 1},
+            a.aspect_card,
+            {opacity: pressed ? 0.8 : 1},
             t.atoms.bg_contrast_25,
           ]}
           source={{

src/components/live/LiveStatusDialog.tsx

@@ -102,7 +102,7 @@ export function LiveStatus({
           style={[
             t.atoms.bg_contrast_25,
             a.w_full,
-            {aspectRatio: 1.91},
+            a.aspect_card,
             android([
               a.overflow_hidden,
               {

src/lib/constants.ts

@@ -17,6 +17,7 @@ export const EMBED_SERVICE = 'https://embed.bsky.app'
 export const EMBED_SCRIPT = `${EMBED_SERVICE}/static/embed.js`
 export const BSKY_DOWNLOAD_URL = 'https://bsky.app/download'
 export const STARTER_PACK_MAX_SIZE = 150
+export const CARD_ASPECT_RATIO = 1200 / 630
 
 // HACK
 // Yes, this is exactly what it looks like. It's a hard-coded constant

src/screens/Onboarding/StepFinished.tsx

@@ -401,7 +401,7 @@ function ValueProposition({
             ]}>
             <Image
               source={image}
-              style={[a.w_full, {aspectRatio: 1}]}
+              style={[a.w_full, a.aspect_square]}
               alt={alt}
               accessibilityIgnoresInvertColors={false} // I guess we do need it to blend into the background
             />

src/view/com/util/images/ImageLayoutGrid.tsx

@@ -67,7 +67,7 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
       const containerRefs = [containerRef1, containerRef2]
       return (
         <View style={[a.flex_1, a.flex_row, gap]}>
-          <View style={[a.flex_1, {aspectRatio: 1}]}>
+          <View style={[a.flex_1, a.aspect_square]}>
             <GalleryItem
               {...props}
               index={0}
@@ -76,7 +76,7 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
               thumbDimsRef={thumbDimsRef}
             />
           </View>
-          <View style={[a.flex_1, {aspectRatio: 1}]}>
+          <View style={[a.flex_1, a.aspect_square]}>
             <GalleryItem
               {...props}
               index={1}
@@ -93,7 +93,7 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
       const containerRefs = [containerRef1, containerRef2, containerRef3]
       return (
         <View style={[a.flex_1, a.flex_row, gap]}>
-          <View style={[a.flex_1, {aspectRatio: 1}]}>
+          <View style={[a.flex_1, a.aspect_square]}>
             <GalleryItem
               {...props}
               index={0}
@@ -102,7 +102,7 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
               thumbDimsRef={thumbDimsRef}
             />
           </View>
-          <View style={[a.flex_1, {aspectRatio: 1}, gap]}>
+          <View style={[a.flex_1, a.aspect_square, gap]}>
             <View style={[a.flex_1]}>
               <GalleryItem
                 {...props}