From 92f3b41127f26237c51018ae683f824c80dde0f8 Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Sat, 14 Dec 2024 19:51:20 -0800
Subject: [PATCH] adding labels to audio and binary

---
 .../web/src/conversation/Conversation.tsx     |  2 +-
 .../audioFile/AudioFile.module.css            | 12 +++++++++++
 .../src/conversation/audioFile/AudioFile.tsx  | 10 +++++++--
 .../audioFile/useAudioFile.hook.ts            | 10 +++++----
 .../binaryFile/BinaryFile.module.css          | 21 ++++++++++++++++++-
 .../conversation/binaryFile/BinaryFile.tsx    |  4 +++-
 .../binaryFile/useBinaryFile.hook.ts          |  5 +++++
 .../src/conversation/useConversation.hook.ts  |  8 ++++---
 8 files changed, 60 insertions(+), 12 deletions(-)

diff --git a/app/client/web/src/conversation/Conversation.tsx b/app/client/web/src/conversation/Conversation.tsx
index b5411849..2ff4a810 100644
--- a/app/client/web/src/conversation/Conversation.tsx
+++ b/app/client/web/src/conversation/Conversation.tsx
@@ -128,7 +128,7 @@ export function Conversation() {
     } else if (asset.type === 'video') {
       return <VideoFile key={index} source={asset.file} thumbPosition={(position: number) => actions.setThumbPosition(index, position)} disabled={sending} />
     } else if (asset.type === 'audio') {
-      return <AudioFile key={index} source={asset.file} />
+      return <AudioFile key={index} source={asset.file} updateLabel={(label: string) => actions.setLabel(index, label)} disabled={sending} />
     } else {
       return <BinaryFile key={index} source={asset.file} />
     }
diff --git a/app/client/web/src/conversation/audioFile/AudioFile.module.css b/app/client/web/src/conversation/audioFile/AudioFile.module.css
index 185ed2db..4864a8fb 100644
--- a/app/client/web/src/conversation/audioFile/AudioFile.module.css
+++ b/app/client/web/src/conversation/audioFile/AudioFile.module.css
@@ -1,9 +1,21 @@
 .asset {
   padding-top: 16px;
+  position: relative;
 
   .thumb {
     width: auto;
     height: 92px;
   }
+
+  .label {
+    padding-top: 16px;
+    padding-left: 2px;
+    padding-right: 2px;
+    position: absolute;
+    font-size: 8px;
+    top: 0;
+    left: 0;
+    height: 67%;
+  }
 }
 
diff --git a/app/client/web/src/conversation/audioFile/AudioFile.tsx b/app/client/web/src/conversation/audioFile/AudioFile.tsx
index aa347985..1a440091 100644
--- a/app/client/web/src/conversation/audioFile/AudioFile.tsx
+++ b/app/client/web/src/conversation/audioFile/AudioFile.tsx
@@ -1,15 +1,21 @@
 import React from 'react';
-import { Image } from '@mantine/core'
+import { Image, Textarea } from '@mantine/core'
 import { useAudioFile } from './useAudioFile.hook';
 import classes from './AudioFile.module.css'
 import audio from '../../images/audio.png'
 
