From 55d89107c77da4f7871cf4df0c4b0ea735acabb5 Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Mon, 20 Jan 2025 09:22:37 -0800
Subject: [PATCH] fixing upload of unsealed binary

---
 .../mobile/src/message/audioAsset/AudioAsset.styled.ts     | 3 +++
 app/client/mobile/src/message/audioAsset/AudioAsset.tsx    | 2 +-
 .../mobile/src/message/imageAsset/ImageAsset.styled.ts     | 2 ++
 .../mobile/src/message/videoAsset/VideoAsset.styled.ts     | 2 ++
 .../web/src/conversation/audioFile/AudioFile.module.css    | 5 +++++
 .../web/src/conversation/binaryFile/BinaryFile.module.css  | 3 +++
 app/client/web/src/conversation/useConversation.hook.ts    | 2 +-
 .../web/src/message/audioAsset/AudioAsset.module.css       | 6 ++++++
 .../web/src/message/binaryAsset/BinaryAsset.module.css     | 7 +++++++
 app/client/web/src/message/binaryAsset/BinaryAsset.tsx     | 1 -
 app/sdk/src/focus.ts                                       | 4 ++--
 11 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/app/client/mobile/src/message/audioAsset/AudioAsset.styled.ts b/app/client/mobile/src/message/audioAsset/AudioAsset.styled.ts
