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

Increase rounding for all embeds (#5421)

Browse Source 
* tweak image styles

* fix reply image preview and covert to atoms

* increase rounding on media inset border

* decrease gap on desktop

* fix inset styles

* increase rounding on embeds to `md`

* Couple edge cases

---------

Co-authored-by: Eric Bailey <git@esb.lol>
This commit is contained in:
Samuel Newman
2024-09-20 20:47:28 +01:00
committed by GitHub
parent c85a271ef6
commit 79a2f8d528
14 changed files with 223 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MediaInsetBorder.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export function MediaInsetBorder({
return (
<Fill
style={[
a.rounded_sm,
a.rounded_md,
a.border,
opaque
? [t.atoms.border_contrast_low]
src/view/com/composer/ComposerReplyTo.tsx
+67 -90
View File
@@ -16,7 +16,7 @@ import {ComposerOptsPostRef} from 'state/shell/composer'
import {QuoteEmbed} from 'view/com/util/post-embeds/QuoteEmbed'
import {Text} from 'view/com/util/text/Text'
import {PreviewableUserAvatar} from 'view/com/util/UserAvatar'
import {useTheme} from '#/alf'
import {atoms as a, useTheme} from '#/alf'
export function ComposerReplyTo({replyTo}: {replyTo: ComposerOptsPostRef}) {
const t = useTheme()
@@ -122,94 +122,87 @@ function ComposerReplyToImages({
showFull: boolean
}) {
return (
<View
style={{
width: 65,
flexDirection: 'column',
alignItems: 'center',
}}>
<View style={styles.imagesContainer}>
{(images.length === 1 && (
<Image
source={{uri: images[0].thumb}}
style={styles.singleImage}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
<View style={[styles.imagesContainer, a.mx_xs]}>
{(images.length === 1 && (
<Image
source={{uri: images[0].thumb}}
style={[a.flex_1]}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
)) ||
(images.length === 2 && (
<View style={[a.flex_1, a.flex_row, a.gap_2xs]}>
<Image
source={{uri: images[0].thumb}}
style={[a.flex_1]}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
<Image
source={{uri: images[1].thumb}}
style={[a.flex_1]}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
</View>
)) ||
(images.length === 2 && (
<View style={[styles.imagesInner, styles.imagesRow]}>
(images.length === 3 && (
<View style={[a.flex_1, a.flex_row, a.gap_2xs]}>
<Image
source={{uri: images[0].thumb}}
style={[a.flex_1]}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
<View style={[a.flex_1, a.gap_2xs]}>
<Image
source={{uri: images[1].thumb}}
style={[a.flex_1]}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
<Image
source={{uri: images[2].thumb}}
style={[a.flex_1]}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
</View>
</View>
)) ||
(images.length === 4 && (
<View style={[a.flex_1, a.gap_2xs]}>
<View style={[a.flex_1, a.flex_row, a.gap_2xs]}>
<Image
source={{uri: images[0].thumb}}
style={styles.doubleImageTall}
style={[a.flex_1]}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
<Image
source={{uri: images[1].thumb}}
style={styles.doubleImageTall}
style={[a.flex_1]}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
</View>
)) ||
(images.length === 3 && (
<View style={[styles.imagesInner, styles.imagesRow]}>
<View style={[a.flex_1, a.flex_row, a.gap_2xs]}>
<Image
source={{uri: images[0].thumb}}
style={styles.doubleImageTall}
source={{uri: images[2].thumb}}
style={[a.flex_1]}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
<Image
source={{uri: images[3].thumb}}
style={[a.flex_1]}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
<View style={styles.imagesInner}>
<Image
source={{uri: images[1].thumb}}
style={styles.doubleImage}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
<Image
source={{uri: images[2].thumb}}
style={styles.doubleImage}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
</View>
</View>
)) ||
(images.length === 4 && (
<View style={styles.imagesInner}>
<View style={[styles.imagesInner, styles.imagesRow]}>
<Image
source={{uri: images[0].thumb}}
style={styles.doubleImage}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
<Image
source={{uri: images[1].thumb}}
style={styles.doubleImage}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
</View>
<View style={[styles.imagesInner, styles.imagesRow]}>
<Image
source={{uri: images[2].thumb}}
style={styles.doubleImage}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
<Image
source={{uri: images[3].thumb}}
style={styles.doubleImage}
cachePolicy="memory-disk"
accessibilityIgnoresInvertColors
/>
</View>
</View>
))}
</View>
</View>
))}
</View>
)
}
@@ -240,23 +233,7 @@ const styles = StyleSheet.create({
borderRadius: 6,
overflow: 'hidden',
marginTop: 2,
},
imagesInner: {
gap: 2,
},
imagesRow: {
flexDirection: 'row',
},
singleImage: {
width: 65,
height: 65,
},
doubleImageTall: {
width: 32.5,
height: 65,
},
doubleImage: {
width: 32.5,
height: 32.5,
height: 64,
width: 64,
},
})
src/view/com/util/images/AutoSizedImage.tsx
+2 -2
View File
@@ -88,7 +88,7 @@ export function ConstrainedImage({
<View
style={[
a.h_full,
a.rounded_sm,
a.rounded_md,
a.overflow_hidden,
t.atoms.bg_contrast_25,
fullBleed ? a.w_full : {aspectRatio},
@@ -219,7 +219,7 @@ export function AutoSizedImage({
accessibilityHint={_(msg`Tap to view full image`)}
style={[
a.w_full,
a.rounded_sm,
a.rounded_md,
a.overflow_hidden,
t.atoms.bg_contrast_25,
{aspectRatio: max},
src/view/com/util/images/Gallery.tsx
+10 -9
View File
@@ -1,6 +1,6 @@
import React, {ComponentProps, FC} from 'react'
import {Pressable, View} from 'react-native'
import {Image} from 'expo-image'
import React from 'react'
import {Pressable, StyleProp, View, ViewStyle} from 'react-native'
import {Image, ImageStyle} from 'expo-image'
import {AppBskyEmbedImages} from '@atproto/api'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
@@ -13,17 +13,18 @@ import {Text} from '#/components/Typography'
type EventFunction = (index: number) => void
interface GalleryItemProps {
interface Props {
images: AppBskyEmbedImages.ViewImage[]
index: number
onPress?: EventFunction
onLongPress?: EventFunction
onPressIn?: EventFunction
imageStyle?: ComponentProps<typeof Image>['style']
imageStyle?: StyleProp<ImageStyle>
viewContext?: PostEmbedViewContext
insetBorderStyle?: StyleProp<ViewStyle>
}
export const GalleryItem: FC<GalleryItemProps> = ({
export function GalleryItem({
images,
index,
imageStyle,
@@ -31,7 +32,8 @@ export const GalleryItem: FC<GalleryItemProps> = ({
onPressIn,
onLongPress,
viewContext,
}) => {
insetBorderStyle,
}: Props) {
const t = useTheme()
const {_} = useLingui()
const largeAltBadge = useLargeAltBadgeEnabled()
@@ -47,7 +49,6 @@ export const GalleryItem: FC<GalleryItemProps> = ({
onLongPress={onLongPress ? () => onLongPress(index) : undefined}
style={[
a.flex_1,
a.rounded_sm,
a.overflow_hidden,
t.atoms.bg_contrast_25,
imageStyle,
@@ -63,7 +64,7 @@ export const GalleryItem: FC<GalleryItemProps> = ({
accessibilityHint=""
accessibilityIgnoresInvertColors
/>
<MediaInsetBorder />
<MediaInsetBorder style={insetBorderStyle} />
</Pressable>
{hasAlt && !hideBadges ? (
<View
src/view/com/util/images/ImageLayoutGrid.tsx
+109 -21
View File
@@ -1,5 +1,5 @@
import React from 'react'
import {StyleProp, View, ViewStyle} from 'react-native'
import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
import {AppBskyEmbedImages} from '@atproto/api'
import {PostEmbedViewContext} from '#/view/com/util/post-embeds/types'
@@ -22,14 +22,23 @@ export function ImageLayoutGrid({style, ...props}: ImageLayoutGridProps) {
? gtMobile
? a.gap_xs
: a.gap_2xs
: gtMobile
? a.gap_sm
: a.gap_xs
const count = props.images.length
const aspectRatio = count === 2 ? 2 : count === 3 ? 1.5 : 1
let aspectRatio
switch (count) {
case 2:
aspectRatio = 2
break
case 3:
aspectRatio = 2
break
case 4:
aspectRatio = undefined
break
}
return (
<View style={style}>
<View style={[gap, {aspectRatio}]}>
<View style={[gap, a.rounded_md, a.overflow_hidden, {aspectRatio}]}>
<ImageLayoutGridInner {...props} gap={gap} />
</View>
</View>
@@ -54,10 +63,18 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
return (
<View style={[a.flex_1, a.flex_row, gap]}>
<View style={[a.flex_1, {aspectRatio: 1}]}>
<GalleryItem {...props} index={0} />
<GalleryItem
{...props}
index={0}
insetBorderStyle={noCorners(['topRight', 'bottomRight'])}
/>
</View>
<View style={[a.flex_1, {aspectRatio: 1}]}>
<GalleryItem {...props} index={1} />
<GalleryItem
{...props}
index={1}
insetBorderStyle={noCorners(['topLeft', 'bottomLeft'])}
/>
</View>
</View>
)
@@ -65,15 +82,35 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
case 3:
return (
<View style={[a.flex_1, a.flex_row, gap]}>
<View style={{flex: 2}}>
<GalleryItem {...props} index={0} />
<View style={[a.flex_1]}>
<GalleryItem
{...props}
index={0}
insetBorderStyle={noCorners(['topRight', 'bottomRight'])}
/>
</View>
<View style={[a.flex_1, gap]}>
<View style={[a.flex_1, {aspectRatio: 1}]}>
<GalleryItem {...props} index={1} />
<View style={[a.flex_1]}>
<GalleryItem
{...props}
index={1}
insetBorderStyle={noCorners([
'topLeft',
'bottomLeft',
'bottomRight',
])}
/>
</View>
<View style={[a.flex_1, {aspectRatio: 1}]}>
<GalleryItem {...props} index={2} />
<View style={[a.flex_1]}>
<GalleryItem
{...props}
index={2}
insetBorderStyle={noCorners([
'topLeft',
'bottomLeft',
'topRight',
])}
/>
</View>
</View>
</View>
@@ -83,19 +120,51 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
return (
<>
<View style={[a.flex_row, gap]}>
<View style={[a.flex_1, {aspectRatio: 1}]}>
<GalleryItem {...props} index={0} />
<View style={[a.flex_1, {aspectRatio: 1.5}]}>
<GalleryItem
{...props}
index={0}
insetBorderStyle={noCorners([
'bottomLeft',
'topRight',
'bottomRight',
])}
/>
</View>
<View style={[a.flex_1, {aspectRatio: 1}]}>
<GalleryItem {...props} index={1} />
<View style={[a.flex_1, {aspectRatio: 1.5}]}>
<GalleryItem
{...props}
index={1}
insetBorderStyle={noCorners([
'topLeft',
'bottomLeft',
'bottomRight',
])}
/>
</View>
</View>
<View style={[a.flex_row, gap]}>
<View style={[a.flex_1, {aspectRatio: 1}]}>
<GalleryItem {...props} index={2} />
<View style={[a.flex_1, {aspectRatio: 1.5}]}>
<GalleryItem
{...props}
index={2}
insetBorderStyle={noCorners([
'topLeft',
'topRight',
'bottomRight',
])}
/>
</View>
<View style={[a.flex_1, {aspectRatio: 1}]}>
<GalleryItem {...props} index={3} />
<View style={[a.flex_1, {aspectRatio: 1.5}]}>
<GalleryItem
{...props}
index={3}
insetBorderStyle={noCorners([
'topLeft',
'bottomLeft',
'topRight',
])}
/>
</View>
</View>
</>
@@ -105,3 +174,22 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
return null
}
}
function noCorners(
corners: ('topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight')[],
) {
const styles: StyleProp<ViewStyle>[] = []
if (corners.includes('topLeft')) {
styles.push({borderTopLeftRadius: 0})
}
if (corners.includes('topRight')) {
styles.push({borderTopRightRadius: 0})
}
if (corners.includes('bottomLeft')) {
styles.push({borderBottomLeftRadius: 0})
}
if (corners.includes('bottomRight')) {
styles.push({borderBottomRightRadius: 0})
}
return StyleSheet.flatten(styles)
}
src/view/com/util/post-embeds/ExternalGifEmbed.tsx
+1 -1
View File
@@ -117,7 +117,7 @@ export function ExternalGifEmbed({
style={[
{height: imageDims.height},
styles.gifContainer,
a.rounded_sm,
a.rounded_md,
a.overflow_hidden,
{
borderBottomLeftRadius: 0,
src/view/com/util/post-embeds/ExternalLinkEmbed.tsx
+6 -6
View File
@@ -59,15 +59,15 @@ export const ExternalLinkEmbed = ({
}
return (
<View style={[a.flex_col, a.w_full]}>
<View style={[a.flex_col, a.rounded_md, a.w_full]}>
<LinkWrapper link={link} onOpen={onOpen} style={style}>
{imageUri && !embedPlayerParams ? (
<View>
<Image
style={{
aspectRatio: 1.91,
borderTopRightRadius: 8,
borderTopLeftRadius: 8,
borderTopRightRadius: a.rounded_md.borderRadius,
borderTopLeftRadius: a.rounded_md.borderRadius,
}}
source={{uri: imageUri}}
accessibilityIgnoresInvertColors
@@ -101,11 +101,11 @@ export const ExternalLinkEmbed = ({
a.py_sm,
t.atoms.border_contrast_low,
{
borderBottomRightRadius: 8,
borderBottomLeftRadius: 8,
borderBottomRightRadius: a.rounded_md.borderRadius,
borderBottomLeftRadius: a.rounded_md.borderRadius,
paddingHorizontal: isMobile ? 10 : 14,
},
!imageUri && !embedPlayerParams && [a.border, a.rounded_sm],
!imageUri && !embedPlayerParams && [a.border, a.rounded_md],
]}>
<Text
type="sm"
src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx
+7 -7
View File
@@ -229,7 +229,7 @@ export function ExternalPlayer({
collapsable={false}
style={[
aspect,
a.rounded_sm,
a.rounded_md,
a.overflow_hidden,
{
borderBottomLeftRadius: 0,
@@ -245,7 +245,7 @@ export function ExternalPlayer({
/>
<Fill
style={[
a.rounded_sm,
a.rounded_md,
t.name === 'light' ? t.atoms.bg_contrast_975 : t.atoms.bg,
{
borderBottomLeftRadius: 0,
@@ -267,7 +267,7 @@ export function ExternalPlayer({
) : (
<Fill
style={[
a.rounded_sm,
a.rounded_md,
{
backgroundColor:
t.name === 'light' ? t.palette.contrast_975 : 'black',
@@ -304,8 +304,8 @@ export function ExternalPlayer({
const styles = StyleSheet.create({
topRadius: {
borderTopLeftRadius: 8,
borderTopRightRadius: 8,
borderTopLeftRadius: a.rounded_md.borderRadius,
borderTopRightRadius: a.rounded_md.borderRadius,
},
overlayContainer: {
flex: 1,
@@ -319,8 +319,8 @@ const styles = StyleSheet.create({
zIndex: 3,
},
webview: {
borderTopRightRadius: 8,
borderTopLeftRadius: 8,
borderTopRightRadius: a.rounded_md.borderRadius,
borderTopLeftRadius: a.rounded_md.borderRadius,
backgroundColor: 'transparent',
},
gifContainer: {
src/view/com/util/post-embeds/GifEmbed.tsx
+4 -4
View File
@@ -53,7 +53,7 @@ function PlaybackControls({
a.inset_0,
a.w_full,
a.h_full,
a.rounded_sm,
a.rounded_md,
{
zIndex: 2,
backgroundColor: !isLoaded
@@ -117,10 +117,10 @@ export function GifEmbed({
)
return (
<View style={[a.rounded_sm, a.overflow_hidden, a.mt_sm, style]}>
<View style={[a.rounded_md, a.overflow_hidden, a.mt_sm, style]}>
<View
style={[
a.rounded_sm,
a.rounded_md,
a.overflow_hidden,
{aspectRatio: params.dimensions!.width / params.dimensions!.height},
]}>
@@ -132,7 +132,7 @@ export function GifEmbed({
<GifView
source={params.playerUri}
placeholderSource={link.thumb}
style={[a.flex_1, a.rounded_sm]}
style={[a.flex_1, a.rounded_md]}
autoplay={!autoplayDisabled}
onPlayerStateChange={onPlayerStateChange}
ref={playerRef}
src/view/com/util/post-embeds/QuoteEmbed.tsx
+8 -8
View File
@@ -219,7 +219,14 @@ export function QuoteEmbed({
return (
<ContentHider
modui={moderation?.ui('contentList')}
style={[styles.container, a.border, t.atoms.border_contrast_low, style]}
style={[
a.rounded_md,
a.p_md,
a.mt_sm,
a.border,
t.atoms.border_contrast_low,
style,
]}
childContainerStyle={[a.pt_sm]}>
<Link
hoverStyle={{borderColor: pal.colors.borderLinkHover}}
@@ -293,13 +300,6 @@ function viewRecordToPostView(
}
const styles = StyleSheet.create({
container: {
borderRadius: 8,
marginTop: 8,
paddingVertical: 12,
paddingHorizontal: 12,
borderWidth: StyleSheet.hairlineWidth,
},
errorContainer: {
flexDirection: 'row',
alignItems: 'center',
src/view/com/util/post-embeds/VideoEmbed.tsx
+2 -2
View File
@@ -40,11 +40,11 @@ export function VideoEmbed({embed}: Props) {
<View
style={[
a.w_full,
a.rounded_sm,
a.rounded_md,
a.overflow_hidden,
{aspectRatio},
{backgroundColor: 'black'},
a.my_xs,
a.mt_xs,
]}>
<ErrorBoundary renderError={renderError} key={key}>
<InnerWrapper embed={embed} />
src/view/com/util/post-embeds/VideoEmbed.web.tsx
+2 -2
View File
@@ -66,8 +66,8 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
{aspectRatio},
{backgroundColor: 'black'},
a.relative,
a.rounded_sm,
a.my_xs,
a.rounded_md,
a.mt_xs,
]}>
<div
ref={ref}
src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb.tsx
+1 -1
View File
@@ -78,7 +78,7 @@ export function VideoEmbedInnerWeb({
}, [embed.playlist])
return (
<View style={[a.flex_1, a.rounded_sm, a.overflow_hidden]}>
<View style={[a.flex_1, a.rounded_md, a.overflow_hidden]}>
<div ref={containerRef} style={{height: '100%', width: '100%'}}>
<figure style={{margin: 0, position: 'absolute', inset: 0}}>
<video
src/view/com/util/post-embeds/index.tsx
+3 -6
View File
@@ -138,7 +138,7 @@ export function PostEmbeds({
const image = images[0]
return (
<ContentHider modui={moderation?.ui('contentMedia')}>
<View style={[styles.container, style]}>
<View style={[a.mt_sm, style]}>
<AutoSizedImage
crop={
viewContext === PostEmbedViewContext.ThreadHighlighted
@@ -162,7 +162,7 @@ export function PostEmbeds({
return (
<ContentHider modui={moderation?.ui('contentMedia')}>
<View style={[styles.container, style]}>
<View style={[a.mt_sm, style]}>
<ImageLayoutGrid
images={embed.images}
onPress={_openLightbox}
@@ -184,7 +184,7 @@ export function PostEmbeds({
<ExternalLinkEmbed
link={link}
onOpen={onOpen}
style={[styles.container, style]}
style={[a.mt_sm, style]}
/>
</ContentHider>
)
@@ -247,9 +247,6 @@ function MaybeListCard({view}: {view: AppBskyGraphDefs.ListView}) {
}
const styles = StyleSheet.create({
container: {
marginTop: 8,
},
altContainer: {
backgroundColor: 'rgba(0, 0, 0, 0.75)',
borderRadius: 6,