-export function AudioFile({ source }: {source: File}) {
+export function AudioFile({ source, updateLabel, disabled }: {source: File, updateLabel: (label: string)=>void, disabled: boolean}) {
   const { state, actions } = useAudioFile(source);
 
+  const setLabel = (label: string) => {
+    updateLabel(label);
+    actions.setLabel(label);
+  }
+
   return (
     <div className={classes.asset}>
       <Image radius="sm" className={classes.thumb} src={audio} />
+      <Textarea className={classes.label} size="xs" value={state.label} onChange={(event) => setLabel(event.currentTarget.value)} disabled={disabled} />
     </div>
   );
 }
diff --git a/app/client/web/src/conversation/audioFile/useAudioFile.hook.ts b/app/client/web/src/conversation/audioFile/useAudioFile.hook.ts
index 741c5275..33400f9c 100644
--- a/app/client/web/src/conversation/audioFile/useAudioFile.hook.ts
+++ b/app/client/web/src/conversation/audioFile/useAudioFile.hook.ts
@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'
 
 export function useAudioFile(source: File) {
   const [state, setState] = useState({
-    thumbUrl: null,
+    label: '',
   })
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -11,12 +11,14 @@ export function useAudioFile(source: File) {
   }
 
   useEffect(() => {
-    const thumbUrl = URL.createObjectURL(source);
-    updateState({ thumbUrl });
-    return () => { URL.revokeObjectURL(thumbUrl) };
+    const label = source.name.split('.').shift();
+    updateState({ label });
   }, [source]);    
 
   const actions = {
+    setLabel: (label: string) => {
+      updateState({ label });
+    }
   }
 
   return { state, actions }
diff --git a/app/client/web/src/conversation/binaryFile/BinaryFile.module.css b/app/client/web/src/conversation/binaryFile/BinaryFile.module.css
index 185ed2db..cafb613d 100644
--- a/app/client/web/src/conversation/binaryFile/BinaryFile.module.css
+++ b/app/client/web/src/conversation/binaryFile/BinaryFile.module.css
@@ -1,9 +1,28 @@
 .asset {
-  padding-top: 16px;
+  margin-top: 16px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   .thumb {
     width: auto;
     height: 92px;
   }
+
+  .name {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    text-align: center;
+  }
+
+  .extension {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    text-align: center;
+  }
 }
 
diff --git a/app/client/web/src/conversation/binaryFile/BinaryFile.tsx b/app/client/web/src/conversation/binaryFile/BinaryFile.tsx
index 83679c02..d05c189c 100644
--- a/app/client/web/src/conversation/binaryFile/BinaryFile.tsx
+++ b/app/client/web/src/conversation/binaryFile/BinaryFile.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Image } from '@mantine/core'
+import { Text, Image } from '@mantine/core'
 import { useBinaryFile } from './useBinaryFile.hook';
 import classes from './BinaryFile.module.css'
 import binary from '../../images/binary.png'
@@ -10,6 +10,8 @@ export function BinaryFile({ source }: {source: File}) {
   return (
     <div className={classes.asset}>
       <Image radius="sm" className={classes.thumb} src={binary} />
+      <Text className={classes.name}>{ state.name }</Text>
+      <Text className={classes.extension}>{ state.extension }</Text>
     </div>
   );
 }
diff --git a/app/client/web/src/conversation/binaryFile/useBinaryFile.hook.ts b/app/client/web/src/conversation/binaryFile/useBinaryFile.hook.ts
index 8181b7f8..e51bc40f 100644
--- a/app/client/web/src/conversation/binaryFile/useBinaryFile.hook.ts
+++ b/app/client/web/src/conversation/binaryFile/useBinaryFile.hook.ts
@@ -2,6 +2,8 @@ import { useState, useEffect } from 'react'
 
 export function useBinaryFile(source: File) {
   const [state, setState] = useState({
+    name: '',
+    extension: '',
   })
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -10,6 +12,9 @@ export function useBinaryFile(source: File) {
   }
 
   useEffect(() => {
+    const name = source.name.split('.').shift();
+    const extension = source.name.split('.').pop();
+    updateState({ name, extension });
   }, [source]);    
 
   const actions = {
diff --git a/app/client/web/src/conversation/useConversation.hook.ts b/app/client/web/src/conversation/useConversation.hook.ts
index d3aa2a9f..7613ada3 100644
--- a/app/client/web/src/conversation/useConversation.hook.ts
+++ b/app/client/web/src/conversation/useConversation.hook.ts
@@ -191,6 +191,9 @@ export function useConversation() {
     setThumbPosition: (index: number, position: number) => {
       updateAsset(index, { position });
     },
+    setLabel: (index: number, label: string) => {
+      updateAsset(index, { label });
+    },
     more: async () => {
       const focus = app.state.focus;
       if (focus) {
@@ -209,7 +212,6 @@ export function useConversation() {
       if (focus) {
         const sources = [] as AssetSource[];
         const uploadAssets = state.assets.map(asset => {
-          const name = asset.file.name.split('.').shift();
           const extension = asset.file.name.split('.').pop();
           if (asset.type === 'image') {
             if (sealed) {
@@ -245,12 +247,12 @@ export function useConversation() {
               sources.push({ type: AssetType.Audio, source: asset.file, transforms: [
                 { type: TransformType.Copy, appId: `ac${sources.length}` }
               ]});
-              return { encrypted: { type: 'audio', label: name, parts: `ac${sources.length-1}` } };
+              return { encrypted: { type: 'audio', label: asset.label, parts: `ac${sources.length-1}` } };
             } else {
               sources.push({ type: AssetType.Video, source: asset.file, transforms: [
                 { type: TransformType.Copy, appId: `ac${sources.length}` }
               ]});
-              return { audio: { label: name, full: `ac${sources.length-1}` } };
+              return { audio: { label: asset.label, full: `ac${sources.length-1}` } };
             }
           } else {
             if (sealed) {