diff --git a/assets/icons/crop_stroke2_corner0_rounded.svg b/assets/icons/crop_stroke2_corner0_rounded.svg
new file mode 100644
index 0000000000..118d148f3c
--- /dev/null
+++ b/assets/icons/crop_stroke2_corner0_rounded.svg
@@ -0,0 +1 @@
+
diff --git a/src/components/icons/Crop.tsx b/src/components/icons/Crop.tsx
new file mode 100644
index 0000000000..4b3fc560f9
--- /dev/null
+++ b/src/components/icons/Crop.tsx
@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Crop_Stroke2_Corner0_Rounded = createSinglePathSVG({
+ path: 'M6 2a1 1 0 0 1 1 1v2h11a1 1 0 0 1 1 1v11h2a1 1 0 1 1 0 2h-2v2a1 1 0 1 1-2 0v-2H6a1 1 0 0 1-1-1V7H3a1 1 0 0 1 0-2h2V3a1 1 0 0 1 1-1Zm1 5v10h10V7H7Z',
+})
diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx
index 7c4a8485d2..dd66c2a9ae 100644
--- a/src/view/com/util/images/AutoSizedImage.tsx
+++ b/src/view/com/util/images/AutoSizedImage.tsx
@@ -7,7 +7,10 @@ import {useLingui} from '@lingui/react'
import * as imageSizes from '#/lib/media/image-sizes'
import {Dimensions} from '#/lib/media/types'
+import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
import {atoms as a, useTheme} from '#/alf'
+import {Crop_Stroke2_Corner0_Rounded as Crop} from '#/components/icons/Crop'
+import {Text} from '#/components/Typography'
export function useImageAspectRatio({
src,
@@ -16,9 +19,13 @@ export function useImageAspectRatio({
src: string
dimensions: Dimensions | undefined
}) {
- const [aspectRatio, setAspectRatio] = React.useState(
+ const [rawAspectRatio, setAspectRatio] = React.useState(
dimensions ? calc(dimensions) : 1,
)
+ const aspectRatio = React.useMemo(() => {
+ // max of 3:4 ratio
+ return Math.max(rawAspectRatio, 0.75)
+ }, [rawAspectRatio])
React.useEffect(() => {
let aborted = false
@@ -34,7 +41,9 @@ export function useImageAspectRatio({
return {
dimensions,
+ rawAspectRatio,
aspectRatio,
+ isCropped: rawAspectRatio < aspectRatio,
}
}
@@ -54,13 +63,6 @@ export function SquareFramedImage({
const ratio = Math.min(1 / aspectRatio, 1)
return `${ratio * 100}%`
}, [aspectRatio])
- /**
- * Computed as a CSS `aspectRatio` value
- */
- const innerAspectRatio = React.useMemo(() => {
- // max of 3:4 ratio
- return Math.max(aspectRatio, 0.75)
- }, [aspectRatio])
return (
@@ -72,7 +74,7 @@ export function SquareFramedImage({
a.rounded_sm,
a.overflow_hidden,
t.atoms.bg_contrast_25,
- {aspectRatio: innerAspectRatio},
+ {aspectRatio},
]}>
{children}
@@ -88,31 +90,71 @@ export function AutoSizedImage({
onPress,
onLongPress,
onPressIn,
- children = null,
}: {
image: AppBskyEmbedImages.ViewImage
disableCrop?: boolean
- children?: React.ReactNode
onPress?: () => void
onLongPress?: () => void
onPressIn?: () => void
}) {
const t = useTheme()
const {_} = useLingui()
- const {aspectRatio} = useImageAspectRatio({
+ const largeAlt = useLargeAltBadgeEnabled()
+ const {aspectRatio, isCropped: rawIsCropped} = useImageAspectRatio({
src: image.thumb,
dimensions: image.aspectRatio,
})
+ const isCropped = rawIsCropped && !disableCrop
+ const hasAlt = !!image.alt
const contents = (
-
+ <>
+
+
+ {hasAlt || isCropped ? (
+
+ {isCropped && (
+
+ )}
+ {hasAlt && (
+
+ ALT
+
+ )}
+
+ ) : null}
+ >
)
if (disableCrop) {
@@ -132,7 +174,6 @@ export function AutoSizedImage({
{aspectRatio},
]}>
{contents}
- {children}
)
} else {
@@ -147,7 +188,6 @@ export function AutoSizedImage({
accessibilityHint={_(msg`Tap to view full image`)}
style={[a.h_full]}>
{contents}
- {children}
)
diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx
index 3dda3fde8e..e909965574 100644
--- a/src/view/com/util/post-embeds/index.tsx
+++ b/src/view/com/util/post-embeds/index.tsx
@@ -3,7 +3,6 @@ import {
InteractionManager,
StyleProp,
StyleSheet,
- Text,
View,
ViewStyle,
} from 'react-native'
@@ -22,7 +21,6 @@ import {
} from '@atproto/api'
import {ImagesLightbox, useLightboxControls} from '#/state/lightbox'
-import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {usePalette} from 'lib/hooks/usePalette'
import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard'
@@ -60,7 +58,6 @@ export function PostEmbeds({
contextView?: 'thread-highlighted'
}) {
const {openLightbox} = useLightboxControls()
- const largeAltBadge = useLargeAltBadgeEnabled()
// quote post with media
// =
@@ -134,17 +131,8 @@ export function PostEmbeds({
disableCrop={contextView === 'thread-highlighted'}
image={image}
onPress={() => _openLightbox(0)}
- onPressIn={() => onPressIn(0)}>
- {image.alt === '' ? null : (
-
-
- ALT
-
-
- )}
-
+ onPressIn={() => onPressIn(0)}
+ />
)