rendering thumbs for audio and binary

app/client/web/src/message/Message.module.css

@@ -19,6 +19,15 @@
     overflow: auto;
   }
 
+  .failed {
+    width: 64px;
+    height: 64px;
+    margin-left: 72px;
+    margin-right: 32px;
+    margin-top: 8px;
+    border-radius: 8px;
+  }
+
   .content {
     display: flex;
     flex-direction: row;
@@ -53,6 +62,10 @@
         font-style: italic;
         color: var(--mantine-color-text-7);
       }
+
+      .unconfirmed {
+        width: 100%;
+      }
     
       .header {
         display: flex;

app/client/web/src/message/Message.tsx

@@ -1,18 +1,19 @@
 import { avatar } from '../constants/Icons'
 import { Topic, Card, Profile } from 'databag-client-sdk';
 import classes from './Message.module.css'
-import { Image } from '@mantine/core'
+import { Image, Skeleton } from '@mantine/core'
 import { ImageAsset } from './imageAsset/ImageAsset';
 import { AudioAsset } from './audioAsset/AudioAsset';
 import { VideoAsset } from './videoAsset/VideoAsset';
 import { BinaryAsset } from './binaryAsset/BinaryAsset';
 import type { MediaAsset } from '../conversation/Conversation';
 import { useMessage } from './useMessage.hook';
+import failed from '../images/failed.png'
 
 export function Message({ topic, card, profile, host }: { topic: Topic, card: Card | null, profile: Profile | null, host: boolean }) {
   const { state, actions } = useMessage();
 
-  const { locked, data, created, topicId } = topic;
+  const { locked, data, created, topicId, status, transform } = topic;
   const { name, handle, node } = profile || card || { name: null, handle: null, node: null }  
   const { text, textColor, textSize, assets } = data || { text: null, textColor: null, textSize: null }
   const textStyle = textColor && textSize ? { color: textColor, fontSize: textSize } : textColor ? { color: textColor } : textSize ? { fontSize: textSize } : {}
@@ -53,21 +54,33 @@ export function Message({ topic, card, profile, host }: { topic: Topic, card: Ca
             </div>
             <div className={classes.options}>OPTIONS</div>
           </div>
-          { !locked && text && (
+          { !locked && status === 'confirmed' && text && (
             <div style={textStyle}>
               <span className={classes.text}>{ text }</span>
             </div>
           )}
+          { !locked && status !== 'confirmed' && (
+            <div className={classes.unconfirmed}>
+              <Skeleton height={8} mt={6} radius="xl" />
+              <Skeleton height={8} mt={6} width="70%" radius="xl" />
+            </div>
+          )}
           { locked && (
             <div className={classes.locked}>{ state.strings.encrypted }</div>
           )}
         </div>
       </div>
-      { !locked && media.length > 0 && (
+      { !locked && media.length > 0 && transform === 'complete' && (
         <div className={classes.assets}>
           { media }
         </div>
       )}
+      { !locked && media.length > 0 && transform === 'incomplete' && (
+        <Skeleton height={64} circle mb="xl" />
+      )}
+      { !locked && media.length > 0 && transform !== 'complete' && transform !== 'incomplete' && (
+        <Image className={classes.failed} src={failed} fit="contain" />
+      )}
     </div>
   )
 }

app/client/web/src/message/audioAsset/AudioAsset.module.css

@@ -0,0 +1,8 @@
+.asset {
+
+  .thumb {
+    width: auto;
+    height: 128px;
+  }
+}
+

app/client/web/src/message/audioAsset/AudioAsset.tsx

@@ -1,9 +1,16 @@
 import React from 'react';
 import { MediaAsset } from '../../conversation/Conversation';
 import { useAudioAsset } from './useAudioAsset.hook';
+import audio from '../../images/audio.png'
+import classes from './AudioAsset.module.css'
+import { Image } from '@mantine/core'
 
 export function AudioAsset({ topicId, asset }: { topicId: string, asset: MediaAsset }) {
   const { state, actions } = useAudioAsset(topicId, asset);
-  return <div>Audio</div>
+  return (
+    <div className={classes.asset}>
+      <Image className={classes.thumb} src={audio} fit="contain" />
+    </div>
+  )
 }
 

app/client/web/src/message/binaryAsset/BinaryAsset.module.css

@@ -0,0 +1,8 @@
+.asset {
+
+  .thumb {
+    width: auto;
+    height: 128px;
+  }
+}
+

app/client/web/src/message/binaryAsset/BinaryAsset.tsx

@@ -1,9 +1,16 @@
 import React from 'react';
 import { MediaAsset } from '../../conversation/Conversation';
 import { useBinaryAsset } from './useBinaryAsset.hook';
+import binary from '../../images/binary.png'
+import classes from './BinaryAsset.module.css'
+import { Image } from '@mantine/core'
 
 export function BinaryAsset({ topicId, asset }: { topicId: string, asset: MediaAsset }) {
   const { state, actions } = useBinaryAsset(topicId, asset);
-  return <div>Binary</div>
+  return (
+    <div className={classes.asset}>
+      <Image className={classes.thumb} src={binary} fit="contain" />
+    </div>
+  )
 }