From 44f1cd9fb5c1d468fc97dfcfe38764bae0b1c7bf Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Mon, 9 Sep 2024 16:41:27 +0100
Subject: [PATCH] [Video] Media preview improvements (#5229)

* background color for images that haven't loaded

* fix recordwithmedia not appearing
---
 src/components/MediaPreview.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/MediaPreview.tsx b/src/components/MediaPreview.tsx
index 7d7cb2b4..f2ebb458 100644
--- a/src/components/MediaPreview.tsx
+++ b/src/components/MediaPreview.tsx
@@ -10,7 +10,7 @@ import {
 import {Trans} from '@lingui/macro'
 
 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 {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
 
@@ -43,10 +43,10 @@ export function Embed({
         ))}
       </Outer>
     )
-  } else if (AppBskyEmbedExternal.isView(embed) && embed.external.thumb) {
+  } else if (AppBskyEmbedExternal.isView(media) && media.external.thumb) {
     let url: URL | undefined
     try {
-      url = new URL(embed.external.uri)
+      url = new URL(media.external.uri)
     } catch {}
     if (url) {
       const {success} = parseTenorGif(url)
@@ -54,17 +54,17 @@ export function Embed({
         return (
           <Outer style={style}>
             <GifItem
-              thumbnail={embed.external.thumb}
-              alt={embed.external.title}
+              thumbnail={media.external.thumb}
+              alt={media.external.title}
             />
           </Outer>
         )
       }
     }
-  } else if (AppBskyEmbedVideo.isView(embed)) {
+  } else if (AppBskyEmbedVideo.isView(media)) {
     return (
       <Outer style={style}>
-        <VideoItem thumbnail={embed.thumbnail} alt={embed.alt} />
+        <VideoItem thumbnail={media.thumbnail} alt={media.alt} />
       </Outer>
     )
   }
@@ -91,12 +91,13 @@ export function ImageItem({
   alt?: string
   children?: React.ReactNode
 }) {
+  const t = useTheme()
   return (
     <View style={[a.relative, a.flex_1, {aspectRatio: 1, maxWidth: 100}]}>
       <Image
         key={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"
         accessible={true}
         accessibilityIgnoresInvertColors