index 435ea5a2..64cdcf2e 100644
--- a/app/client/mobile/src/message/audioAsset/AudioAsset.styled.ts
+++ b/app/client/mobile/src/message/audioAsset/AudioAsset.styled.ts
@@ -71,6 +71,7 @@ export const styles = StyleSheet.create({
     minWidth: 0,
     textOverflow: 'ellipsis',
     flexShrink: 1,
+    height: 32,
   },
   close: {
     display: 'flex',
@@ -83,6 +84,8 @@ export const styles = StyleSheet.create({
   },
   closeIcon: {
     flexShrink: 0,
+    borderRadius: 8,
+    opacity: 0.7,
   },
   progress: {
     position: 'absolute',
diff --git a/app/client/mobile/src/message/audioAsset/AudioAsset.tsx b/app/client/mobile/src/message/audioAsset/AudioAsset.tsx
index d72e007d..af368d8a 100644
--- a/app/client/mobile/src/message/audioAsset/AudioAsset.tsx
+++ b/app/client/mobile/src/message/audioAsset/AudioAsset.tsx
@@ -101,7 +101,7 @@ export function AudioAsset({ topicId, asset, loaded, show }: { topicId: string,
           { state.dataUrl && (
             <Video source={{ uri: state.dataUrl }} style={styles.player} paused={false} ref={videoRef}
               onPlaybackRateChange={playbackRateChange} onEnd={end} onError={actions.failed}
-              controls={false} resizeMode="contain" />
+              audioOnly={true} controls={false} resizeMode="contain" />
           )}
           { status === 'playing' && (
             <Surface elevation={2} style={styles.control}>
diff --git a/app/client/mobile/src/message/imageAsset/ImageAsset.styled.ts b/app/client/mobile/src/message/imageAsset/ImageAsset.styled.ts
index 4a9598ce..1a82bd8b 100644
--- a/app/client/mobile/src/message/imageAsset/ImageAsset.styled.ts
+++ b/app/client/mobile/src/message/imageAsset/ImageAsset.styled.ts
@@ -40,6 +40,8 @@ export const styles = StyleSheet.create({
     flexGrow: 1,
   },
   closeIcon: {
+    borderRadius: 8,
+    opacity: 0.7,
   },
   progress: {
     position: 'absolute',
diff --git a/app/client/mobile/src/message/videoAsset/VideoAsset.styled.ts b/app/client/mobile/src/message/videoAsset/VideoAsset.styled.ts
index 57e3ef3a..fcd2b754 100644
--- a/app/client/mobile/src/message/videoAsset/VideoAsset.styled.ts
+++ b/app/client/mobile/src/message/videoAsset/VideoAsset.styled.ts
@@ -57,6 +57,8 @@ export const styles = StyleSheet.create({
     right: 0,
   },
   closeIcon: {
+    borderRadius: 8,
+    opacity: 0.7,
   },
   progress: {
     position: 'absolute',
diff --git a/app/client/web/src/conversation/audioFile/AudioFile.module.css b/app/client/web/src/conversation/audioFile/AudioFile.module.css
index d8b29aea..908f4069 100644
--- a/app/client/web/src/conversation/audioFile/AudioFile.module.css
+++ b/app/client/web/src/conversation/audioFile/AudioFile.module.css
@@ -4,6 +4,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
 
   .thumb {
     width: auto;
@@ -15,6 +16,10 @@
     padding-right: 2px;
     position: absolute;
     font-size: 12px;
+    text-overflow: ellipsis;
+    min-width: 0;
+    width: 100%;
+    overflow: hidden;
   }
 
   .close {
diff --git a/app/client/web/src/conversation/binaryFile/BinaryFile.module.css b/app/client/web/src/conversation/binaryFile/BinaryFile.module.css
index 80ff52bc..ddb15b89 100644
--- a/app/client/web/src/conversation/binaryFile/BinaryFile.module.css
+++ b/app/client/web/src/conversation/binaryFile/BinaryFile.module.css
@@ -18,6 +18,9 @@
     text-align: center;
     overflow: hidden;
     text-overflow: ellipsis;
+    height: 100%;
+    font-size: 12px;
+    white-space: nowrap;
   }
 
   .extension {
diff --git a/app/client/web/src/conversation/useConversation.hook.ts b/app/client/web/src/conversation/useConversation.hook.ts
index b1dede0d..1195c6cf 100644
--- a/app/client/web/src/conversation/useConversation.hook.ts
+++ b/app/client/web/src/conversation/useConversation.hook.ts
@@ -271,7 +271,7 @@ export function useConversation() {
               ]});
               return { encrypted: { type: 'audio', label: asset.label, parts: `ac${sources.length-1}` } };
             } else {
-              sources.push({ type: AssetType.Video, source: asset.file, transforms: [
+              sources.push({ type: AssetType.Audio, source: asset.file, transforms: [
                 { type: TransformType.Copy, appId: `ac${sources.length}` }
               ]});
               return { audio: { label: asset.label, full: `ac${sources.length-1}` } };
diff --git a/app/client/web/src/message/audioAsset/AudioAsset.module.css b/app/client/web/src/message/audioAsset/AudioAsset.module.css
index 29978a5d..810c2548 100644
--- a/app/client/web/src/message/audioAsset/AudioAsset.module.css
+++ b/app/client/web/src/message/audioAsset/AudioAsset.module.css
@@ -11,6 +11,8 @@
     width: 100%;
     text-align: center;
     font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .play {
@@ -46,6 +48,10 @@
   .label {
     position: absolute;
     top: 0px;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 8px;
   }
 
   .close {
diff --git a/app/client/web/src/message/binaryAsset/BinaryAsset.module.css b/app/client/web/src/message/binaryAsset/BinaryAsset.module.css
index 8dd35532..c0b43cd9 100644
--- a/app/client/web/src/message/binaryAsset/BinaryAsset.module.css
+++ b/app/client/web/src/message/binaryAsset/BinaryAsset.module.css
@@ -14,6 +14,9 @@
       width: 100%;
       text-align: center;
       font-size: 12px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
     }
 
     .extension {
@@ -21,6 +24,7 @@
       text-align: center;
       font-size: 12px;
       font-weight: bold;
+      overflow: hidden;
     }
   }
 
@@ -63,6 +67,9 @@
       width: 100%;
       text-align: center;
       font-size: 16px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
     }
 
     .extension {
diff --git a/app/client/web/src/message/binaryAsset/BinaryAsset.tsx b/app/client/web/src/message/binaryAsset/BinaryAsset.tsx
index 2412c052..21431ad9 100644
--- a/app/client/web/src/message/binaryAsset/BinaryAsset.tsx
+++ b/app/client/web/src/message/binaryAsset/BinaryAsset.tsx
@@ -21,7 +21,6 @@ export function BinaryAsset({ topicId, asset }: { topicId: string, asset: MediaA
   }
 
   const download = () => {
-    console.log("DOWNLOAD");
     const link = document.createElement("a");
     link.download = `${label}.${extension.toLowerCase()}`
     link.href = state.dataUrl;
diff --git a/app/sdk/src/focus.ts b/app/sdk/src/focus.ts
index e828125b..ce73a3ec 100644
--- a/app/sdk/src/focus.ts
+++ b/app/sdk/src/focus.ts
@@ -499,7 +499,7 @@ export class FocusModule implements Focus {
                 transforms.push('acopy;audio');
                 transformMap.set('acopy;audio', transform.appId);
               } else if (transform.type === TransformType.Copy && asset.type === AssetType.Binary) {
-                const assetId = await this.mirrorFile(asset.source, topicId, assetProgress);
+                const { assetId } = await this.mirrorFile(asset.source, topicId, assetProgress);
                 uploadCount += 1;
                 const assetItem = {
                   assetId: `${assetItems.length}`,
@@ -566,7 +566,7 @@ export class FocusModule implements Focus {
               return { encrypted: { type, thumb: getAsset(thumb), parts: getAsset(parts) } };
             } else if (type === 'audio') {
               return { encrypted: { type, label, parts: getAsset(parts) } };
-            }else {
+            } else {
               return { encrypted: { type, label, extension, parts: getAsset(parts) } };
             }
           } else if (asset.image) {