zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

[Video] Media preview improvements (#5229) 

* background color for images that haven't loaded

* fix recordwithmedia not appearing
zio/stable
Samuel Newman 2024-09-09 16:41:27 +01:00 committed by GitHub
parent 6c6a76b193
commit 44f1cd9fb5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/MediaPreview.tsx
View File

@ -10,7 +10,7 @@ import {
import {Trans} from '@lingui/macro' import {Trans} from '@lingui/macro'
import {parseTenorGif} from '#/lib/strings/embed-player' import {parseTenorGif} from '#/lib/strings/embed-player'
import {atoms as a} from '#/alf' import {atoms as a, useTheme} from '#/alf'
import {Text} from '#/components/Typography' import {Text} from '#/components/Typography'
import {PlayButtonIcon} from '#/components/video/PlayButtonIcon' import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
@ -43,10 +43,10 @@ export function Embed({
))} ))}
</Outer> </Outer>
) )
} else if (AppBskyEmbedExternal.isView(embed) && embed.external.thumb) { } else if (AppBskyEmbedExternal.isView(media) && media.external.thumb) {
let url: URL | undefined let url: URL | undefined
try { try {
url = new URL(embed.external.uri) url = new URL(media.external.uri)
} catch {} } catch {}
if (url) { if (url) {
const {success} = parseTenorGif(url) const {success} = parseTenorGif(url)
@ -54,17 +54,17 @@ export function Embed({
return ( return (
<Outer style={style}> <Outer style={style}>
<GifItem <GifItem
thumbnail={embed.external.thumb} thumbnail={media.external.thumb}
alt={embed.external.title} alt={media.external.title}
/> />
</Outer> </Outer>
) )
} }
} }
} else if (AppBskyEmbedVideo.isView(embed)) { } else if (AppBskyEmbedVideo.isView(media)) {
return ( return (
<Outer style={style}> <Outer style={style}>
<VideoItem thumbnail={embed.thumbnail} alt={embed.alt} /> <VideoItem thumbnail={media.thumbnail} alt={media.alt} />
</Outer> </Outer>
) )
} }
@ -91,12 +91,13 @@ export function ImageItem({
alt?: string alt?: string
children?: React.ReactNode children?: React.ReactNode
}) { }) {
const t = useTheme()
return ( return (
<View style={[a.relative, a.flex_1, {aspectRatio: 1, maxWidth: 100}]}> <View style={[a.relative, a.flex_1, {aspectRatio: 1, maxWidth: 100}]}>
<Image <Image
key={thumbnail} key={thumbnail}
source={{uri: thumbnail}} source={{uri: thumbnail}}
style={[a.flex_1, a.rounded_xs]} style={[a.flex_1, a.rounded_xs, t.atoms.bg_contrast_25]}
contentFit="cover" contentFit="cover"
accessible={true} accessible={true}
accessibilityIgnoresInvertColors accessibilityIgnoresInvertColors