acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

move aspect ratio to atom (#9171)

Browse Source
This commit is contained in:
Samuel Newman
2025-10-10 19:20:41 +03:00
committed by GitHub
parent fe31cf4508
commit 3561fc8112
12 changed files with 31 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bskyembed/src/components/embed.tsx
+2 -2
View File
@@ -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
+12 -1
View File
@@ -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
+2 -2
View File
@@ -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
+3 -2
View File
@@ -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
+1 -3
View File
@@ -97,9 +97,7 @@ export const ExternalEmbed = ({
]}>
{imageUri && !embedPlayerParams ? (
<Image
style={{
aspectRatio: 1.91,
}}
style={[a.aspect_card]}
source={{uri: imageUri}}
accessibilityIgnoresInvertColors
/>
src/components/StarterPack/ShareDialog.tsx
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+2 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1
View File
@@ -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
+1 -1
View File
@@ -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
+4 -4
View File
@@ -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}