Drop carousel naming, cap gallery MediaPreview to 4 tiles
Renames `GRID_TO_CAROUSEL_THRESHOLD` -> `MAX_GRID_IMAGES` and `carouselEnabled` -> `useExpandedLayout` in ImageEmbed so the render-path decision reads as a count threshold rather than naming the component that happens to live downstream today. Also slices the gallery branch of MediaPreview to the first 4 items so a 10-image gallery doesn't overflow the inline notification/DM row.
This commit is contained in:
@@ -48,9 +48,11 @@ export function Embed({
|
|||||||
</Outer>
|
</Outer>
|
||||||
)
|
)
|
||||||
} else if (e.type === 'gallery') {
|
} else if (e.type === 'gallery') {
|
||||||
|
// Notification/DM preview is a narrow inline strip; cap at 4 tiles so
|
||||||
|
// a 10-image gallery doesn't blow out the row width.
|
||||||
return (
|
return (
|
||||||
<Outer style={style}>
|
<Outer style={style}>
|
||||||
{e.view.items.map(item => {
|
{e.view.items.slice(0, 4).map(item => {
|
||||||
const image: AppBskyEmbedImages.ViewImage = {
|
const image: AppBskyEmbedImages.ViewImage = {
|
||||||
thumb: item.thumbnail,
|
thumb: item.thumbnail,
|
||||||
fullsize: item.fullsize,
|
fullsize: item.fullsize,
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ import {useAnalytics} from '#/analytics'
|
|||||||
import {type EmbedType} from '#/types/bsky/post'
|
import {type EmbedType} from '#/types/bsky/post'
|
||||||
import {type CommonProps} from './types'
|
import {type CommonProps} from './types'
|
||||||
|
|
||||||
const GRID_TO_CAROUSEL_THRESHOLD = 4
|
const MAX_GRID_IMAGES = 4
|
||||||
|
|
||||||
export function ImageEmbed({
|
export function ImageEmbed({
|
||||||
embed,
|
embed,
|
||||||
@@ -35,9 +35,9 @@ export function ImageEmbed({
|
|||||||
aspectRatio: item.aspectRatio,
|
aspectRatio: item.aspectRatio,
|
||||||
}))
|
}))
|
||||||
: embed.view.images
|
: embed.view.images
|
||||||
const carouselEnabled =
|
const useExpandedLayout =
|
||||||
embed.type === 'gallery'
|
embed.type === 'gallery'
|
||||||
? images.length > GRID_TO_CAROUSEL_THRESHOLD
|
? images.length > MAX_GRID_IMAGES
|
||||||
: ax.features.enabled(ax.features.PostGalleryEmbedEnable)
|
: ax.features.enabled(ax.features.PostGalleryEmbedEnable)
|
||||||
|
|
||||||
// Captured from AutoSizedImage so the peek-commit handler can reuse the same
|
// Captured from AutoSizedImage so the peek-commit handler can reuse the same
|
||||||
@@ -127,7 +127,7 @@ export function ImageEmbed({
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (carouselEnabled) {
|
if (useExpandedLayout) {
|
||||||
return (
|
return (
|
||||||
<View style={[a.mt_sm, rest.style]}>
|
<View style={[a.mt_sm, rest.style]}>
|
||||||
<Gallery
|
<Gallery
|
||||||
|
|||||||
Reference in New Issue
Block a user