Preview audio files (#114)

packages/ui/src/components/files/file-body.tsx

@@ -10,7 +10,9 @@ interface FileBodyProps {
 
 export const FileBody = ({ file }: FileBodyProps) => {
   const canPreview =
-    file.attributes.subtype === 'image' || file.attributes.subtype === 'video';
+    file.attributes.subtype === 'image' ||
+    file.attributes.subtype === 'video' ||
+    file.attributes.subtype === 'audio';
 
   return (
     <div className="flex h-full max-h-full w-full flex-row items-center gap-2">

packages/ui/src/components/files/file-preview.tsx

@@ -3,6 +3,7 @@ import { useEffect } from 'react';
 import { DownloadStatus, LocalFileNode } from '@colanode/client/types';
 import { FileDownloadProgress } from '@colanode/ui/components/files/file-download-progress';
 import { FileNoPreview } from '@colanode/ui/components/files/file-no-preview';
+import { FilePreviewAudio } from '@colanode/ui/components/files/previews/file-preview-audio';
 import { FilePreviewImage } from '@colanode/ui/components/files/previews/file-preview-image';
 import { FilePreviewVideo } from '@colanode/ui/components/files/previews/file-preview-video';
 import { useWorkspace } from '@colanode/ui/contexts/workspace';
@@ -75,5 +76,9 @@ export const FilePreview = ({ file }: FilePreviewProps) => {
     return <FilePreviewVideo url={url} />;
   }
 
+  if (file.attributes.subtype === 'audio') {
+    return <FilePreviewAudio url={url} name={file.attributes.name} />;
+  }
+
   return <FileNoPreview mimeType={file.attributes.mimeType} />;
 };

packages/ui/src/components/files/previews/file-preview-audio.tsx

@@ -0,0 +1,17 @@
+interface FilePreviewAudioProps {
+  url: string;
+  name?: string;
+}
+
+export const FilePreviewAudio = ({ url, name }: FilePreviewAudioProps) => {
+  return (
+    <audio
+      controls
+      src={url}
+      className="w-full max-w-3xl"
+      aria-label={name ? `Audio file: ${name}` : 'Audio file'}
+    >
+      Your browser does not support the audio element.
+    </audio>
+  );
+};