diff --git a/src/lib/strings/url-helpers.ts b/src/lib/strings/url-helpers.ts index 105c631b..1406e2af 100644 --- a/src/lib/strings/url-helpers.ts +++ b/src/lib/strings/url-helpers.ts @@ -30,7 +30,7 @@ export function toNiceDomain(url: string): string { if (`https://${urlp.host}` === PROD_SERVICE) { return 'Bluesky Social' } - return urlp.host + return urlp.host ? urlp.host : url } catch (e) { return url } diff --git a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx index d371cbfc..6dd93c19 100644 --- a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx +++ b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx @@ -4,6 +4,8 @@ import {Text} from '../text/Text' import {StyleSheet, View} from 'react-native' import {usePalette} from 'lib/hooks/usePalette' import {AppBskyEmbedExternal} from '@atproto/api' +import {isDesktopWeb} from 'platform/detection' +import {toNiceDomain} from 'lib/strings/url-helpers' export const ExternalLinkEmbed = ({ link, @@ -14,7 +16,7 @@ export const ExternalLinkEmbed = ({ }) => { const pal = usePalette('default') return ( - <> + {link.thumb ? ( ) : undefined} - - {link.title || link.uri} - - {link.uri} + {toNiceDomain(link.uri)} + + + {link.title || link.uri} {link.description ? ( {link.description} ) : undefined} - + ) } const styles = StyleSheet.create({ + extContainer: { + flexDirection: isDesktopWeb ? 'row' : 'column', + }, extInner: { - padding: 10, - }, - extImageContainer: { - borderTopLeftRadius: 6, - borderTopRightRadius: 6, - width: '100%', - height: 200, - overflow: 'hidden', + 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,