diff options
Diffstat (limited to 'src/view/com/util/post-embeds')
| -rw-r--r-- | src/view/com/util/post-embeds/ExternalLinkEmbed.tsx | 63 | ||||
| -rw-r--r-- | src/view/com/util/post-embeds/index.tsx | 19 |
2 files changed, 48 insertions, 34 deletions
diff --git a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx index 81f1ca560..d5bb38fb2 100644 --- a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx +++ b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx @@ -3,8 +3,8 @@ import {Image} from 'expo-image' import {Text} from '../text/Text' import {StyleSheet, View} from 'react-native' import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {AppBskyEmbedExternal} from '@atproto/api' -import {isDesktopWeb} from 'platform/detection' import {toNiceDomain} from 'lib/strings/url-helpers' export const ExternalLinkEmbed = ({ @@ -15,10 +15,31 @@ export const ExternalLinkEmbed = ({ imageChild?: React.ReactNode }) => { const pal = usePalette('default') + const {isMobile} = useWebMediaQueries() return ( - <View style={styles.extContainer}> + <View + style={{ + flexDirection: isMobile ? 'column' : 'row', + }}> {link.thumb ? ( - <View style={styles.extImageContainer}> + <View + style={ + !isMobile + ? { + borderTopLeftRadius: 6, + borderBottomLeftRadius: 6, + width: 120, + aspectRatio: 1, + overflow: 'hidden', + } + : { + borderTopLeftRadius: 6, + borderTopRightRadius: 6, + width: '100%', + height: 200, + overflow: 'hidden', + } + }> <Image style={styles.extImage} source={{uri: link.thumb}} @@ -27,7 +48,13 @@ export const ExternalLinkEmbed = ({ {imageChild} </View> ) : undefined} - <View style={styles.extInner}> + <View + style={{ + paddingHorizontal: isMobile ? 10 : 14, + paddingTop: 8, + paddingBottom: 10, + flex: !isMobile ? 1 : undefined, + }}> <Text type="sm" numberOfLines={1} @@ -36,14 +63,14 @@ export const ExternalLinkEmbed = ({ </Text> <Text type="lg-bold" - numberOfLines={isDesktopWeb ? 2 : 4} + numberOfLines={isMobile ? 4 : 2} style={[pal.text]}> {link.title || link.uri} </Text> {link.description ? ( <Text type="md" - numberOfLines={isDesktopWeb ? 2 : 4} + numberOfLines={isMobile ? 4 : 2} style={[pal.text, styles.extDescription]}> {link.description} </Text> @@ -54,30 +81,6 @@ export const ExternalLinkEmbed = ({ } const styles = StyleSheet.create({ - extContainer: { - flexDirection: isDesktopWeb ? 'row' : 'column', - }, - extInner: { - paddingHorizontal: isDesktopWeb ? 14 : 10, - paddingTop: 8, - paddingBottom: 10, - flex: isDesktopWeb ? 1 : undefined, - }, - extImageContainer: isDesktopWeb - ? { - borderTopLeftRadius: 6, - borderBottomLeftRadius: 6, - width: 120, - aspectRatio: 1, - overflow: 'hidden', - } - : { - borderTopLeftRadius: 6, - borderTopRightRadius: 6, - width: '100%', - height: 200, - overflow: 'hidden', - }, extImage: { width: '100%', height: 200, diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx index bf2365f18..ce6da4a1b 100644 --- a/src/view/com/util/post-embeds/index.tsx +++ b/src/view/com/util/post-embeds/index.tsx @@ -22,6 +22,7 @@ import {ImageLayoutGrid} from '../images/ImageLayoutGrid' import {ImagesLightbox} from 'state/models/ui/shell' import {useStores} from 'state/index' import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {YoutubeEmbed} from './YoutubeEmbed' import {ExternalLinkEmbed} from './ExternalLinkEmbed' import {getYoutubeVideoId} from 'lib/strings/url-helpers' @@ -29,7 +30,6 @@ import {MaybeQuoteEmbed} from './QuoteEmbed' import {AutoSizedImage} from '../images/AutoSizedImage' import {CustomFeedEmbed} from './CustomFeedEmbed' import {ListEmbed} from './ListEmbed' -import {isDesktopWeb} from 'platform/detection' import {isCauseALabelOnUri} from 'lib/moderation' type Embed = @@ -50,6 +50,7 @@ export function PostEmbeds({ }) { const pal = usePalette('default') const store = useStores() + const {isMobile} = useWebMediaQueries() // quote post with media // = @@ -111,7 +112,10 @@ export function PostEmbeds({ uri={thumb} onPress={() => openLightbox(0)} onPressIn={() => onPressIn(0)} - style={styles.singleImage}> + style={[ + styles.singleImage, + isMobile && styles.singleImageMobile, + ]}> {alt === '' ? null : ( <View style={styles.altContainer}> <Text style={styles.alt} accessible={false}> @@ -130,7 +134,11 @@ export function PostEmbeds({ images={embed.images} onPress={openLightbox} onPressIn={onPressIn} - style={embed.images.length === 1 ? styles.singleImage : undefined} + style={ + embed.images.length === 1 + ? [styles.singleImage, isMobile && styles.singleImageMobile] + : undefined + } /> </View> ) @@ -169,7 +177,10 @@ const styles = StyleSheet.create({ }, singleImage: { borderRadius: 8, - maxHeight: isDesktopWeb ? 1000 : 500, + maxHeight: 1000, + }, + singleImageMobile: { + maxHeight: 500, }, extOuter: { borderWidth: 1, |